JavaScript中的5种数组迭代方法

JavaScript中的5种数组迭代方法

  • 2019-7-22

在 JavaScript 中,数组一共有 5 种迭代方法,分别是 everysomefiltermapforEach。其中,我们可以把 everysome 分为一组,filtermap 分为一组,forEach 单独分为一组。

这 5 个方法中每个方法都接受两个参数:要在每一项上运行的函数和(可选的)运行该函数的作用域对象,如果在函数体中不需要使用 this 则可以忽略第二个参数。

every 和 some

every 和 some 的共同点在于它们都返回一个布尔值 true 或 false。数组的 every 方法就相当于我们数学中学到的全程量词,当数组中的所有元素都符合条件返回 true,否则返回 false。some 正好相反,类似与数学中的存在量词,只要数组中有一项符合条件就返回 tru,否则返回 false。

1
2
3
4
5
6
7
8
9
const numbers: Array<number> = [1, 2, 3, 4, 5];

// every 全程量词(任意)
const everyResult = numbers.every(value => value > 1);
console.log(everyResult); // false

// some 存在量词(存在)
const someResult = numbers.some(value => value > 4);
console.log(someResult); // true

filter 和 map

从字面意思理解 filter 和 map 就好,filter 会根据条件过滤然后返回一个新数组(一般是原数组的一个子集),map 会根据给定函数对数组中每一项进行映射,然后将所有的映射结果组成一个新数组作为返回值返回(一个双射函数)。

1
2
3
4
5
6
7
8
9
10
// filter 过滤
// 返回一个由 ture 项组成的新数组
const filterResult = numbers.filter(value => value > 2);
console.log(filterResult); // [3, 4, 5]

// map 映射
// 对数组中的每一项进行指定函数
// 返回由映射后的值组成的数组
const mapResult = numbers.map(value => ({ latest: value*2 }))
console.log(mapResult); // [{latest: 2}, {latest: 4}, {latest: 6}, {latest: 8}, {latest: 10}]

forEach

forEach 会对数组中的每一项运行给定函数,它没有返回值。

1
2
numbers.forEach(value => value = value + 2);
console.log(numbers) // [1, 2, 3, 4, 5]

注意上面这样写是不能直接修改数组 numbers 本身的,value 只是在最近的一个会作用域中被创建的一个临时变量。要想修改数组本身的值可以写成下面这样:

1
2
3
4
numbers.forEach((value, index) => {
numbers[index] = value + 2
});
console.log(numbers) // [8, 10, 12, 14, 16]

总结

除了 everysome 用得比较少外,forEachfiltermap 平时用得都比较频繁,搞清它们之间的区别比较重要,下面是我绘制的一张表来将这5个方法来进行简单总结了一下:

方法 描述 返回值 备注
every 当数组的每一项都满足条件时返回 true 布尔值 全称量词
some 当数组中至少有一项满足条件时返回 true 布尔值 存在量词
filter 根据条件过滤然后返回一个新的数组 原数组的子集 过滤
map 根据函数映射得到一个新的数组 映射后的得到的新数组 映射
forEach 对数组的每一项执行给定函数 无返回值 无副作用