Array原型方法整理(三)

数组原型方法的分类：

  一、会改变调用它们的对象自身的值

  二、不会改变调用它们的对象自身的值

  三、遍历方法

三、12个遍历方法

forEach(callback,thisObj)

  作用：指定数组的每项元素都执行一次传入的函数，返回值为undefined。
  参数：callback ->为数组中每个元素执行的函数，该函数接收三个参数：
                 value 当前元素的值
                 index 当前元素的索引
                 array  数组本身
             thisObj ->  可选参数，用来当做callback 函数内的this对象。

var array = [1, 3, 5];
var obj = {name:'cc'};
var sReturn = array.forEach(function(value, index, array){
  array[index] = value * value;
  console.log(this.name); // cc被打印了三次
},obj);
console.log(array); // [1, 9, 25], 可以在回调函数中改变原数组
console.log(sReturn); // undefined

  forEach无法直接退出循环，只能使用return 来达到for循环中continue的效果。

var array =['a','b','c','d']
array.forEach(function(item){
    if(item === 'a'){
        return; // 这里只能使用return跳过当前元素处理
    }
    console.log(item); // b c d
})

   forEach处理类数组对象。

var o = {0:1, 1:3, 2:5, length:3};
Array.prototype.forEach.call(o,function(value, index, obj){
  obj[index] = value * value;
});
console.log(o); // {0: 1, 1: 9, 2: 25, length: 3}

every(callback,thisObj)

  作用：使用传入的函数测试所有元素，只要其中有一个函数返回值为 false，那么结果为 false；只有全部返回 true，才为 true。
  参数：callback -> 用来测试每个元素的函数，该函数接收三个参数：
                 value 当前元素的值
                 index 当前元素的索引
                 array  数组本身
             thisObj->  可选参数，用来当做callback 函数内的this对象。

function testNum(value, index, array) {
  //当不满足条件返回false时，之后的元素也不再遍历了
  console.log(value);//第一次输出：12 5；第二次输出：12 54 18 130 44
  return value >= 10;
}
[12, 5, 8, 130, 44].every(testNum);  // false
[12, 54, 18, 130, 44].every(testNum); //true

some(callback,thisObj)

  作用：使用传入的函数测试某些元素，只要有一个函数返回值为true，则结果为true；若全部返回false，才为 false。
  参数：callback -> 用来测试每个元素的函数，该函数接收三个参数：
                 value 元素的值
                 index 元素的索引
                 array  被遍历的数组
             thisObj->  可选参数，用来当做callback 函数内的this对象。

function testNum(value, index, array) {
  return value >= 10;
}
[12, 5, 8, 130, 44].some(testNum);//true

filter(callback,thisObj)

  作用：使用传入的函数测试所有元素，并返回所有通过测试的元素组成的新数组。
  参数：callback -> 用来测试每个元素的函数，返回true表示保留该元素(通过测试)，false则不保留。该函数接收三个参数：
                 value 元素的值
                 index 元素的索引
                 array  被遍历的数组
             thisObj->  可选参数，用来当做callback 函数内的this对象。

var array = [18, 9, 10, 35, 80];
var array2 = array.filter(function(value, index, array){
  return value > 20;
});
console.log(array2); // [35, 80]

map(callback,thisObj)

  作用：遍历数组，使用传入函数处理每个元素，并返回函数的返回值组成的新数组。
  参数：callback -> 生成新数组元素的函数，该函数接收三个参数：
                 value 元素的值
                 index 元素的索引
                 array  被遍历的数组
             thisObj->  可选参数，用来当做callback 函数内的this对象。

var numbers = [1, 4, 9];
var doubles = numbers.map(function(value) {
  return value * 2;
});
console.log(doubles); // [1,8,18]

