js数组遍历forEach、map、filter、find、every、some、reduce对比

可以参考一下:
https://blog.csdn.net/weixin_37620905/article/details/82953845  
https://www.cnblogs.com/jiebba/p/6514067.html

*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()
原数组被“映射”成对应新数组,返回一个新数组

案例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后，返回过滤后的新数组

案例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()
常用于叠加，可以代替forEach等

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

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