JavaScript 数组迭代方法笔记

在JavaScript中操作数组，可以使用for、while循环，也可以使用数组数组迭代方法，更方便地完成。

1. forEach

forEach()方法没有返回值，运行时为每个数组元素调用一次回调函数。

arr.forEach(callback, [thisArg]);

该方法需要传入一个回调函数callback，函数参数：

• 项目值value
• 项目索引index
• 数组本身array

thisArg为可选参数，表示执行callback时的 this 的值。如果给forEach传递了第二个参数，回调函数里的this将指向这个参数。如果没有传入第二个参数，则this指向全局对象（在浏览器是为window）。

const arr = [1, 2, 3, 4, 5];

arr.forEach((value, index, array) => {
    console.log(value);
    console.log(index);
});

2. filter

对数组使用filter()方法后，返回过滤后的新数组。

arr.filter(callback, [thisArg]);

该方法需要传入一个回调函数callback，函数参数：

• 项目值value
• 项目索引index
• 数组本身array

thisArg为可选参数，表示执行callback时的 this 的值。

const arr = [0, 1, 2, 3, 4];

const arr1 = arr.filter((value, index, array) => {
    // 将大于2的元素取出，放入新数组并返回
    return value > 2;
});
console.log(arr1); // [ 3, 4 ]

const arr2 = arr.filter((value, index, array) => {
    // 将不大于2的元素取出，放入新数组并返回
    return !(value > 2);
});
console.log(arr2); // [ 0, 1, 2 ]

3. some

some()方法是只要数组中的某个值，符合给定的判断条件就返回true；否则，返回false。

arr.some(callback, [thisArg]);

该方法需要传入一个回调函数callback，函数参数：

• 项目值value
• 项目索引index
• 数组本身array

thisArg为可选参数，表示执行callback时的 this 的值。

const flag = arr.some((value, index, array) => {
    // 判断arr中是否有>2的元素
    return value > 2;
});
console.log(flag); // true

4. every

every()方法与some()方法类似。

every()方法是数组中的所有值都符合给定的判断条件的时候才会返回true，否则就返回false。

arr.every(callback, [thisArg]);

该方法需要传入一个回调函数callback，函数参数：

• 项目值value
• 项目索引index
• 数组本身array

thisArg为可选参数，表示执行callback时的 this 的值。

const arr = [0, 1, 2, 3, 4];

const flag = arr.every((value, index, array) => {
    // 判断arr中所有元素是否都大于2
    return value > 2;
});
console.log(flag); // false

5. find / findIndex

1. find

find()方法用于找出第一个符合条件的数组元素。所有数组元素依次执行回调函数，直到找出第一个返回值为true的元素，然后返回该元素。如果没有符合条件的元素，则返回undefined。

arr.find(callback, [thisArg]);

该方法需要传入一个回调函数callback，函数参数：

• 项目值value
• 项目索引index
• 数组本身array

thisArg为可选参数，表示执行callback时的 this 的值。

const arr = [2, 4, 6, 8, 10];

const num = arr.find((value, index, array) => {
    // 返回arr中第一个大于5的元素
    return value > 5;
});
console.log(num); // 6

2. findIndex

findIndex()与find()方法类似，但findIndex()返回的是第一个返回值为true的元素索引。如果所有元素都不符合条件，则返回-1。

arr.findIndex(callback, [thisArg]);

该方法需要传入一个回调函数callback，函数参数：

• 项目值value
• 项目索引index
• 数组本身array

thisArg为可选参数，表示执行callback时的 this 的值。

const arr = [2, 4, 6, 8, 10];

const num = arr.findIndex((value, index, array) => {
    // 返回arr中第一个大于5的元素索引
    return value > 5;
});
console.log(num); // 2

6. reduce / reduceRight

1. reduce

array.reduce(callback, [initialValue]);

回调函数依次接收4个参数：

• accumulator上一次调用回调返回的值，或者是提供的初始值（initialValue）
• currentValue数组中正在处理的元素
• currentIndex数组中正在处理的元素索引，如果提供了initialValue ，从0开始；否则从1开始。
• array数组对象本身

第二个参数initialValue是可选的，是传递给函数的初始值。

const arr = [1, 2, 3, 4];

const sum1 = arr.reduce((a, b) => {
    return a + b;
});
// 过程：((1+2)+3)+4=10
console.log(sum1); // 10

const sum2 = arr.reduce((a, b) => {
    return a - b;
}, 4);
// 过程：(((4-1)-2)-3)-4=-6
console.log(sum2); // -6

2. reduceRight

reduceRight()方法的功能和reduce()功能是一样的，不同的是reduceRight()从数组的末尾向前将数组中的数组项做累加。

const arr = [1, 2, 3];

const sum1 = arr.reduceRight((a, b) => {
    return a - b;
}, 1);
// 过程：((1-3)-2)-1=-5
console.log(sum1); // -5

---

📘📘欢迎在我的博客上访问：
https://lzxjack.top/