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