来自数组原型 Array.prototype 的遍历函数

1. Array.prototype.forEach()

forEach() 是一个专为遍历数组而生的方法，它没有返回值，也不会改变原数组，只是简单粗暴的将数组遍历一次

 参数：

callback()	必填	在数组每一项上执行的函数
thisArg	可选	执行回掉时用作 this 的对象

如果传入了参数 thisArg，在 callback() 内部的 this 都会指向 thisArg（箭头函数除外）

callback 参数：

item	当前遍历到的数组元素
index	当前元素的索引
array	被遍历的数组本身

const arr = [, , ];
arr.forEach((item, index, array) => {
    console.log(index, item, array);
});

但 forEach() 无法中止遍历（除非出现错误），所以如果希望在遍历过程中跳出循环，不建议使用 forEach()

2. Array.prototype.map()

map() 在遍历数组的时候，会接收 callback() 的返回值作为新数组的元素，最后返回这个新数组

 参数：

callback()	必填	在数组每一项上执行的函数
thisArg	可选	执行回掉时用作 this 的对象

callback 参数：

item	当前遍历到的数组元素
index	当前元素的索引
array	被遍历的数组本身

const arr = [, , ];
arr.map((item, index, array) => {
    return item + index;
});
// [1, 3, 5]

同样的，map() 不会修改原数组，也不能提前中止循环

由于 map() 会基于 callback() 的返回值创建新数组，所以有一些特别的用法，比如将字符串数组转为 Number 类型：

let arr = ['', '', ''];
arr = arr.map(Number);
// [1, 2, 3]

3. Array.prototype.filter()

filter() 可以基于测试函数 callback() 的返回值，筛选出原数组中符合条件的元素，组成新数组并返回

参数：

callback()	必填	在数组每一项上执行的函数
thisArg	可选	执行回掉时用作 this 的对象

callback 参数：

item	当前遍历到的数组元素
index	当前元素的索引
array	被遍历的数组本身

和 map() 不同的是，map() 中 callback() 的返回值会直接作为新数组的元素

而 filter() 会基于 callback() 的结果，判断是否将原数组的对应元素过滤掉

如果 callback() 的返回值为 true 或者等价于 true 的值（truthy），则保留该元素，否则排除该元素，最后返回新数组

const arr = [, , , , , ];
arr.filter((item, index, array) => {
    return item > 10;
});
// [20, 12, 18]

filter() 不会修改原数组，也不能提前结束遍历

4. Array.prototype.every()

every() 是一个检测数组的方法，可以传入一个检测函数作为 callback()

参数：

callback()	必填	在数组每一项上执行的函数
thisArg	可选	执行回掉时用作 this 的对象

callback 参数：

item	当前遍历到的数组元素
index	当前元素的索引
array	被遍历的数组本身

如果这个检测函数每次都返回 true（truthy），则 every() 会返回 true

every() 会按照数组的顺序，为每个数组元素执行一次 callback() 方法，如果有一个返回值为 false，则停止遍历，并返回 false

const arr = [, '', 'name', ];
arr.every((item, index, array) => {
    console.log(item);
    return typeof item === 'number';
});
// 1  ->  '2'  -> false

5. Array.prototype.some()

some() 和 every() 类似，他们的区别仅仅是“且”和“或”的区别

every() 需要所有元素都满足条件才会返回 true，而 some() 只要有一个元素满足条件，就立刻返回 true

参数：

callback()	必填	在数组每一项上执行的函数
thisArg	可选	执行回掉时用作 this 的对象

callback 参数：

item	当前遍历到的数组元素
index	当前元素的索引
array	被遍历的数组本身

const arr = [, '', 'name', ];
arr.some((item, index, array) => {
    console.log(item);
    return typeof item === 'number';
});
//  1 -> true

6. Array.prototype.find()

find() 可以接收一个 callback() 作为检测函数，返回数组中第一个满足条件的元素并中止遍历，否则返回 undefined

参数：

callback()	必填	在数组每一项上执行的函数
thisArg	可选	执行回掉时用作 this 的对象

callback 参数：

item	当前遍历到的数组元素
index	当前元素的索引
array	被遍历的数组本身

const arr = [
    { id: , name: 'lee' },
    { id: , name: 'rock' },
    { id: , name: 'poly' }
];
arr.find((item, index, array) => {
    return item.id > ;
});
// {id: 2, name: "rock"}

7. Array.prototype.findIndex()

findIndex() 是 find() 的孪生兄弟，find() 会返回元素的值，而 findIndex() 会返回元素的索引

参数：

callback()	必填	在数组每一项上执行的函数
thisArg	可选	执行回掉时用作 this 的对象

callback 参数：

item	当前遍历到的数组元素
index	当前元素的索引
array	被遍历的数组本身

