ES6中 forEach() map() some() every() filter() reduce() find() 的区别

背景介绍

使用JavaScript数组常常需要对数组进行遍历、迭代操作。而我们常用的就是for语句对数组进行迭代。然而在ECMAscript5已经为数组定义了很多迭代的方法，如：foreach、map、some、every、filter、reduce、find，现在我们就来讲讲这些api的用法。

let arr = [1,2,3,4,5,6,7];
复制代码

foreach()

/*
 * 没有返回值，只针对每个元素调用func。
 * 优点：代码简介。
 * 缺点：无法使用break，return等终止循环
 */
//ES5写法
arr.forEach(function(item,index){
    console.log(item);   // 1 2 3 4 5 6 7
})
//ES6写法
arr.forEach((item,index) => {
    console.log(item); // 1 2 3 4 5 6 7
    return item
})
复制代码

map()

/*
 * 有返回值，返回一个新的数组，每个元素为调用func的结果。
 */
let newArr = arr.map((item,index) => {
    return item*2
})
console.log(newArr);  // [2,4,6,8,10,12,14]
复制代码

some()

/*
 * 返回一个Boolean，判断是否有元素符合func，如果有一个符合条件，就会终止循环，返回true。
 */
 arr.some((item,index) => {
    return item > 5;  // true
 })
复制代码

every()

/*
 * 返回一个Boolean，判断每一个元素是否都符合func，如果有一个不符合，就会终止循环，返回false。
 */
arr.every((item,index) => {
    return item < 10;  //true
})
复制代码

filter()

/*
 * 有返回值，返回一个符合func条件的数组的集合
 */
 let newArr = arr.filter((item,index) => {
    return item > 3;
 })
 console.log(newArr);  // [4,5,6,7]
复制代码

reduce()

/*
 * 让数组中的前项和后项做某种运算，并返回运算结果
 */
 let res = arr.reduce((prev,next) => {
    return prev + next;
 })
 console.log(res);  // 28
复制代码

find()

/*
 * 不创建新数组，不改变元素组
 * 在判断中一旦某个元素符合func，立马跳出循环，返回当前符合条件的元素
 */
let res = arr.find((item,index) => {
    console.log( 'arr[' + index + '] = ' item );   // arr[3] = 4 
    return item > 3;
})
console.log(res);  // 4
复制代码

总结

这也是我最近在面试中遇到的问题总结，如有任何建议和疑问，欢迎小伙伴提出并指正！ QQ ： 1062256583 邮箱 ： 1062256583@qq.com

转载于:https://juejin.im/post/5ca6add8e51d453af13c8332