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 的相关介绍。