const arr = [
    { id: , name: 'lee' },
    { id: , name: 'rock' },
    { id: , name: 'poly' }
];
arr.find((item, index, array) => {
    return item.id > ;
});
//

如果没有满足条件的元素，则返回 -1

8. Array.prototype.indexOf()

indexOf() 用于查找某个元素在数组中的第一个索引，若无则返回 -1

参数：

item	必填	目标元素
startIndex	可选	开始查找的位置，默认为 0，如果是负值，则从末尾开始查找

这里的 startIndex 即使传入负值，数组遍历的顺序也不会改变，依然是从前往后遍历

const arr = [, , ];
arr.indexOf();
//

如果目标值是一个 Object，这里就会有一些出乎意料的结果

const arr = [
    { id: , name: 'lee' },
    { id: , name: 'rock' },
    { id: , name: 'poly' }
];
arr.indexOf({ id: , name: 'lee' });
// -1

这里的目标元素  {id: 1, name: 'lee'} 明明存在于 arr 中，但 indexOf() 返回的索引却是 -1

这是因为 JS 的 Object 都存放在堆内存里面，上面的代码其实在堆内存中创建了两个对象 {id: 1, name: 'lee'}

虽然这两个对象看起来一模一样，但本身依旧是两个对象，所以 indexOf() 的返回值为 -1

const obj1 = {id: , name: 'lee'},
      obj2 = {id: , name: 'rock'},
      obj3 = {id: , name: 'poly'};

const arr = [obj1, obj2, obj3];

arr.indexOf(obj1); //

如果像上面这样，将对象保存在一个变量中，这个变量实际保存的是这个对象的指针

arr 基于指针添加元素，indexOf() 查找的也是指针，这样就能返回正确的索引

但实际业务中很少会有基于对象指针创建数组的情况，所以一般不用 indexOf 来检测对象数组

9. Array.prototype.includes()

includes() 和 indexOf() 类似，区别在于 indexOf() 会返回索引，而 includes() 只返回 ture 或 false

参数：

item	必填	目标元素
startIndex	可选	开始查找的位置，默认为 0，如果是负值，则从末尾开始查找

const arr = ['a', 'b', 'c'];
arr.includes('a'); // true
arr.includes('a', -); // false

由于上面提到过的原因，对象数组不能使用 includes 方法来检测

10.  Array.prototype.reduce()

reduce() 会对数组的每一个元素执行 callback() 函数

在遍历过程中，每次 callback() 的返回值，都会在下次调用 callback() 的时候，作为参数 accumulator 传进去，最终汇总为单个返回值

参数：

callback()	必填	在数组每一项上执行的函数
initialValue	可选	作为第一次调用 callback() 时的第一个参数。如果没有提供初始值，则使用数组中的第一个元素。

callback 参数：

accumulator	累计值
item	当前遍历到的数组元素
index	当前元素的索引
array	被遍历的数组本身

const arr = [, , , , , ];
arr.reduce((acc, item, index, array) => {
    return acc + item;
});
// 1 + 2 + 3 + 4 + 5 + 6 = 21

基于累加的特性，可以实现数组去重

const arr = [, , , , , , , ];
arr.reduce((acc, item) => {
    if (!acc.includes(item)) {
        return acc.concat(item)
    } else {
        return acc
    }
}, []);
//  [1, 2, 4, 5, 3]

以及数组的扁平化 flat

const arr = [,,,[,,,, [,,]]];

function flattenDeep(arr) {
    return arr.reduce((acc, val) => Array.isArray(val)
        ? acc.concat(flattenDeep(val))
        : acc.concat(val),
        []
    );
}
flattenDeep(arr);
// [1, 2, 3, 1, 2, 3, 4, 2, 3, 4]
// 等价于 -> arr.flat(Infinity)

需要注意的是，如果没有提供初始值 initialValue，reduce 会从第二个元素开始执行 callback()，跳过第一个元素

如果提供初始值，则从第一个元素开始。如果数组为空且没有提供初始值，则报错

如果数组仅有一个元素，且没有初始值， 或者有初始值但是数组为空，那么此唯一值将被返回，并且不会执行 callback

11. reduceRight()

reduce() 是从左到右升序遍历，而 reduceRIght() 的顺序会反过来，从右到左降序遍历

参数：

callback()	必填	在数组每一项上执行的函数
initialValue	可选	作为第一次调用 callback() 时的第一个参数。如果没有提供初始值，则使用数组中的第一个元素。

callback 参数：

accumulator	累计值
item	当前遍历到的数组元素
index	当前元素的索引
array	被遍历的数组本身

const arr = [, , , , ];
arr.reduceRight((acc, item) => {
    console.log('item', item);
    return acc + item;
});
// 3 -> 2 -> 1 -> 0 -> 10