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

接下來都是使用底下的基礎數組來實現一些方法：

• 累加
• 比大小
• 分別運算
• 查找特定值等

let people = [{name: '馬云',money: 2000},{name: '馬化騰',money: 1800},{name: '李彥宏',money: 1500},{name: '我',money: Infinity} ]; 復制代碼

forEach：遍歷數組

forEach與另外幾種方法有些許不同，就是除了forEach以外的幾個方法都會返回值，如果在等號的左方放一個變量，那么此變量返回值將會是undefined(沒有返回任何值)。

var forEachLoop = people.forEach( function ( item, index, array ) {console .log(item, index, array); //（對象,索引,全部數組） }); console .log(forEachLoop); // undefined 復制代碼

其它的方法都會返回一個值或數組，以此來說就會傳回原本的數組值。

var mapLoop = people.map( function ( item, index, array ) {return item }); console .log(mapLoop); //與原本數組資料相同 復制代碼

map：一一映射另一個數組

map會return返回的對象、值，作用上是用來處理數組返回新值產生一個新數組，要特別注意返回的值數量與原始數組長度相同，所以如果不給return，默認返回undefined。

// 沒有給return 也會產生undefined var mapEmpty = people.map( function ( item, index, array ) { }); console .log(mapEmpty); // [undefined, undefined, undefined, undefined]var everyoneAdd = people.map( function ( item, index, array ) {item.money = item.money + 500 ; //每個money + 500return item; //返回對象 }); console .log(everyoneAdd); // 返回每個處理后的數值，不過記得這是傳參考特性，會影響到原始的對象 // {name: "馬云", money: 2500} // {name: "馬化騰", money: 2300} // {name: "李彥宏", money: 2000} // {name: "我", money: Infinity}var mapMoneyThan1500 = people.map( function ( item, index, array ) {// 錯誤示范，長度不符合時if (item.money > 1500 ) {return item; //取得大于1500} }); console .log(mapMoneyThan1500); // [{name: "馬云", money: 2000}, {name: "馬化騰", money: 1800}, undefined, {name: "我", money: Infinity} ] 復制代碼

filter：過濾掉數組中符合條件的元素

filter() 檢測數值元素，并返回符合條件所有元素的數組。 filter() 不會改變原始數組。

// filter var filterEmpty = people.filter(function(item, index, array){ }); console.log(filterEmpty); // 沒有給條件，會是一個空數組var filterMoneyThan1500 = people.filter(function(item, index, array){return item.money > 1500; // 取得大于1500 }); console.log(filterMoneyThan1500); // 馬云，馬化騰，我 這三個對象 復制代碼

find：返回符合條件的數組的第一個元素的值

find是用來查找數組中符合條件的對象，且僅能有一個，當返回的true數量超過兩個以上時，那會以第一個為優先，通常會用來查找特定 id。如果沒有符合條件的對象，則返回undefined。

var findEmpty = people.find(function(item, index, array){ }); console.log(findEmpty); // 沒有條件，會是 undefinedvar findMoneyThan1500 = people.find(function(item, index, array){return item.money > 1500; // 取得大于1500 }); console.log(findMoneyThan1500); // 雖然滿足條件的有3個，但只會返回 '馬云' 這一個對象var findMe = people.find(function(item, index, array){return item.name === '我'; // 找到我 }); console.log(findMe); // 我 這一對象 復制代碼

every：驗證數組中是否每個元素都滿足指定的條件

驗證全部的結果，當全部的值都為 true 時，則最終會得到 true；只要其中之一為 false，則返回 false。

var ans = people.every(function(item, index, array){return item.money > 1800; }); console.log(ans); // false: 只要有部分不符合，則為 falsevar ans2 = people.every(function(item, index, array){return item.money > 500; }); console.log(ans2); // true: 大家錢都超過 500 復制代碼

some：驗證數組中是否有元素滿足指定的條件

與前者類似，但只要部分為 true，則返回 true；全部為 false 時返回值才會為 false。

var ans = people.some(function(item, index, array){return item.money > 1800; }); console.log(ans); // true: 只要有部分符合，則為 truevar ans2 = people.some(function(item, index, array){return item.money < 500; }); console.log(ans2); // false: 大家錢都不少于 500 復制代碼

reduce：將數組合成一個值

reduce是其中最為特殊的，首先他返回的參數與之前的不同，它會接收到前一個返回的值供下一個對象使用，很適合用在累加與對比上，返回的可以是數字也可以是數組。

• accumulator: 前一個參數，如果是第一個數組的話，值是以另外傳入或初始化的值
• currentValue: 當前值
• currentIndex: 當前索引
• array: 全部數組

var reduceEmpty = people.reduce(function(accumulator, currentValue, currentIndex, array){ }); console.log(reduceEmpty); // 沒有條件，會是 undefined 復制代碼

可以通過與前一個相加的方式，累加數組中所有的值。

people.pop(); // 我的錢深不可測，先移除掉 var reducePlus = people.reduce(function(accumulator, currentValue, currentIndex, array){// 分別是前一個返回值, 當前值, 當前索引值console.log(accumulator, currentValue, currentIndex);return accumulator + currentValue.money; // 與前一個值相加 }, 0); // 傳入初始化值為 0 console.log(reducePlus); // 總和為 5300 復制代碼

也可以相互對比，取出最高的值。

var reduceBestOne = people.reduce(function(accumulator, currentValue, currentIndex, array){console.log('reduce', accumulator, currentValue, currentIndex)return Math.max(accumulator, currentValue.money); // 與前一個值比較哪個更大 }, 0); console.log(reduceBestOne); // 最大值為 2000 復制代碼

reduce功能很強大，其余幾種遍歷方法可以用reduce方法來代替，這里只列出map被reduce代替的例子。

//map方法 var mapMoneyDouble = people.map( function ( item, index, array ) {return item.money*2; //錢翻倍 }); console .log(mapMoneyDouble); // 4000, 3600, 3000, Infinity//reduce方法實現同樣的功能 var reduceMoneyDouble = people.reduce( function ( accumulator, currentValue, currentIndex, array ) { //錢翻倍accumulator.push(currentValue.money*2); //錢翻倍return accumulator },[]); console .log(reduceMoneyDouble); // 4000, 3600, 3000, Infinity 復制代碼

如果覺得文章對你有些許幫助，歡迎在我的GitHub博客點贊和關注，感激不盡！

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

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

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