ES6关于数组操作forEach,map,filter,find,some,every,reduce学习理解和使用

首先说明:数组操作forEach(),map(),filter(),find(),some(),every(),reduce()所有方法,只要是return回来的,均不改变原数组。

forEach()

参数item, index
遍历数组全部元素使用,相当于用for循环吧

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

/*
1
2
3
4
5
*/

map ()

一项一项更新数组内容,有return的话,返回一个新数组

var arr = [1,2,3,4,5] ;
arr.map((item,index)=>{ return item*2})
//  [2, 4, 6, 8, 10]

filter()和find()的区别

filter,find 一般都用于筛选数组,filter返回一个新数组,find则返回第一个符合return后判断内容的单个item

var arr = [1,2,3,4,5] ;
arr.filter(item=>item>2)
// (3) [3, 4, 5]
arr.find(item=>item>2)
// 3

includes()

判断数组是否包含一项内容

var arr = [1,2,3,4,5] ;
arr.includes(4)
// true
arr.includes(6)
// false

some()和every()的区别

some(), every()都是用来判断用的,只会返回true和false
其中some()只有一项满足就会返回true, every()只有一项不满足就会返回false

var arr = [1,2,3,4,5] ;
arr.some(item=>item>4)
// true
arr.some(item=>item>6)
// false
arr.every(item=>item>4)
// false
arr.every(item=>item>0)
// true

reduce()

reduce()一般用于计算,合并,叠加等等

//求和计算
var arr1 = [1,2,3,4,5] ;
var new1 = arr1.reduce(function(sum,next,index){
        return sum+next ;    
        /*
         *第一次:pre-->1  next-->2  index-->1
         *遍历计算return得结果为pre+next=1+2=3
         *第二次:pre-->3  next-->3  index-->2
         *遍历计算return得结果为pre+next=3+3=6
         *第三次:pre-->6  next-->4  index-->3
         *遍历计算return得结果为pre+next=6+4=10
         *第四次:pre-->10  next-->5  index-->4
         *遍历计算return得结果为pre+next=10+5=15
        */
})

//扁平化数组
var arr2 = [[1,2,3],[4,5],[6,7]] ;
var new2 = arr2.reduce(function(pre,next,index){
        return pre.concat(next);    //前数组拼接后数组 .concat()
})

//对象数组叠加计算
var arr3 = [{price:10,count:1},{price:15,count:2},{price:10,count:3}];
var new3 = arr3.reduce(function(pre,next,index){
        return pre+next.price*next.count;
        //当需要对第一项进行操作时,后面pre使用上一项操作结果,不再需要操作
        //所以当需要操作第一项的时候,利用reduce(callbreak(){},往数组第一项前添加一项,如:0)
},0)    //在原数组第一项添加为0,不改变原数组,则可不操作第一项

console.log(new1);
console.log(new2);
console.log(new3);
// 15
// [1, 2, 3, 4, 5, 6, 7]
// 70

Leave a Reply