JavaScript中，數組和對象的遍歷方法總結

迴圈遍歷是寫程式很頻繁的操作，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 還是字元串，也不管是否可枚舉。

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

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

吾兒濱濱