前言
本篇內容將按照下圖展開：
遍歷Object
Object最常見的遍歷方法方法就是使用for...in...，但其有一定的局限性，比如只能遍歷可枚舉屬性。雖然Object無法直接使用for循環和forEach，但是經過Reflect.ownKeys / Object.getOwnPropertyNames / Object.getOwnPropertySymbols / Object.keys等方法轉換直接得到Object中key值的集合后，是可以通過for循環和forEach來遍歷的。
| 方法 | 獲取屬性種類 |
|---|---|
| Object.keys | 可枚舉屬性 |
| Object.getOwnPropertySymbols | Symbol屬性 |
| Object.getOwnPropertyNames | 可枚舉屬性和不可枚舉屬性 |
| Reflect.ownKeys | 可枚舉屬性、不可枚舉屬性和Symbol屬性 |
比如現在有個對象，其中有3個屬性，分別是可枚舉屬性、不可枚舉屬性和Symbol屬性：
let person = {
name : 'xiaoming'
}
person[Symbol('sex')] = 'man';
Object.defineProperty(person, 'age', {
value : 18,
writable: true,
configurable: false,
enumerable: false
})
使用for...in...遍歷
for(let key in person){
console.log('key : ' + key + ' , value : ' + person[key]);
}
輸出結果：
使用Object.keys + for循環遍歷
let keys2 = Object.keys(person);
for(let index = 0, length = keys2.length; index < length; index++){
let key = keys2[index];
let value = person[key];
console.log('key : ' + key + ' , value : ' + value);
}
輸出結果：
使用Object.getOwnPropertyNames + for循環遍歷
let names = Object.getOwnPropertyNames(person);
for(let index = 0, length = names.length; index < length; index++){
let key = names[index];
let value = person[key];
console.log('key : ' + key + ' , value : ' + value);
}
輸出結果：
使用Object.getOwnPropertySymbols + for循環遍歷
let symbols = Object.getOwnPropertySymbols(person);
for(let index = 0, length = symbols.length; index < length; index++){
let key = symbols[index];
let value = person[key];
typeof key === 'symbol' ? key = Symbol.prototype.toString.call(key) : '';
console.log('key : ' + key + ' , value : ' + value);
}
輸出結果：
使用Reflect.ownKeys + for循環遍歷
let keys = Reflect.ownKeys(person);
for(let index = 0, length = keys.length; index < length; index++){
let key = keys[index];
let value = person[key];
typeof key === 'symbol' ? key = Symbol.prototype.toString.call(key) : '';
console.log('key : ' + key + ' , value : ' + value);
}
輸出結果：
遍歷Array
遍歷Array可以使用for循環，也可以使用for...in...和for...of...，並且Array的原型中還有forEach函數和map函數可用來遍歷Array對象。
測試數據：
let arr = ['item_1', 'item_2', 'item_3', 'item_4', 'item_5'];
使用for...in...遍歷
for(let index in arr){
console.log('index : ' + arr[index]);
}
輸出結果：
使用for循環遍歷
for(let index = 0, length = arr.length; index < length; index += 1){
console.log('index : ' + arr[index]);
}
輸出結果：
使用Array.prototype.forEach遍歷
Array.prototype.forEach.call(arr, (value) => {
console.log('value : ' + value);
})
輸出結果：
使用Array.prototype.map遍歷
Array.prototype.map.call(arr, (value) => {
console.log('value : ' + value);
})
輸出結果：
map方法會根據原數組中的每個元素調用函數后返回的數據創建一個新數組。
使用for...of...遍歷
for(let value of arr){
console.log('value : ' + value);
}
輸出結果：
遍歷Map
遍歷Map一般是兩種，一是直接使用for...of...或者Map.prototype.forEach，二是通過Map.prototype.entries / Map.prototype.keys / Symbol.iterator獲取Map對象的迭代器，再通過for...of...來遍歷迭代器。
測試數據：
let map = new Map();
map.set('key_1', 'value_1');
map.set('key_2', 'value_2');
map.set('key_3', 'value_3');
map.set('key_4', 'value_4');
map.set('key_5', 'value_5');
使用for...of...遍歷
for(let [key, value] of map){
console.log('key : ' + key + ' value : ' + value);
}
輸出結果：
使用Map.prototype.forEach遍歷
Map.prototype.forEach.call(map, (value, key) => {
console.log('key : ' + key + ' value : ' + value);
})
輸出結果：
使用Map.prototype.entries + for...of...遍歷
let iterator = Map.prototype.entries.call(map);
for(let item of iterator){
console.log('item : ' + item);
}
輸出結果：
使用Map.prototype.keys + for...of...遍歷
let keys = Map.prototype.keys.call(map);
for(let key of keys){
console.log('key : ' + key + ' value : ' + Map.prototype.get.call(map, key));
}
輸出結果：
使用Symbol.iterator + for...of...遍歷
let iterator2 = map[Symbol.iterator]();
for(let item of iterator2){
console.log('item : ' + item);
}
輸出結果：
遍歷Set
遍歷Set和遍歷Map差不多，Map有的方法Set都有，但是有一個差別：Map是以鍵值對的形式去存儲數據的，其中鍵是唯一；而Set存儲的只有值，其值是唯一的。
遍歷Set一般也是兩種，一是直接使用for...of...或者Set.prototype.forEach，二是通過Set.prototype.values / Symbol.iterator獲取Map對象的迭代器，再通for...of...來遍歷迭代器
像Set.prototype.entries / Set.prototype.keys雖然也可以達到遍歷Set對象的效果，但是由於其將value當做key，筆者感覺這兩個方法與上文中Map.prototype.entries / Map.prototype.keys邏輯上差別不大，故而不再贅述。
測試數據：
let set = new Set();
set.add('value_1');
set.add('value_2');
set.add('value_3');
set.add('value_4');
set.add('value_5');
使用for...of...遍歷
for(let item of set){
console.log('item : ' + item);
}
輸出結果：
使用Set.prototype.forEach遍歷
let iterator = Set.prototype.values.call(set);
for(let value of iterator){
console.log('value : ' + value);
}
輸出結果：
使用Set.prototype.values + for...of...遍歷
let iterator = Set.prototype.values.call(set);
for(let value of iterator){
console.log('value : ' + value);
}
輸出結果：
使用Symbol.iterator + for...of...遍歷
let iterator2 = set[Symbol.iterator]();
for(let value of iterator2){
console.log('value : ' + value);
}
輸出結果：
尾言
筆者才疏學淺，慌忙之下難免有遺漏或是疏忽，如有錯誤之處，還望各位看官不吝賜教，筆者在此感謝。
參考
作者：Fatman
博客園地址：https://www.cnblogs.com/liujingjiu
CSDN地址：https://blog.csdn.net/qq_35508835
版權歸 Fatman所有，歡迎保留原文鏈接進行轉載：)