码迷,mamicode.com
首页 > 编程语言 > 详细

数组常用的遍历方法 ——总结

时间:2020-09-09 18:49:22      阅读:38      评论:0      收藏:0      [点我收藏+]

标签:car   comment   函数   nod   个数   type   anti   根据   java   

看图了解数组常用的方法

技术图片

 

 

 前言

本文主要介绍数组常见遍历方法:forEach、map、filter、find、every、some、reduce,它们有个共同点:不会改变原始数组。

 

一、forEach:遍历数组

 

1 var colors = ["red","blue","green"];
2 // ES5遍历数组方法
3 for(var i = 0; i < colors.length; i++){ 
4  console.log(colors[i]);//red blue green
5 }

 

1 // ES6 forEach
2 colors.forEach(function(color){
3  console.log(color);//red blue green
4 });

我们再来看个例子:遍历数组中的值,并计算总和

1 var numbers = [1,2,3,4,5];
2 var sum = 0;
3 numbers.forEach(number=>sum+=number)
4 console.log(sum)//15

 

二、map:将数组映射成另一个数组

map通过指定函数处理数组的每个元素,并返回处理后新的数组,map 不会改变原始数组。

forEach和map的区别在于,forEach没有返回值。
map需要返回值,如果不给return,默认返回undefined

 

使用场景1

假定有一个数值数组(A),将A数组中的值以双倍的形式放到B数组

1 var numbers = [1,2,3];
2 var doubledNumbers = [];
3 // es5写法
4 for(var i = 0; i < numbers.length; i++){
5  doubledNumbers.push(numbers[i] * 2);
6 }
7 console.log(doubledNumbers);//[2,4,6]
1 // es6 map方法
2 var doubled = numbers.map(function(number){
3    return number * 2;
4 })
5 console.log(doubled);//[2,4,6]

使用场景2 假定有一个对象数组(A),将A数中对象某个属性的值存储到B数组中

1 var cars = [
2   {model:"Buick",price:"CHEAP"},
3   {model:"BMW",price:"expensive"}
4 ];
5 var prices = cars.map(function(car){
6     return car.price;
7 })
8 console.log(prices);//["CHEAP", "expensive"]

 

三、filter:从数组中找出所有符合指定条件的元素

filter() 检测数值元素,并返回符合条件所有元素的数组。 filter() 不会改变原始数组。

使用场景1:假定有一个对象数组(A),获取数组中指定类型的对象放到B数组中

 1 var porducts = [
 2   {name:"cucumber",type:"vegetable"},
 3   {name:"banana",type:"fruit"},
 4   {name:"celery",type:"vegetable"},
 5   {name:"orange",type:"fruit"}
 6 ];
 7 // es5写法
 8 var filteredProducts = [];
 9 for(var i = 0; i < porducts.length; i++){
10     if(porducts[i].type === "vegetable"){
11       filteredProducts.push(porducts[i]);
12     }
13 }
14 console.log(filteredProducts);//[{name: "cucumber", type: "vegetable"},
15                                  {name: "celery", type: "vegetable"}]
1 // es6 filter
2 var filtered2 = porducts.filter(function(product){
3   return product.type === "vegetable";
4 })
5 console.log(filtered2);

使用场景2:假定有一个对象数组(A),过滤掉不满足以下条件的对象
条件: 蔬菜 数量大于0,价格小于10

 1 var products = [
 2   {name:"cucumber",type:"vegetable",quantity:0,price:1},
 3   {name:"banana",type:"fruit",quantity:10,price:16},
 4   {name:"celery",type:"vegetable",quantity:30,price:8},
 5   {name:"orange",type:"fruit",quantity:3,price:6}
 6 ];
 7 products = products.filter(function(product){
 8     return product.type === "vegetable" 
 9     && product.quantity > 0 
10     && product.price < 10
11 })
12 console.log(products);//[{name:"celery",type:"vegetable",quantity:30,price:8}]

使用场景3:假定有两个数组(A,B),根据A中id值,过滤掉B数组不符合的数据

 1 var post = {id:4,title:"Javascript"};
 2 var comments = [
 3    {postId:4,content:"Angular4"},
 4    {postId:2,content:"Vue.js"},
 5    {postId:3,content:"Node.js"},
 6    {postId:4,content:"React.js"},
 7 ];
 8 function commentsForPost(post,comments){
 9    return comments.filter(function(comment){
10      return comment.postId === post.id;
11    })
12 }
13 console.log(commentsForPost(post,comments));//[{postId:4,content:"Angular4"},{postId:4,content:"React.js"}]

 

四、find:返回通过测试(函数内判断)的数组的第一个元素的值

