ES6 数组方法 filter ( )、reduce ( )

filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。

• filter() 不会对空数组进行检测。
• filter() 不会改变原始数组。

fill ( ) 的用法：

var arr=new Array(5);
arr.fill(10);
console.log(arr);//[ 10, 10, 10, 10, 10 ]
//以上也可以写成
var arr = Array(5).fill(10);

filter() 的用法：

var arr = [1,2,3,4,5,6,7];
var arr1=arr.filter(function(item,index,a){
    return item>4;
});
console.log(arr1);//[5,6,7];

filter() 的实现过程：

var list = [1,2,3,4,5];
function filter(arr,fn){
    var arr1=[];
    for(var i=0;i<arr.length;i++){
    	//如果fn()返回是true
        if(fn(arr[i],i)){
        	//则把当前元素添加到arr1中
            arr1[arr1.length]=arr[i];
            //也可以用push()来添加
            // arr1.push(arr[i]);
        }
    }
    return arr1;
}
var s = filter(list,function(item,index,a){
    return item>3;
})
console.log(s);//[4,5]

filter ( ) 的用法，假如后台返回一些数据，需要将符合要求的数据筛选出来

var data=[
    {id:1001,icon:"img/1.png",name:"餐饮0",num:1,price:10},
    {id:1002,icon:"img/2.png",name:"餐饮1",num:1,price:20},
    {id:1003,icon:"img/3.png",name:"餐饮2",num:1,price:30},
    {id:1004,icon:"img/4.png",name:"餐饮3",num:1,price:40},
    {id:1005,icon:"img/5.png",name:"餐饮4",num:1,price:50},
    {id:1006,icon:"img/6.png",name:"餐饮5",num:1,price:60},
    {id:1007,icon:"img/7.png",name:"餐饮6",num:1,price:70},
    {id:1008,icon:"img/8.png",name:"餐饮7",num:1,price:80},
    {id:1009,icon:"img/9.png",name:"餐饮8",num:1,price:90},
    {id:1010,icon:"img/10.png",name:"餐饮9",num:1,price:100}
];
//筛选出价格大于60的数据
var list1 = data.filter(function(item,index,arr){
	return item.price>60;
})
//筛选出id为1006的数据
var list2=data.filter(function(item){
    return item.id==1006;
})[0];

reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。

• reduce() 对于空数组是不会执行回调函数的。
• 参数：arr.reduce(function(上次归并值，本次遍历的元素，索引值，数组),初始化值)；
• 如果没有设置初始化值，上次归并值初始值为数组的第0项，本次遍历将从下标1开始
• 如果设置了初始化值，上次归并值初始值就是初始化值，本次遍历将从下标0开始

第一个参数没有设置初始值时：

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

打印出的结果如下：

当给第一个参数设置初始值为100时

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

打印的结果如下：

reduce ( ) 的实现过程：

var list = [1,2,3,4,5];
function reduce(arr,fn,initValue){
    var start=0;
    if(initValue===undefined){
        initValue=arr[0];
        start++;
    }
    for(var i=start;i<arr.length;i++){
        initValue=fn(initValue,arr[i],i,arr);
    }
    return initValue;
}
var sum = reduce(list,function(value,item,index,a){
    return value+item;
},100)
console.log(sum);//115

reduce ( ) 可以用来数值求和：

var arr=[1,2,3,4,5];
var sum= arr.reduce(function(value,item,index,a){
    return value+item;
 });
 console.log(sum);//15