ES6数组新增方法forEach、map、filter、find、every、some、reduce的用法

*ES6语法:

Opera 11+

Firefox 3.6+

Safari 5+

Chrome 8+

Internet Explorer 9+支持。可以通过babel转意支持低版本浏览器。

forEach()

ES6新增的一种循环

案例1：打印数组中所有对象

numbers=[1,2,3,4,5]
numbers.forEach(number => {
    console.log(number)  //1 2 3 4 5
});

案例2：将数组中所有数字相加（这里用了函数抽离的方式）

numbers=[1,2,3,4,5]
var sum=0
function add(num){   
    sum+=num
}
numbers.forEach(add)
console.log(sum)    //15

map()

• map函数可以看成是一种映射函数，而且是一一映射
• map适合对一个数组中的每个元素进行相同的操作

原数组被“映射”成对应新数组,返回一个新数组

案例1：将原数组的每个数字都*2

var numbers=[1,2,3,4,5]
var doublnumbers=numbers.map(number=>{
    return number*2
})
console.log(doublnumbers)  //[2,4,6,8,10]

案例2：将A对象数组中某个属性存到B数组中

var building=[
    {name:'the Great Wall',location:'BeiJing'},
    {name:'Eiffel Tower',location:'Paris '}
]
var citys=building.map(item=>{
    return item.location
})
console.log(citys)  //["BeiJing", "Paris "]

filter()

• filter函数可以看成是一个过滤函数，返回符合条件的元素的数组
• filter和map的区别：filter需要在循环的时候判断一下是true还是false，是true才会返回这个元素；map没有这个过程。
• filter函数适合筛选一个数组中满足条件的元素，注意：filter函数只是筛选功能，不能改变元素、操作元素
  filter为“过滤”。数组filter后，返回过滤后的新数组

案例1：假定有一个对象数组A,获取数组中指定类型的对象放到B数组中

var products = [
    {name:"cucumber",type:"vegetable"},
    {name:"banana",type:"fruit"},
    {name:"celery",type:"vegetable"},
    {name:"orange",type:"fruit"}
  ]; 
  var filtered = products.filter((product)=>{
    return product.type === "vegetable";
  })
  console.log(filtered)  //[{name:"cucumber",type:"vegetable"},{name:"celery",type:"vegetable"}]

案例2：假定有两个数组(A,B),根据A中id值,过滤掉B数组不等于A中id的数据

var post = {id:4,title:"Javascript"};
var comments = [
    {postId:4,content:"Angular4"},
    {postId:2,content:"Vue.js"},
    {postId:3,content:"Node.js"},
    {postId:4,content:"React.js"}   
 ];
 function commentsForPost(post,comments){
    return comments.filter(function(comment){
      return comment.postId === post.id;
    })
 }
 
 console.log(commentsForPost(post,comments));  //[ {postId:4,content:"Angular4"},{postId:4,content:"React.js"}]

find()

• 查找到第一个符合条件的元素，则立刻返回

在数组中找到符合要求的对象 和filter的区别就是找到符合要求的对象就停止寻找了，返回的是一个对象，而filter返回的是所有符合要求的对象组成的新数组

案例1：假定有一个对象数组(A),找到符合条件的对象

var users = [
    {name:"Jill",id:1},
    {name:"Alex",id:2},
    {name:"Bill",id:3},
    {name:"Alex",id:4}
   ];
   user = users.find(function(user){
    return user.name === "Alex";
  })
 console.log(user); //{name: "Alex", id: 2}

案例2：假定有两个数组(A,B),根据A中id值,找到B数组等于A中id的数据

var post = {id:4,title:"Javascript"};
 var comments = [
    {postId:4,content:"Angular4"},
    {postId:2,content:"Vue.js"},
    {postId:3,content:"Node.js"},
    {postId:4,content:"React.js"}   
 ];
 function commentsForPost(post,comments){
    return comments.find(function(comment){
      return comment.postId === post.id;
    })
 }
 
 console.log(commentsForPost(post,comments));  // {postId:4,content:"Angular4"}

every() some()

every 若目标数组中每一个对象都符合条件则返回true，否则返回false

some 若目标数组中有一个或一个以上的对象符合条件的返回true，否则返回false

案例

var users = [
    {name:"Jill",age:10},
    {name:"Alex",age:18},
    {name:"Bill",age:20},
    {name:"Tony",age:24}
   ];
 
   var isAdult_every=users.every(user=>{
      return user.age>18;
   })
 
   var isAdult_some=users.some(user=>{
    return user.age>18;
 })
 
   console.log(isAdult_every)  //false
   console.log(isAdult_some)  //true

reduce()

array.reduce((previous, current, index, array) =>{

函数体

}, [initialValue])

• reduce函数有四个参数：之前值，当前值，索引值，数组本身。
• previous值取决于[initialValue]
• 如果指定[initialValue]指定是，则作为previous的初始值，也可作为空数组[]，如果缺省的话，则将数组的第一个元素作为previous的初始值，下次循环时，之前值就是上一次的当前值，而当前值会变成下一个索引对应的元素，依次类推。

常用于叠加，可以代替forEach等

案例计算数组中所有值的总和

var numbers = [1,2,3,4,5];
   var sumValue = numbers.reduce(function(sum,number2){  //第一个参数为叠加总值，需要初始化，第二个参数是当前项
    return sum + number2;
  },0);    //sum的初始化
  console.log(sumValue);   //15

1、reduce的简单用法

当然最简单的就是我们常用的数组求和，求乘积了。

var  arr = [1, 2, 3, 4];
var sum = arr.reduce((x,y)=>x+y)
var mul = arr.reduce((x,y)=>x*y)
console.log( sum ); //求和，10
console.log( mul ); //求乘积，24

2、reduce的高级用法

（1）计算数组中每个元素出现的次数

let names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice'];

let nameNum = names.reduce((pre,cur)=>{
  if(cur in pre){
    pre[cur]++
  }else{
    pre[cur] = 1 
  }
  return pre
},{})
console.log(nameNum); //{Alice: 2, Bob: 1, Tiff: 1, Bruce: 1}

（2）数组去重

let arr = [1,2,3,4,4,1]
let newArr = arr.reduce((pre,cur)=>{
    if(!pre.includes(cur)){
      return pre.concat(cur)
    }else{
      return pre
    }
},[])
console.log(newArr);// [1, 2, 3, 4]

（3）将二维数组转化为一维

let arr = [[0, 1], [2, 3], [4, 5]]
let newArr = arr.reduce((pre,cur)=>{
    return pre.concat(cur)
},[])
console.log(newArr); // [0, 1, 2, 3, 4, 5]

（4）将多维数组转化为一维

let arr = [[0, 1], [2, 3], [4,[5,6,7]]]
const newArr = function(arr){
   return arr.reduce((pre,cur)=>pre.concat(Array.isArray(cur)?newArr(cur):cur),[])
}
console.log(newArr(arr)); //[0, 1, 2, 3, 4, 5, 6, 7]

(5）对象里的属性求和

var result = [
    {
        subject: 'math',
        score: 10
    },
    {
        subject: 'chinese',
        score: 20
    },
    {
        subject: 'english',
        score: 30
    }
];

var sum = result.reduce(function(prev, cur) {
    return cur.score + prev;
}, 0);
console.log(sum) //60