看圖了解數組常用的方法

前言

本文主要介紹數組常見遍歷方法：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 returncar.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 functioncommentsForPost(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 varuser;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 functionpostForComment(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 functionField(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 returnfield.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 returnprevious;9 },[]);10 console.log(colors);//["red", "yellow", "blue"]

使用場景3：判斷字符串中括號是否對稱

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

新人創作打卡挑戰賽發博客就能抽獎！定制產品紅包拿不停！

總結

以上是生活随笔為你收集整理的chararray遍历_数组常用的遍历方法 ——总结的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。