淺談數組常見遍歷方法

本文主要介紹數組常見遍歷方法：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 + 500
  return 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);          // 沒有條件，會是 undefined

var 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: 只要有部分不符合，則爲 false

var 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: 只要有部分符合，則爲 true

var 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博客點贊和關注，感激涕零！