迴圈遍歷是寫程式很頻繁的操作，JavaScript 提供了很多方法來實現。

這篇文章將分別總結陣列和物件的遍歷方法，新手可以通過本文串聯起學過的知識。

陣列遍歷

方法一：for 迴圈

for 迴圈是使用最多，也是效能優化最好的一種遍歷方式。

var arr = ["a", "b", "c"];
for (var i = 0; i < arr.length; i++) {
  console.log(arr[i])
}
// a b c

同樣常規的迴圈型別還有 while 迴圈和 do/while 迴圈。

它們之間的區別在於，for 迴圈預先知道迴圈次數，while 迴圈不知道迴圈次數，do/while 至少會迴圈次數。

方法二：for-of 遍歷

for-of 是 ES6 新增的語法。它直接遍歷值，而不是陣列下標（或物件屬性）。

var arr = ["a", "b", "c"];
for (let item of arr) {
  console.log(item);
}
// a b c

實際上，for-of 語句不僅可以迴圈遍歷陣列物件。

還可以迭代 Array、Map、Set、String 等物件。

// 遍歷String
let str = "Hello";
for (let value of str) {
  console.log(value)
}
// H e l l o

// 遍歷Map
let iterable = new Map([["a", 1], ["b", 2], ["c", 3]]);
for (let entry of iterable) {
  console.log(entry);
}
// ["a", 1]
// ["b", 2]
// ["c", 3]
for (let [key, value] of iterable) {
  console.log(value);
}
// 1
// 2
// 3
 

for-of 的工作原理是，向迴圈物件請求一個迭代器物件，然後通過迭代器物件的next()方法來獲得返回值。

陣列內建了 @@iterator，@@iterator不是迭代器，而是返回一個迭代器物件的函式。

var arr = ["a", "b","c"];
var it = arr[Symbol.iterator]();
console.log(it.next());  // { value: 'a', done: false }
console.log(it.next());  // { value: 'b', done: false }
console.log(it.next());  // { value: 'c', done: false }
console.log(it.next());  // { value: undefined, done: true }
 

上面程式碼中，value 表示當前遍歷值，done 是布林值，表示是否還有可以遍歷的值。

需要注意的是，普通物件沒有內建@@iterator，所以無法使用 for-of 遍歷。

這麼做的原因很複雜，簡單來說，就是為了避免影響未來的物件型別。

不過，我們可以通過Object.defineProperty(...)給物件定義@@iterator。

詳細可以通過這裡瞭解。

方法三：陣列方法

為了適應不同方式的遍歷，JavaScript 內建了許多的陣列方法。

例如比較常用的forEach()方法，寫起來，可以讓程式碼更簡潔。

var arr = ["a", "b", "c"];
arr.forEach((index, item) => {
  console.log(index, item)
})
// a 0
// b 1
// c 2

map()方法

var arr = [1, 2, 3];
var newArr = arr.map(item => {
  return item * 2;
});
console.log(newArr);  // [2, 4, 6]

filter()方法

var arr = [1, 2, 3];
var newArr = arr.filter(item => {
  return item > 1;
});
console.log(newArr); // [2, 3]

reduce()方法是 ES5 新增，專為下面這種累加操作的設計的。

實際能做的事情遠比這要豐富，本文只是簡單介紹基本用法，詳細可以檢視本文。

var arr = [1, 2, 3];
var sum = arr.reduce((pre, cur) => {
  return pre + cur;
});
console.log(sum); // 6

every()方法用於檢測陣列元素是否全部符合指定條件。

它通常和下面的some()方法放在一起理解。

var arr = [1, 2, 3];
var bool = arr.every(item => {
  return item < 5;
});
console.log(bool); // true

some()方法用於檢測陣列是否存在一個符合指定條件的元素。

下面的例子是檢測陣列元素是否存在 Number 型別。

var arr = ["a", 1, "b"];
var bool = arr.some(item => {
  return typeof item === "number";
});
console.log(bool);  // true

物件的遍歷方法

物件的遍歷相對麻煩一些。

有兩種方式可以實現物件的遍歷，一種是直接使用 for-in 迴圈；另一方式，是將物件轉換成陣列，再進行遍歷。

方法一：for-in 迴圈

for-in 專門用於遍歷物件的可列舉屬性，包括 prototype 原型鏈上的屬性，因此效能會比較差。

什麼是可列舉屬性？

從名字上可以看出，就是該屬性會出現在物件的迭代（列舉）中，比如 for-in 迴圈中。

var obj = { a: 2, b: 4, c: 6 };
for (let key in obj) {
  console.log(key);
}
// a b c

方法二：Object.keys() 和 Object.getOwnPropertyNames()

Object.key()會返回一個數組，包含所有可列舉屬性；Object.getOwnPropertyNames()也會返回一個數組，包含所有元素，不管是否可列舉。

需要說明的是，兩者都只查詢物件的自定義屬性。

var obj = { a: 2, b: 4, c: 6 };
// Object.keys()
Object.keys(obj).forEach(key => {
  console.log(key);
})
// a b c

// Object.getOwnPrepertyNames()
Object.getOwnPropertyNames(obj).forEach(key => {
  console.log(key);
})
// a b c

此外，還可以通過Reflect.ownKeys(obj)方法來遍歷。

它返回一個數組，包含物件自定義的屬性，不管屬性名是 Symbol 還是字串，也不管是否可列舉。

由於使用不多，這裡瞭解一下即可。

最後，整理了不同物件遍歷方法的特點。

吾兒濱