reduce(callback,initialValue)

  作用：方法接收一个方法作为累加器，数组中的每个值(从左到右)依次累计，返回汇总后的单个结果值。
  参数：callback -> 执行数组中每个值的函数，该函数接收四个参数：
                 previousValue 累计器累计回调的返回值，或initialValue
                 value  当前被处理的元素
                 index  当前被处理的元素的索引
                 array 数组本身
             initialValue->  可选参数，作为第一次调用 callback函数时的第一个参数的值

var array = [2, 5, 3, 4];
// previousValue初始值为initialValue参数的值1，此时value为2，index为0；
// 若不传initialValue，则previousValue初始为当前数组的第一个元素2，此时value为5，index为1
var sum = array.reduce(function(previousValue, value, index, array){
  console.log(value);//依次输出 2 5 3 4
  return previousValue * value;
},1);
console.log(sum); // 120

reduceRight(callback,initialValue)

  作用：方法接收一个方法作为累加器，数组中的每个值(从右到左)依次累计，返回汇总后的单个结果值。
  参数：callback -> 执行数组中每个值的函数，该函数接收四个参数：
                 previousValue 累计器累计回调的返回值，或initialValue
                 value  当前被处理的元素
                 index  当前被处理的元素的索引
                 array 数组本身
             initialValue->  可选参数，作为第一次调用 callback函数时的第一个参数的值

var array = [1, 2, 3, 4];
var sum = array.reduceRight(function(previousValue, value, index, array){
  console.log(value);//依次输出 4 3 2 1
  return previousValue * value;
},1);
console.log(sum); // 120

array.reduceRight(function(previousValue, value, index, array){
  console.log(value);//依次输出 3 2 1
  return previousValue * value;
});

findIndex(callback,thisObj)

  作用：返回数组中满足提供的测试函数的第一个元素的索引,否则返回-1。

find(callback,thisObj)

  作用：返回数组中满足提供的测试函数的第一个元素的值;如果没有,则返回undefined。

  findIndex和find都是查找元素，只是返回值不同。

var array = [1, 3, 5, 7, 8, 9, 10];
function fn1(value, index, array){
  return value%2==0;
}
function fn2(value, index, array){
  return value > 20;
}

//返回第一个满足条件的元素
console.log(array.find(fn)); // 8
console.log(array.find(fn2)); // undefined

//返回第一个满足条件的元素的索引
console.log(array.findIndex(fn)); // 4
console.log(array.findIndex(fn2)); // -1

entries()

  作用：返回一个数组迭代器对象，该对象包含数组中每个索引的键值对。用于遍历迭代器取得原数组的[key,value]

var array = ["a", "b", "c"];
var iterator = array.entries();
console.log(iterator.next().value); // [0, "a"]
console.log(iterator.next().value); // [1, "b"]
console.log(iterator.next().value); // [2, "c"]
console.log(iterator.next().value); // undefined, 迭代器处于数组末尾时, 再迭代就会返回undefined
console.log([...iterator]);//[[0, "a"], [1, "b"],[2, "c"]]

keys() 

  作用：返回一个数组迭代器对象，该对象包含数组中每个索引键。

var array = ["abc", "xyz"];
var iterator = array.keys();
console.log(iterator.next()); // {value: 0, done: false}
console.log(iterator.next()); // {value: 1, done: false}
console.log(iterator.next()); // {value: undefined, done: false}

  索引迭代器会包含那些没有对应元素的索引。

var array = ["abc", ,"xyz"];
var sparseKeys = Object.keys(array);
console.log(sparseKeys); // ["0", "2"]
var denseKeys = [...array.keys()];
console.log(denseKeys);  // [0, 1, 2]

   Array.from能生成一个从0到指定数字的新数组，利用keys也很容易实现。

[...Array(10).keys()]; // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
[...new Array(10).keys()]; // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

values() 

  作用：返回一个数组迭代器对象，该对象包含数组中每个索引对应的值。

var array = ["abc", "xyz"];
var iterator = array.values();
console.log(iterator.next().value);//abc
console.log(iterator.next().value);//xyz