ES6中数组的forEach() 、map()、filter()、reduce()、some()、every()的用法

https://blog.csdn.net/weixin_45561258/article/details/107243689

 

一、forEach()循环数组

//ES5
var arr = [1,2,3,4,5];
for(var i=0;i<arr.length;i++){
   console.log(arr[i]);
   }

• 1
• 2
• 3
• 4
• 5

 //ES6    
var arr = [1,2,3,4,5];
arr.forEach(function(item,index,arr){
    console.log(item);
});  

//ES6  forEach+箭头函数
var arr = [1, 2, 3, 4, 5];
arr.forEach((item,index,arr) => {
    console.log(item)       //结果为1,2,3,4,5
})

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11

forEach方法中的function回调有三个参数：
第一个参数是遍历的数组内容，
第二个参数是对应的数组索引，
第三个参数是数组本身

二、map()，遍历数组，返回一个新数组，不改变原数组的值。

var arr = [1, 2, 3, 4, 5];
arr.map((item, index, arr) => {
    return item * 10 //新数组为10,20,30,40,50
})

• 1
• 2
• 3
• 4

三、filter()，过滤数组，返回一个新的数组，不改变原始数组的值，过滤掉不符合条件的值

var arr = [1, 2, 3, 4, 5, 6];
arr.filter((item,index,arr) => {
    return item > 4 //新数组为[5,6]
})

• 1
• 2
• 3
• 4

四、reduce()，计算数组，不改变原始数组，返回新的数组，让数组的前后两项进行某种计算。然后返回其值，并继续计算，从数组的第二项开始遍历

var arr = [1,2,3,4];
arr.reduce((result, num, index) => {
    console.log(result) // 1  3  6  result为上次一计算的结果
    console.log(num)  // 2  3  4
    console.log(index) // 1  2  3
    return result + item //最终结果为10
})

• 1
• 2
• 3
• 4
• 5
• 6
• 7

五、some()， 遍历数组，不改变原始的数组，有一项返回true,则停止遍历，结果返回true

//有一项返回true,则停止遍历，结果返回true
var arr = [1, 2, 3, 4, 5];
arr.some((item,index,arr) => {
    return item > 3 //结果为true
})

• 1
• 2
• 3
• 4
• 5

六、every(), 遍历数组，不改变原始的数组，有一项返回false,则停止遍历，结果返回false

//有一项返回false,则停止遍历，结果返回false
var arr = [1,2,3,4];
arr.every((item,index,arr) => {
    return item > 1 //结果为false
})