js数组常用遍历方法

数组常用遍历方法包括 forEach、map、filter、find、every、some、reduce。它们有个共同点：不会改原始数组（当然，如果你在回调里改对象属性，那是另一回事）。

和 for 循环相比，这些方法把“遍历”和“要做什么”拆开，回调里专注单条数据。forEach 没有返回值；map 必须有返回值，忘了 return 就会得到 undefined。

一、forEach：遍历数组

先对比 ES5 的下标循环和 ES6 的 forEach，输出同样是 red / blue / green：

var colors = ["red","blue","green"];

// ES5遍历数组方法

for(var i = 0; i < colors.length; i++){ 

 console.log(colors[i]);//red blue green

}

// ES6 forEach

colors.forEach(function(color){

 console.log(color);//red blue green

});

再看一个累加：遍历数组中的值并计算总和。

var numbers = [1,2,3,4,5];

var sum = 0;

numbers.forEach(number=>sum+=number)

console.log(sum)//15

二、map：映射成另一个数组

map 用指定函数处理每个元素，返回处理后的新数组，不改原数组。forEach 和 map 的区别在于 forEach 没有返回值；map 需要返回值。

使用场景 1：数值翻倍

假定有数值数组 A，把 A 中的值以双倍形式放到 B 数组：

var numbers = [1,2,3];

var doubledNumbers = [];

// es5写法

for(var i = 0; i < numbers.length; i++){

 doubledNumbers.push(numbers[i] * 2);

}

console.log(doubledNumbers);//[2,4,6]

// es6 map方法

var doubled = numbers.map(function(number){

   return number * 2;

})

console.log(doubled);//[2,4,6]

使用场景 2：抽出对象属性

假定有对象数组 A，把某个属性存到 B 数组：

var cars = [

  {model:"Buick",price:"CHEAP"},

  {model:"BMW",price:"expensive"}

];

var prices = cars.map(function(car){

    return car.price;

})

console.log(prices);//["CHEAP", "expensive"]

三、filter：找出所有符合条件的元素

filter() 检测元素并返回符合条件的新数组，不改原数组。

使用场景 1：按类型筛选

从对象数组里取出指定 type 放到新数组。原文变量名 porducts 保持不变。

var porducts = [

  {name:"cucumber",type:"vegetable"},

  {name:"banana",type:"fruit"},

  {name:"celery",type:"vegetable"},

  {name:"orange",type:"fruit"}

];

// es5写法

var filteredProducts = [];

for(var i = 0; i < porducts.length; i++){

    if(porducts[i].type === "vegetable"){

      filteredProducts.push(porducts[i]);

    }

}

console.log(filteredProducts);//[{name: "cucumber", type: "vegetable"},

                                 {name: "celery", type: "vegetable"}]

// es6 filter

var filtered2 = porducts.filter(function(product){

  return product.type === "vegetable";

})

console.log(filtered2);

使用场景 2：多条件过滤

蔬菜、数量大于 0、价格小于 10：

var products = [

  {name:"cucumber",type:"vegetable",quantity:0,price:1},

  {name:"banana",type:"fruit",quantity:10,price:16},

  {name:"celery",type:"vegetable",quantity:30,price:8},

  {name:"orange",type:"fruit",quantity:3,price:6}

];

products = products.filter(function(product){

    return product.type === "vegetable" 

    && product.quantity > 0 

    && product.price < 10

})

console.log(products);//[{name:"celery",type:"vegetable",quantity:30,price:8}]

使用场景 3：按关联 id 过滤

根据 A 中 id，过滤 B 数组不符合的数据：

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：第一个通过测试的元素

参数是回调，成员依次执行，直到找出第一个返回 true 的成员并返回它；没有则 undefined。找到后即终止，和带 break 的 for 一样。

使用场景 1：按名字找对象

var users = [

  {name:"Jill"},

  {name:"Alex",id:2},

  {name:"Bill"},

  {name:"Alex"}

 ];

// es5方法

 var user;

 for(var i = 0; i < users.length; i++){

  if(users[i].name === "Alex"){

    user = users[i];

    break;//找到后就终止循环

  }

 }

 console.log(user);// {name:"Alex",id:2}