它的参数是一个回调函数,所有数组成员依次执行该回调函数,直到找出第一个返回值为true的成员,然后返回该成员。如果没有符合条件的成员,则返回undefined。
使用场景1

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

 1  var users = [
 2   {name:"Jill"},
 3   {name:"Alex",id:2},
 4   {name:"Bill"},
 5   {name:"Alex"}
 6  ];
 7 // es5方法
 8  var user;
 9  for(var i = 0; i < users.length; i++){
10   if(users[i].name === "Alex"){
11     user = users[i];
12     break;//找到后就终止循环
13   }
14  }
15  console.log(user);// {name:"Alex",id:2}
1 // es6 find
2 user = users.find(function(user){
3   return user.name === "Alex";
4 })
5 console.log(user);// {name:"Alex",id:2}找到后就终止循环

使用场景2:假定有一个对象数组(A),根据指定对象的条件找到数组中符合条件的对象

 1 var posts = [
 2  {id:3,title:"Node.js"},
 3  {id:1,title:"React.js"}
 4 ];
 5 var comment = {postId:1,content:"Hello World!"};
 6 function postForComment(posts,comment){
 7  return posts.find(function(post){
 8    return post.id === comment.postId;
 9  })
10 }
11 console.log(postForComment(posts,comment));//{id: 1, title: "React.js"}

 

五、every&some

every:数组中是否每个元素都满足指定的条件

some:数组中是否有元素满足指定的条件

使用场景1:计算对象数组中每个电脑操作系统是否可用,大于16位操作系统表示可用,否则不可用

 1 //ES5方法
 2 var computers = [
 3  {name:"Apple",ram:16},
 4  {name:"IBM",ram:4},
 5  {name:"Acer",ram:32}
 6 ];
 7 var everyComputersCanRunProgram = true;
 8 var someComputersCanRunProgram = false;
 9 for(var i = 0; i < computers.length; i++){
10  var computer = computers[i];
11  if(computer.ram < 16){
12    everyComputersCanRunProgram = false;
13  }else{
14    someComputersCanRunProgram = true;
15  }
16 }
17 console.log(everyComputersCanRunProgram);//false
18 console.log(someComputersCanRunProgram);//true
1 //ES6 some every 
2 var every = computers.every(function(computer){
3   return computer.ram > 16;
4 })
5 console.log(every);//false
6 var some = computers.some(function(computer){
7  return computer.ram > 16;
8 })
9 console.log(some);//true

一言以蔽之:Some: 一真即真;Every: 一假即假

使用场景2:假定有一个注册页面,判断所有input内容的长度是否大于0

 1 function Field(value){
 2   this.value = value;
 3 }
 4 Field.prototype.validate = function(){
 5   return this.value.length > 0;
 6 }
 7 //ES5方法
 8 var username = new Field("henrywu");
 9 var telephone = new Field("18888888888");
10 var password = new Field("my_password");
11 console.log(username.validate());//true
12 console.log(telephone.validate());//true
13 console.log(password.validate());//true
14 //ES6 some every
15 var fields = [username,telephone,password];
16 var formIsValid = fields.every(function(field){
17  return field.validate();
18 })
19 console.log(formIsValid);//true
20 if(formIsValid){
21  // 注册成功
22 }else{
23   // 给用户一个友善的错误提醒
24 }

 

六、reduce:将数组合成一个值

reduce() 方法接收一个方法作为累加器,数组中的每个值(从左至右) 开始合并,最终为一个值。

使用场景1: 计算数组中所有值的总和

1  var numbers = [10,20,30];
2  var sum = 0;
3 //es5 方法
4 for(var i = 0; i < numbers.length; i++){
5   sum += numbers[i];
6 }
7 console.log(sum);
1 // es6 reduce
2 var sumValue = numbers.reduce(function(sum2,number2){
3   console.log(sum2);//0 10 30 60
4   return sum2 + number2;
5 },0);//sum2初始值为0
6 console.log(sumValue);

使用场景2:
将数组中对象的某个属性抽离到另外一个数组中

 1 var primaryColors = [
 2    {color:"red"},
 3    {color:"yellow"},
 4    {color:"blue"}
 5  ];
 6  var colors = primaryColors.reduce(function(previous,primaryColor){
 7     previous.push(primaryColor.color);
 8     return previous;
 9  },[]);
10  console.log(colors);//["red", "yellow", "blue"]

使用场景3:判断字符串中括号是否对称

1 function balancedParens(string){
2   return !string.split("").reduce(function(previous,char){
3     if(previous < 0) { return previous;}
4     if(char == "("){ return ++previous;}
5     if(char == ")"){ return --previous;}
6     return previous;
7   },0);
8 }
9 console.log(balancedParens("((())))"));

 

数组常用的遍历方法 ——总结

标签:car   comment   函数   nod   个数   type   anti   根据   java   

原文地址:https://www.cnblogs.com/xps-03/p/13580293.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!