【JS】遍歷數組的常用方法（舉例版） for forEach map every some for ... in ... for of filter find reduce

總結了幾種常用的遍歷方法。

只提供基礎例子，高深用法請自己查文檔。

for

var arr = [1, 2, 3, 4, 5];

for (var i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}

// 輸出: 1, 2, 3, 4, 5

當然，還有 while 循環，我懶得寫。

forEach

var arr = [1, 2, 3, 4, 5];

arr.forEach(function(item) {
  console.log(item);
})

// 輸出: 1, 2, 3, 4, 5

forEach 函數裏可以傳3個參數，可以看【JS】數組forEach

值得注意的是，forEach 是不能使用 break 和 continue 的。

map

map 的使用方法和 forEach 類似，但 map 是有返回值的，可以返回一個新數組。

var arr = [1, 2, 3, 4, 5];

var doubleNumbers = arr.map(item => {
  return item * 2;
});

console.log(doubleNumbers);
// 輸出: 2, 4, 6, 8, 10

every

every 能否繼續遍歷，取決於返回值，默認返回 false，所以默認只遍歷第一個元素。如需全部遍歷，可以把返回值設置成 true。

var arr = [1, 2, 3, 4, 5];

arr.every(function(item) {
  console.log(item);
  return true;
});

// 輸出: 1, 2, 3, 4, 5

every 和 forEach 的使用方法很像，every 的出現解決了 forEach 中無法 break 和 continue 的問題。

var arr = [1, 2, 3, 4, 5];

// every break
arr.every(function(item) {
  if (item === 3) {
    return false;
  } else {
    console.log(item);
    return true;
  }
})

// 輸出：1，2


// every continue
arr.every(function(item) {
  if (item !== 3) {
    console.log(item);
  }
  return true;
})

// 輸出: 1, 2, 4, 5

some

some 的用法和 every 的用法幾乎一樣，不同點在於，every 遇到 true 才繼續遍歷，some 遇到 true 會停止遍歷。

var arr = [1, 2, 3, 4, 5];

arr.some(function(item) {
  console.log(item)
  if (item === 3) {
    return true;
  }
})

// 輸出: 1, 2, 3

for ... in ...

能遍歷數組，但主要是爲 object 設計的，所以用 for...in... 遍歷數組會有瑕疵。

var arr = [1, 2, 3, 4, 5];

for (var key in arr) {
  // 這裏的 key 是字符串
  console.log(arr[key])
}

// 輸出: 1, 2, 3, 4, 5

瑕疵：往數組上掛一個屬性，也會遍歷出來

var arr = [1, 2, 3, 4, 5];

arr.a = 9;
for (var key in arr) {
  // 這裏的 key 是字符串
  console.log(key, arr[key])
}

// 輸出: 
// 0 1,
// 1 2,
// 2 3,
// 3 4,
// 4 5,
// a 9

for of

for of 能遍歷一切能遍歷的，比如字符串。

var arr = [1, 2, 3, 4, 5];
for (var item of arr) {
  console.log(item)
}

// 輸出: 1, 2, 3, 4, 5

filter

filter 是一個過濾器，用法如下。

const arr = [1, 2, 3, 4, 5];

var result = arr.filter(function(item) {
  return item < 4;
})

console.log(result);

// 輸出: [1, 2, 3]

find

find 用於找出第一個符合條件的數組成員，如果找不到則返回 undefined。

const arr = [1, 2, 3, 4, 5];

var result = arr.find(function(item) {
  return item === 2;
})

console.log(result);
// 輸出: 2

reduce

reduce 主要作用是累加器。也能做一些重構數據結構的工作（當然，也有很多方法代替）。

var arr = [1, 2, 3, 4, 5]

/* 【累加器】 */
var sumVal = arr.reduce(function(sum, number) {
  return sum += number;
}, 0)

console.log(sumVal);

// 輸出: 15

提取數據，並重組成一個新數組。

// 提取數組
var primariColors = [
  {color: 'red'},
  {color: 'yellow'},
  {color: 'green'}
]

var colors = primariColors.reduce(function(previous, primariColor) {
  previous.push(primariColor.color);
  return previous;
}, [])

console.log(colors);

// 輸出: ["red", "yellow", "green"]