// es6 find

user = users.find(function(user){

  return user.name === "Alex";

})

console.log(user);// {name:"Alex",id:2}找到后就终止循环

使用场景 2：按评论反查帖子

var posts = [

 {id:3,title:"Node.js"},

 {id:1,title:"React.js"}

];

var comment = {postId:1,content:"Hello World!"};

function postForComment(posts,comment){

 return posts.find(function(post){

   return post.id === comment.postId;

 })

}

console.log(postForComment(posts,comment));//{id: 1, title: "React.js"}

五、every 与 some

every：是否每个元素都满足条件。some：是否有元素满足条件。Some：一真即真；Every：一假即假。

使用场景 1：电脑内存是否够跑程序

大于 16 位（原文用 ram > 16 表示可用）。注意 ES5 手写循环用的是 ram < 16 判不可用，ES6 示例写成 ram > 16，Apple 的 16 在 every 里会失败，和“大于 16 才可用”的文字一致。

//ES5方法

var computers = [

 {name:"Apple",ram:16},

 {name:"IBM",ram:4},

 {name:"Acer",ram:32}

];

var everyComputersCanRunProgram = true;

var someComputersCanRunProgram = false;

for(var i = 0; i < computers.length; i++){

 var computer = computers[i];

 if(computer.ram < 16){

   everyComputersCanRunProgram = false;

 }else{

   someComputersCanRunProgram = true;

 }

}

console.log(everyComputersCanRunProgram);//false

console.log(someComputersCanRunProgram);//true

//ES6 some every 

var every = computers.every(function(computer){

  return computer.ram > 16;

})

console.log(every);//false

var some = computers.some(function(computer){

 return computer.ram > 16;

})

console.log(some);//true

使用场景 2：注册表单每一项都非空

判断所有 input 内容长度是否大于 0：

function Field(value){

  this.value = value;

}

Field.prototype.validate = function(){

  return this.value.length > 0;

}

//ES5方法

var username = new Field("henrywu");

var telephone = new Field("18888888888");

var password = new Field("my_password");

console.log(username.validate());//true

console.log(telephone.validate());//true

console.log(password.validate());//true

//ES6 some every

var fields = [username,telephone,password];

var formIsValid = fields.every(function(field){

 return field.validate();

})

console.log(formIsValid);//true

if(formIsValid){

 // 注册成功

}else{

  // 给用户一个友善的错误提醒

}

六、reduce：合成一个值

reduce() 接收累加器函数，从左到右合并，最终成为一个值。第二个参数是初始值。

使用场景 1：求和

初始值 0，回调里打印的 sum2 依次是 0、10、30，最后 sumValue 为 60。

var numbers = [10,20,30];

 var sum = 0;

//es5 方法

for(var i = 0; i < numbers.length; i++){

  sum += numbers[i];

}

console.log(sum);

// es6 reduce

var sumValue = numbers.reduce(function(sum2,number2){

  console.log(sum2);//0 10 30 60

  return sum2 + number2;

},0);//sum2初始值为0

console.log(sumValue);

使用场景 2：抽出属性到新数组

var primaryColors = [

   {color:"red"},

   {color:"yellow"},

   {color:"blue"}

 ];

 var colors = primaryColors.reduce(function(previous,primaryColor){

    previous.push(primaryColor.color);

    return previous;

 },[]);

 console.log(colors);//["red", "yellow", "blue"]

使用场景 3：括号是否对称

遇到 ( 加一，遇到 ) 减一；中途小于 0 或最终不是 0 都不对称。balancedParens("((())))") 多了一个右括号，结果为 false。

function balancedParens(string){

  return !string.split("").reduce(function(previous,char){

    if(previous < 0) { return previous;}

    if(char == "("){ return ++previous;}

    if(char == ")"){ return --previous;}

    return previous;

  },0);

}

console.log(balancedParens("((())))"));

一句话总结：遍历用 forEach，变形用 map，筛选用 filter，找一条用 find，全真/有真用 every/some，折叠成一个值用 reduce。