javascript數組常用的遍歷方法（程式碼範例）

這篇文章帶給大家的內容是關於javascript陣列常用的遍歷方法（程式碼範例），有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

前言

本文主要介紹陣列常見遍歷方法：forEach、 map、filter、find、every、some、reduce，它們有個共同點：不會改變原始陣列。

一、forEach：遍歷數組

var colors = ["red","blue","green"];
// ES5遍历数组方法
for(var i = 0; i <pre class="brush:php;toolbar:false">// 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透過指定函數處理數組的每個元素，並傳回處理後新的數組，map 不會改變原始數組。

forEach和map的差別在於，forEach沒有回傳值。
map需要傳回值，如果不給return，預設回傳undefined

使用場景1
假定有一個數值數組(A),將A數組中的值以雙倍的形式放到B數組

var numbers = [1,2,3];
var doubledNumbers = [];
// es5写法
for(var i = 0; i <pre class="brush:php;toolbar:false">// es6 map方法
var doubled = numbers.map(function(number){
   return number * 2;
})
console.log(doubled);//[2,4,6]

使用場景2 假定有一個物件數組(A),將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() 偵測數值元素，並傳回符合條件所有元素的陣列。 filter() 不會改變原始陣列。

使用場景1：假定有一個物件數組(A),取得數組中指定類型的物件放到B數組中

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 <pre class="brush:php;toolbar:false">// es6 filter
var filtered2 = porducts.filter(function(product){
  return product.type === "vegetable";
})
console.log(filtered2);

使用場景2：假設有一個物件數組(A),過濾掉不滿足以下條件的物件
條件: 蔬菜數量大於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 <p><strong>使用場景3</strong>：假定有兩個陣列(A,B),根據A中id值,過濾掉B數組不符合的資料</p><pre class="brush:php;toolbar:false">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。
使用場景1
假定有一個物件陣列(A),找到符合條件的物件

 var users = [
  {name:"Jill"},
  {name:"Alex",id:2},
  {name:"Bill"},
  {name:"Alex"}
 ];
// es5方法
 var user;
 for(var i = 0; i <pre class="brush:php;toolbar:false">// es6 find
user = users.find(function(user){
  return user.name === "Alex";
})
console.log(user);// {name:"Alex",id:2}找到后就终止循环

使用場景2：假定有一個物件陣列(A),根據指定物件的條件找到陣列中符合條件的物件

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:數組中是否有元素滿足指定的條件

使用場景1：計算物件數組中每個電腦作業系統是否可用，大於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 <pre class="brush:php;toolbar:false">//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

一言以蔽之：Every: 一真即真；Some: 一假即假

#使用場景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： 計算陣列中所有值的總和

 var numbers = [10,20,30];
 var sum = 0;
//es5 方法
for(var i = 0; i <pre class="brush:php;toolbar:false">// 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：判斷字串中括號是否對稱

function balancedParens(string){
  return !string.split("").reduce(function(previous,char){
    if(previous <p class="comments-box-content"></p>#

以上是javascript數組常用的遍歷方法（程式碼範例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！