JavaScript 之数组遍历（迭代）方法介绍

ES5中一共有五种数组遍历（迭代）方法，它们都会对数组中每个元素执行一些业务，且都不会修改原数组，这些方法包括：

1、some() 如果该函数任意一项返回 true，则返回 true，如果全部返回 false 则最终返回 false

2、every() 如果该函数每一项都返回 true，则返回 true， 否则返回 false

3、filter() 会返回一个新数组，该数组是由满足条件的任意项组成

4、forEach() 该函数没有返回值，本质上与使用 for 循环迭代数组一样

5、map() 最终会返回一个经过操作后的新数组；

其中 some() 和 every() 是非常相似的，它们都会返回一个 boolean，主要区别就在于，前者数组中只要有一项满足条件即可返回 true，而后者需要每一项都要满足条件才返回 true

let arr = [2, 3, 4, 5];

let res = arr.every((item, index ,arr) => {
    return item > 4
});

let otherRes = arr.some((item, index, arr) => {
    return item > 4
});

console.log(res); // false

console.log(otherRes); // true

可以看到 arr 数组中只有 5 满足了大于4，而 every() 方法要求必须每一项都返回 true 才满足，而 some()方法只要数组中有至少一项满足条件即可，所以 5 满足了条件则返回了 true；

---

filter()

这个方法就是指定一些条件然后过滤掉，然后返回满足条件的元素再组成数组，并不会影响原数组结构；

let arr = [2, 3, 4, 5];

let res = arr.filter((item, index ,arr) => {
    return item > 3
});

console.log(res); // [ 4, 5 ]

console.log(arr); // [ 2, 3, 4, 5 ]

简单明了

---

再来看一下 forEach() 方法：

它并没有返回值，和 for 遍历类似：

let arr = [2, 2, 3, 4, 4, 5];

let newArr = [];

arr.forEach((item, index ,arr) => {
    if (newArr.indexOf(item) === -1) {
        newArr.push(item)
    }
    return newArr
});

console.log(newArr); // [ 2, 3, 4, 5 ]

这里简单实现了一个数组去重，当然即然刚刚说 forEach() 和 for 相似，看看代码如何体现：

let arr = [2, 2, 3, 4, 4, 5];

let newArr = [];

for (let i = 0; i < arr.length; i++) {
    if (newArr.indexOf(arr[i]) === -1) {
        newArr.push(arr[i])
    }
}

console.log(newArr); // [ 2, 3, 4, 5 ]

区别只不过 for遍历中 arr[i] 相当于 forEach中callback函数中的item参数

forEach() 看起来更清晰简洁一些

---

最后就要说一下 map() 这个方法：

在 React 这个框架中其实我们经常见到这个方法，通常用来做渲染 list

先看一下用法：

let arr = [1, 2, 3];

let newArr = arr.map((item, index ,arr) => {
    return item * 2
});

console.log(newArr); // [ 2, 4, 6 ]

map() 方法是让每个元素执行指定逻辑，最后再返回一个新的数组；

数组的遍历（迭代）方法就说到这里，欢迎有问题和错误指出，也欢迎阅读我近期关于TypeScript的相关介绍。