JavaScript遍歷物件方法總結

_Fatman發表於2021-04-24
JavaScript物件

前言

本篇內容將按照下圖展開：
在這裡插入圖片描述

遍歷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所有，歡迎保留原文連結進行轉載：)

相關文章