JavaScript 遍歷、列舉與迭代的騷操作（上篇）

摘要： 相信大部分搬磚工作者都寫過類似的程式碼： var arr = ['element1', 'element2', 'element3']; for (var i = 0, len = arr.length; i < len; i...

相信大部分搬磚工作者都寫過類似的程式碼：

var arr = ['element1', 'element2', 'element3'];

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

// element1
// element2
// element3
複製程式碼

這是一段標準的for迴圈程式碼，通過變數i去追蹤陣列arr的索引，達到訪問陣列中每一位元素的目的。

但不得不說，這是非常原始的一種方法，存在著幾個顯著缺點：

• 無法只關注元素本身，需要花費精力去維護變數i以及邊界len；

• 當存在著多重巢狀時，將需要跟蹤維護多個變數i，程式碼會非常複雜；

• 需要花費精力去處理越界問題，一些編譯型語言在遇到陣列索引越界時會報錯，而JavaScript引擎將不會告訴你任何錯誤資訊，錯誤定位成本會比較高。

陣列自帶方法forEach

當然我們可以使用陣列自帶的forEach方法進行陣列的遍歷：

var arr = ['element1', 'element2', 'element3'];

arr.forEach(function(value, index, arr) {
console.log(value);
});

// element1
// element2
// element3
複製程式碼

一切看起來都是那樣的完美，即不需要花費精力去追蹤索引，又無需擔心越界問題，簡直美滋滋。But，如果遍歷到某個特定條件想退出咋整？

var arr = ['element1', 'element2', 'element3'];

arr.forEach(function(value, index, arr) {
if (index === 1) {
break;
} else {
console.log(value);
}
});

// Uncaught SyntaxError: Illegal break statement
複製程式碼

比較遺憾的是以上的程式碼未能按照我們的預期執行（break、continue等語句跨越了函式邊界），所以這個看似完美的辦法實際上只能一條道走到黑，像吃了炫邁一樣根本停不下來。當陣列很大，沒辦法通過提前終止遍歷來節省資源。

for in迴圈

飯要一口一口的吃（飯桶請忽略），我們可以先解決花費時間防止陣列越界的問題，例如可以使用for in迴圈：

var arr = ['element1', 'element2', 'element3'];

for (var i in arr) {
console.log(arr[i]);
}

// element1
// element2
// element3
複製程式碼

for in語句是一種精準的迭代語句，可以列舉物件的所有可列舉屬性(可以使用Object.getOwnPropertyDescriptor(targetObj, attrName)方法來檢視物件的某個屬性是否可列舉)。It means that，可以用它來遍歷物件：

var obj = {
a: 1,
b: 1,
c: 1
};

for (let attr in obj) {
console.log(attr, obj[attr]);
}

// a 1
// b 1
// c 1
複製程式碼

除了遍歷物件、陣列之外，for in迴圈還可兼職遍歷字串：

var str = 'I am a handsome boy!';

for (var i in str) {
console.log(str[i]);
}

// 太帥(chang)了，結果就不列印了
複製程式碼

當然，也支援break、continue的操作，例子我就不寫了。

這玩意看起來非常的牛*，簡直就是萬能的。But，一般看上去什麼都會的人，實際上什麼都做不精（我就不一樣了，我不僅看上去什麼都不會，還做不好），這個玩意也是一樣的，看看例子：

var father = {
fatherAttr: 1
};

// 以father為原型建立物件例項instance
var instance = Object.create(father);

instance.a = 1;
instance.b = 1;
instance.c = 1;

for (var attr in instance) {
console.log(attr, instance[attr]);
}

// a 1
// b 1
// c 1
// fatherAttr 1

// 獲取instance例項的自有屬性名
console.log(Object.getOwnPropertyNames(instance));

// ["a", "b", "c"]
複製程式碼

上面這個例子中，首先以father物件為原型建立了一個物件例項instance，然後為這個例項instance添加了a、b、c三個屬性，接著使用for in迴圈遍歷這個物件。通過檢視instance的自有屬性可以發現，fatherAttr並不是instance的屬性，而是其原型father的屬性，for in迴圈會將物件的原型屬性也一併列舉出來。故使用此方法去遍歷物件屬性的時候，需要加多一層判斷：

for (var attr in obj) {
if (obj.hasOwnProperty(attr)) {
// 是物件的自有屬性，可以盡情的玩耍了
}
}
複製程式碼

for in迴圈列舉原型屬性這個弊端，在運算元組上也是有同樣的問題，但是一般情況下，使用它遍歷陣列還是比較保險的；畢竟陣列的原型是JavaScript內建物件Array，Array物件的預設屬性都是不可列舉的；但如果你連Array物件都敢修改的話，這個小小的bug對你來說也不是事了。

不得不說，for in迴圈還是比較普遍使用的遍歷物件的方法，這主要得益於其相容性。當然，遍歷物件還有其他的方法，稍遲再講。我們繼續審判for in迴圈：

var str = 'ac';

for (let index in str) {
console.log(str[index]);
}

// a
// 無法用言語描述的字元
// 無法用言語描述的字元
// c
複製程式碼

ES5及之前處理字串時，是以16位編碼單位為基礎的；16位編碼顯然無法給世界上所有的字元編碼，所以某些字元就需要使用32位進行編碼了，例如’‘字。

所以上面的例子出現列印四個字元的結果就不難理解了。按照道理來說，這不應該是for in迴圈的鍋，但是有些時候就是不想講道理。

雖然es6處理字串強制使用UTF-16字串來解決上述的問題（下面會有相關的例子），但for in迴圈依舊會存在上述的問題，如果你的程式需要相容不支援es6的瀏覽器，可以戳這裡

for of迴圈

通過for in迴圈可以解決傳統for迴圈需要維護邊界的問題，但也引入了一些新問題，跟搬磚工作者的日常操作“解決3個bug，引入8個新bug”場景極度相似。

所以換個es6定義的for of迴圈操作試試：

let str = 'ac';

for (let char of str) {
if (char === ' ') {
continue;
} else {
console.log(char);
}
}

// a
//
// c
複製程式碼

從上面的例子來看，效果簡直是perfect：索引去掉了，邊界去掉了，想繼續就繼續，想退出就退出，還能順便解決一下字串的編碼問題。

for of迴圈是一種依賴物件迭代器（迭代器的相關內容放在下一篇）的遍歷方法，每一次執行都會執行迭代器的next方法，返回正確的值。通過for of迴圈，無需花費精力去追蹤複雜的條件，降低了出錯的概率。

根據先褒後貶的套路，接下來看看其一些限制性：

• 執行環境為ES6及以上版本，所以相容性沒有for in迴圈以及傳統的操作好，如果需要考慮相容上世紀的瀏覽器，就不能使用這個東西

• 只能用於遍歷可迭代物件，即存在迭代器的物件，如果用於遍歷不可迭代物件，分分鐘報錯沒商量。可以通過檢測物件的Symbol.iterator屬性（相關內容將放在下一篇）是否為函式來判斷物件是否可迭代。

let arr = ['a', 'b', 'c'];

// 判斷其Symbol.iterator屬性是否為函式
if ((typeof arr[Symbol.iterator]).toUpperCase() === 'FUNCTION') {
for (let element of arr) {
console.log(element);
}
} else {
console.log('此物件不可迭代');
}

// a
// b
// c
複製程式碼

實際上，大多數JavaScript的內建物件都支援迭代，例如：Array、Set、Map、String等，當使用for of迴圈遍歷上述物件時，會使用其預設的迭代器：

let map = new Map([['a', 1], ['b', 1], ['c', 1], ['d', 1]]);

// 正經操作
for (let item of map) {
console.log(item);
}

// ["a", 1]
// ["b", 1]
// ["c", 1]
// ["d", 1]

// 使用解構，方便讀取值
for (let [key, value] of map) {
console.log(key, value);
}

// a 1
// b 1
// c 1
// d 1
複製程式碼

上面的例子使用了for of遍歷了Map型別例項map，迭代物件為Map型別的預設迭代器。當然，像Array、Set、Map型別還提供了一些特殊的迭代器，可以讓搬磚工作者更方便的去處理其想關注的內容：

• entries() 返回一個迭代器，其返回值為鍵值對陣列（Map集合的預設迭代器；對於Set集合，返回值陣列的元素相同，即value）

• keys() 返回一個迭代器，其返回值為集合的鍵名（對於Set集合，此迭代器跟values迭代器返回值相同;對於陣列，此迭代器返回值為索引）

• values() 返回一個迭代器，其返回值為集合的值（Array、Set集合的預設迭代器）

let arr = ['a', 'b', 'c', 'd']
let set = new Set(arr);

for (let item of set.entries()) {
console.log(item);
}
for (let item of arr.entries()) {
console.log(item);
}

// ["a", "a"]
// ["b", "b"]
// ["c", "c"]
// ["d", "d"]
// [0, "a"]
// [1, "b"]
// [2, "c"]
// [3, "d"]

for (let item of set.keys()) {
console.log(item);
}
for (let item of arr.keys()) {
console.log(item);
}

// a
// b
// c
// d
// 0
// 1
// 2
// 3

for (let item of set.values()) {
console.log(item);
}
for (let item of arr.values()) {
console.log(item);
}

// a
// b
// c
// d
// a
// b
// c
// d
複製程式碼

除了JavaScript的內建物件，一些DOM標準的型別如NodeList也可以使用for of迴圈進行遍歷：

let containers = document.querySelectorAll('.container');

for (let node of containers) {
// 搞事情專用註釋
}
複製程式碼

很遺憾的是，for of迴圈居然不支援自定義物件的遍歷（心中一萬匹***奔騰而過......），所以如果不想使用for in迴圈遍歷物件，只能轉個彎了。

遍歷物件的轉彎操作

Object.keys()獲取鍵名陣列

使用Object.keys()可以獲取到物件例項的所有可列舉屬性，其返回值為一個數組，陣列元素為物件的鍵名：

let father = {
fatherAttr: 1
};

// 以father為原型建立物件例項instance
let instance = Object.create(father);

instance.a = 1;
instance.b = 1;
instance.c = 1;

Object.defineProperty(instance, 'd', {
writable: true,
value: 1,
enumerable: false,
configurable: true
});

for (let key of Object.keys(instance)) {
console.log(key);
}

// a
// b
// c
複製程式碼

從上面的例子中可以看出，Object.keys()方法並不會獲取物件的原型屬性以及自身不可列舉屬性，這個是比較符合我們的需求的；並且，這個玩意是ES5的特性，相容性還是比較好的，是筆者比較喜歡使用的方法。

當然，如果作死，往這個方法傳入非物件引數(如字串)，其在ES5環境和ES6環境的表現是不一樣的：

console.log(Object.keys('I am a handsome boy!'));

// ES5 直接報錯，但說不定是瀏覽器嫉妒我的帥氣才會報錯的

// ES6 估計見多了大風大浪，沒啥感覺了
// ["0", "1", "2", "3", "4", "5", ...]
複製程式碼

另外，需要注意的一點，ES標準沒有規定這個列舉順序，也就是說此方法的返回值的順序是不確定的（包括下面的各種方法），如果對順序有要求，可以儘量使用map或者set集合進行操作。

Object.getOwnPropertyNames()獲取鍵名陣列

此方法跟keys方法表現一樣，所不同的是，其返回的陣列包含了物件的不可列舉屬性：

let father = {
fatherAttr: 1
};

let instance = Object.create(father);

instance.a = 1;
instance.b = 1;
instance.c = 1;

Object.defineProperty(instance, 'd', {
writable: true,
value: 1,
enumerable: false,
configurable: true
});

for (let key of Object.getOwnPropertyNames(instance)) {
console.log(key);
}

// a
// b
// c
// d
複製程式碼

如果你還是想作死，試試傳入一個字串會發生什麼事，可以自己去試試，然後評論區留下實驗結果。

Object.entries()獲取鍵值對陣列

這個方法返回什麼東西就無需多言了吧，看例子：

let father = {
fatherAttr: 1
};

let instance = Object.create(father);

instance.a = 1;
instance.b = 1;
instance.c = 1;

Object.defineProperty(instance, 'd', {
writable: true,
value: 1,
enumerable: false,
configurable: true
});

for (let key of Object.entries(instance)) {
console.log(key);
}

// ["a", 1]
// ["b", 1]
// ["c", 1]
複製程式碼

所以當使用一個物件初始化一個Map例項時，可以使用這個方法：

let obj = { a: 1, b: 1, c: 1 },
map = new Map(Object.entries(obj));

console.log(map.get('a'));
console.log(map.get('b'));
console.log(map.get('c'));

// 1
// 1
// 1
複製程式碼

Object.values()獲取物件的屬性值陣列

嗯，寫例子好累，不寫了，各位看官自己搞吧。

Object.getOwnPropertySymbols()獲取Symbol屬性名

上面提到的幾個方法都無法獲取到物件例項的Symbol型別的屬性名，如果需要遍歷這個玩意，需要使用Object.getOwnPropertySymbols()方法：

let father = {
fatherAttr: 1
};

let instance = Object.create(father);

instance.a = 1;
instance.b = 1;
instance.c = 1;

instance[Symbol('I am a handsome boy!')] = 1;

for (let key of Object.keys(instance)) {
console.log(key);
}

// a
// b
// c

for (let key of Object.getOwnPropertySymbols(instance)) {
console.log(key);
}

// Symbol(I am a handsome boy!)
複製程式碼

上面列舉了一些遍歷的方法，一般可以滿足日常的工作需要。但是上面都是ES內建的方法，不能定製化。在這個個性張揚的時代，如果你想搞點特殊，可以自定義一個迭代器；通過一些封裝，甚至可以使用for of迴圈列舉物件。相關內容將在下一篇博文。

以上，如有錯漏，歡迎指正。

@Author：PaperCrane