javascript數組常用的遍歷方法

阿新 • • 發佈：2018-10-26

script 代碼示例 nod program 筆記 npr post gree pass

本篇文章給大家帶來的內容是關於javascript數組常用的遍歷方法（代碼示例），有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。

技術分享圖片

前言

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

一、forEach：遍歷數組

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通過指定函數處理數組的每個元素，並返回處理後新的數組，map 不會改變原始數組。

forEach和map的區別在於，forEach沒有返回值。
map需要返回值，如果不給return，默認返回undefined

使用場景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),將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 < porducts.length; i++){

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

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：假定有一個對象數組(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 < 10

})

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

使用場景3：假定有兩個數組(A,B),根據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。
使用場景1
假定有一個對象數組(A),找到符合條件的對象

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：假定有一個對象數組(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 < 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

一言以蔽之：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 < 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：判斷字符串中括號是否對稱

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("((())))"));

以上就是javascript數組常用的遍歷方法（代碼示例）的詳細內容。

本文轉載於：segmentfault，僅因寫的全面，故拿來做筆記，如有侵犯，請聯系刪除。

javascript數組常用的遍歷方法

數組常用遍歷方法用法及其各項區別

找到不起作用 UNC 第一篇方法 lte 新年 term break for,forEach,for in,for of的使用及區別 filter,map的使用及區別 includes,finde的使用及區別 some,every的使用及區別 reduce的使用及常見

javascript數組常用的遍歷方法

script 代碼示例 nod program 筆記 npr post gree pass 本篇文章給大家帶來的內容是關於javascript數組常用的遍歷方法（代碼示例），有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。前言本文主要介紹數組

JavaScript數組常用的方法

span tac bst 刪除 ray script yahoo del code var arr = [1, 2, 3.14, ‘Hello‘, null, true]; arr.length; // 6直接給Array的length賦一個新的值會導致Array大小的變化

【javascript】JavaScript數組常用方法

map return 函數調用 turn 就會開頭滿足函數沒有 JavaScript數組常用方法一、數組創建 1.（1）使用Array創建數組： 1 var arr1 = new Array(); //創建一個空數組 2 var arr2 = new Array

JavaScript數組常用方法

png 分享圖片 index item 逆序連接 indexof 不可 mage 總結一下JavaScript中一些常用的數組方法以及ES5新增的一些數組方法 push() push的功能：在數組的尾部追加元素，可以一次追加多個，返回追加元素後的數組長度，原數組改變 va

c++分文件定義，數組元素遍歷

堆實例化對象棧實例化對象遍歷 1、demo.cpp如下：//遍歷數組中的元素，所謂遍歷就是打印數組中的元素,yiban #include<iostream> #include<stdlib.h> #include"Coordinate.h" using namespa

PHP數組的遍歷

php數組 reac value 遍歷 ray 元素如果 arr ech 對於012345...這樣的數組可以用for進行遍歷 $arr=array(‘a‘,‘b‘,‘c‘,‘d‘,‘e‘); for($key=0;$key<count($arr);$key++){

java 數組的遍歷異常

越界 clas dem 打印 arr null 取數 ati 指針在操作數組時，經常需要依次訪問數組中的每個元素，這種操作稱作數組的遍歷 1 public class ArrayDemo04 { 2 public static void main(String[

[黑馬PHP教程]C. 數組的遍歷（必記）

ant data span lis borde alt 使用指針 font 一，利用foreach遍歷數組二，數組的指針操作與遍歷原理三，數組遍歷流程原理四，利用 for循環和 next 遍歷數組五，利用 while循環+ each（）+ list（）

map常用遍歷方法

http abc entryset tails 運行 net iter image 技術 //循環遍歷map的方法 public class MapF { 　public static void main(String[] args) { 　　　　Map<

原生javascript和jQuery的遍歷方法

找得可能不完整歡迎補充指教 DOM遍歷一共四種： parentNode（遍歷第一個父節點） childNodes（遍歷所有子節點） nextSibling（遍歷下一個位元組點） previousSibling（遍歷上一個子節點） <body> <div&

數組、數組的遍歷、排序算法

自動變 int clu using 鍵盤 space [] 遍歷 nbsp int x[3] = { 1,2,3 }; int x[3] = { 1,2 };//未初始化的元素，默認0 int x[] = { 1,2,3 };//省略下標，依據元素個數自動變更下標 int

js---Array物件的常用遍歷方法

1.forEach(),遍歷陣列的每個元素 let arrFor = ['muzi','digbig','muzidigbig','lucky'] //forEach(),遍歷陣列的每個元素 arrFor.forEach((item,index) => {

java中Map集合的常用遍歷方法及HashMap的應用例項

Map的遍歷大體有3種： 1、遍歷Map.entrySet()：它的每一個元素都是Map.Entry物件，這個物件中，放著的就是Map中的某一對key-value； 2、遍歷Map.keySet()：它是Map中key值的集合，我們可以通過遍歷這個集合來讀取M

javascript 四種陣列遍歷方法

陣列遍歷方法收集一些各種遍歷的方法，主要針對陣列最傳統方法：for( ; ; ){} var arr=[1,2,3,4,5,6]; for(var i=0;i<arr.length;i++){ console.log(arr[i]);

環形數組逆向遍歷

pan 完成 %u string class 環形數組 -- pool emp 環形數組逆向遍歷 1 #include <stdio.h> 2 #include <string.h> 3 4 #define shell

數組常用對象方法

項目元素 spl 方法 end 轉換數組長度返回刪除 ---恢復內容開始--- 1、push 在數組末尾添加一個或多個元素，並返回數組長度。 2，unshift 在數組前面添加一個或多個元素，並返回數組長度。 3，pop 刪除最後一個元素，並返回刪除的值。 4

js 數組元素遍歷

new 元素遍歷 ava script scrip rip write pan <html> <body> <script type="text/javascript"> var x var mycars = new

php7簡短而安全的數組遍歷方法

init 遍歷 ati shel php7 判斷 codec keyword www 在寫 PHP 的數組遍歷的時候，我們通常會這樣寫： foreach ($definition[‘keys‘] as $id => $val) { // ... } 但是其實這樣會

JavaScript 數組遍歷

方法 func script 可選數組遍歷 each val 數組 arr 方法一：for...in var arr1 = [1,2,3,4]; for(currentValue in arr1) { document.write( currentValue +

javascript數組常用的遍歷方法

相關推薦