前言
本篇內容將按照下圖展開：
遍歷Object
Object最常見的遍歷方法方法就是使用 for...in... ，但其有一定的局限性，比如只能遍歷可枚舉屬性。雖然Object無法直接使用 for循環 和 forEach ，但是經過 Reflect.ownKeys /
Object.getOwnPropertyNames /
Object.getOwnPropertySymbols / Object.keys 等方法轉換直接得到Object中key值的集合后，是可以通過 for循環 和 forEach 來遍歷的。
比如現在有個對象，其中有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循環遍歷
使用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循環遍歷
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);
}
輸出結果：
使用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);
}
輸出結果：
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);
}
輸出結果：
尾言
筆者才疏學淺，慌忙之下難免有遺漏或是疏忽，如有錯誤之處，還望各位看官不吝賜教，筆者在此感謝。
