本文主要介紹數(shù)組常見遍歷方法：forEach、map、filter、find、every、some、reduce，它們有個(gè)共同點(diǎn)：不會(huì)改變?cè)紨?shù)組。

接下來都是使用底下的基礎(chǔ)數(shù)組來實(shí)現(xiàn)一些方法：

• 累加
• 比大小
• 分別運(yùn)算
• 查找特定值等

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

forEach：遍歷數(shù)組

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

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

其它的方法都會(huì)返回一個(gè)值或數(shù)組，以此來說就會(huì)傳回原本的數(shù)組值。

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

map：一一映射另一個(gè)數(shù)組

map會(huì)return返回的對(duì)象、值，作用上是用來處理數(shù)組返回新值產(chǎn)生一個(gè)新數(shù)組，要特別注意返回的值數(shù)量與原始數(shù)組長(zhǎng)度相同，所以如果不給return，默認(rèn)返回undefined。

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

filter：過濾掉數(shù)組中符合條件的元素

filter() 檢測(cè)數(shù)值元素，并返回符合條件所有元素的數(shù)組。 filter() 不會(huì)改變?cè)紨?shù)組。

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

find：返回符合條件的數(shù)組的第一個(gè)元素的值

find是用來查找數(shù)組中符合條件的對(duì)象，且僅能有一個(gè)，當(dāng)返回的true數(shù)量超過兩個(gè)以上時(shí)，那會(huì)以第一個(gè)為優(yōu)先，通常會(huì)用來查找特定 id。如果沒有符合條件的對(duì)象，則返回undefined。

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

every：驗(yàn)證數(shù)組中是否每個(gè)元素都滿足指定的條件

驗(yàn)證全部的結(jié)果，當(dāng)全部的值都為 true 時(shí)，則最終會(huì)得到 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 復(fù)制代碼

some：驗(yàn)證數(shù)組中是否有元素滿足指定的條件

與前者類似，但只要部分為 true，則返回 true；全部為 false 時(shí)返回值才會(huì)為 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 復(fù)制代碼

reduce：將數(shù)組合成一個(gè)值

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

• accumulator: 前一個(gè)參數(shù)，如果是第一個(gè)數(shù)組的話，值是以另外傳入或初始化的值
• currentValue: 當(dāng)前值
• currentIndex: 當(dāng)前索引
• array: 全部數(shù)組

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

可以通過與前一個(gè)相加的方式，累加數(shù)組中所有的值。

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

也可以相互對(duì)比，取出最高的值。

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

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

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

如果覺得文章對(duì)你有些許幫助，歡迎在我的GitHub博客點(diǎn)贊和關(guān)注，感激不盡！

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。