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

。

詳細可以通過[這裡了解](https://github.com/getify/You-Dont-Know-JS/blob/1ed-zh-CN/this %26 object prototypes/ch3.md)。

方法三：數組方法

為了适應不同方式的周遊，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 還是字元串，也不管是否可枚舉。

由于使用不多，這裡了解一下即可。

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

方式	查找原型鍊屬性	查找自定義屬性	查找不可枚舉屬性
for-in	✅
Object.keys(..)	❌
Object.getOwnpropertyNames(..)

吾兒濱濱