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

1. forEach

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

1
arr.forEach(callback, [thisArg]);

该方法需要传入一个回调函数callback,函数参数:

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

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

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

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

2. filter

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

1
arr.filter(callback, [thisArg]);

该方法需要传入一个回调函数callback,函数参数:

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
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

1
arr.some(callback, [thisArg]);

该方法需要传入一个回调函数callback,函数参数:

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

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

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

4. every

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

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

1
arr.every(callback, [thisArg]);

该方法需要传入一个回调函数callback,函数参数:

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

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

1
2
3
4
5
6
7
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

1
arr.find(callback, [thisArg]);

该方法需要传入一个回调函数callback,函数参数:

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

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

1
2
3
4
5
6
7
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

1
arr.findIndex(callback, [thisArg]);

该方法需要传入一个回调函数callback,函数参数:

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

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

1
2
3
4
5
6
7
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

1
array.reduce(callback, [initialValue]);

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
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()从数组的末尾向前将数组中的数组项做累加。

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

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