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