ES6数组map、filter、reduce的使用方法

1.map()

map()方法创建一个新数组,新数组中的每个元素是该数组调用提供的函数后的返回的结果.

var newArr = arr.map(function(){ })

map()方法在调用其中的回调函数时,传入了三个参数,第一个参数是当前正在处理的数组项,第二个参数是当前数组项的索引值,第三个参数是在其上调用map方法的数组

const arr = [1,2,3,4,5,6]
const newArr = arr.map(function (item){
    return item*2
})
console.log(newArr);//[ 2, 4, 6, 8, 10, 12 ]

2.filter()

filter()方法创建一个新数组,新数组中元素是通过所提供的函数的测试后的元素,相当于将原来数组中符合条件元素过滤到新的数组里.

const arr = [1, 2, 3, 4, 5, 6];
const newArr = arr.filter(item => item > 3);//箭头函数写法
console.log(newArr);//[4,5,6]

3.reduce()

reduce()方法是对数组中每一个元素执行一个由编写者提供的函数,然后将其结果汇总为单个值

具体来看下reduce()中的参数

arr.reduce(callback(previous,current,index,array),initialValue)

callback是我们写入的回调函数,它接受四个参数

第一个previous,上一个值,相当于一个累加器,当数组元素每执行一次回调函数后,会把值传入到previous,然后进行下一次的调用

第二个current,当前值,是当前数组中正在处理的元素

第三个index(可选),当前处理元素的下标

第四个array(可选),调用这个reduce()方法的数组

reduce()的第二个参数,initialValue,初始值,是一个可选参数,如果不写,那么previous则代表数组的第一个元素,如果写了,则把初始值给previous.

注意:如果调用reduce()方法的数组是一个空数组,并且没有写初始值,那么会报错.

const arr = [1,2,3,4,5]
let result = arr.reduce((prev,cur,index) => {
    console.log(prev,cur);
    return prev+cur
})
console.log(result);//15是数组中所有元素的和
/*
这里主要关注prev的值,prev相当于一个累加器,接收的是每次执行完回调函数后返回的值。
步骤1.prev=>1 cur=>2  prev+cur=3
步骤2.prev=>prev+cur=3 cur=3 prev+cur=6
步骤3.prev=>prev+cur=6 cur=4 prev+cur=10
步骤4.prev=>prev+cur=10 cur=5 prev+cur=15   
*/   

const str = 'asfadewqqfh';
const obj = str.split('').reduce((item,cart) => {
    console.log(item,cart);
    item[cart] ? item[cart] ++ : item[cart] = 1
    return item
},{})
console.log(obj)//以上结果输出为{ a: 2, s: 1, f: 2, d: 1, e: 1, w: 1, q: 2, h: 1 }
/*最后输出的结果是一个对象,key是str中出现过的字母,value是出现的次数,这样就简单实现了一个找出字符串中出现次数最多的字符。
　　这里item相当于previous,cart相当于current。
　　注意:这里我们传入了第二个参数,即一个空对象{},那么item第一次参与这个方法的值就是一个空对象。
　　这里我们给所有第一次出现的元素一个值为1,如果第二次出现就++,所以最后出现次数最多的元素,它的属性值也最大。
*/

到这里,map、filter、reduce的基本用法也介绍结束了,当然这个三种方法是完全可以组合在一起用,互相配合来处理数组会非常方便。