天天看點
傳回

JavaScript周遊對象方法總結

本文主要是對JavaScript對象周遊方法做一個總結，比如Object最常見的周遊方法方法就是使用for...in...，但其有一定的局限性，比如隻能周遊可枚舉屬性。雖然Object無法直接使用for循環和forEach，但是經過Reflect.ownKeys / Object.getOwnPropertyNames / Object.getOwnPropertySymbols / Object.keys等方法轉換直接得到Object中key值的集合後，是可以通過for循環和forEach來周遊的

前言

本篇内容将按照下圖展開：

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]);
}

輸出結果：

JavaScript周遊對象方法總結

使用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);
}

輸出結果：

JavaScript周遊對象方法總結

使用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);
}

輸出結果：

JavaScript周遊對象方法總結

使用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);
}

輸出結果：

JavaScript周遊對象方法總結

使用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);
}

輸出結果：

JavaScript周遊對象方法總結

周遊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]);
}

輸出結果：

JavaScript周遊對象方法總結

使用for循環周遊 

for(let index = 0, length = arr.length; index < length; index += 1){
    console.log(\'index : \' + arr[index]);
}

輸出結果：

JavaScript周遊對象方法總結

使用Array.prototype.forEach周遊 

Array.prototype.forEach.call(arr, (value) => {
    console.log(\'value : \' + value);
})

輸出結果：

JavaScript周遊對象方法總結

使用Array.prototype.map周遊 

Array.prototype.map.call(arr, (value) => {
    console.log(\'value : \' + value);
})

輸出結果：

JavaScript周遊對象方法總結

map方法會根據原數組中的每個元素調用函數後傳回的資料建立一個新數組。

使用for...of...周遊 

for(let value of arr){
    console.log(\'value : \' + value);
}

輸出結果：

JavaScript周遊對象方法總結

周遊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);
}

輸出結果：

JavaScript周遊對象方法總結

使用Map.prototype.forEach周遊 

Map.prototype.forEach.call(map, (value, key) => {
    console.log(\'key : \' + key + \' value : \' + value);
})

輸出結果：

JavaScript周遊對象方法總結

使用Map.prototype.entries + for...of...周遊 

let iterator = Map.prototype.entries.call(map);

for(let item of iterator){
    console.log(\'item : \' + item);
}

輸出結果：

JavaScript周遊對象方法總結

使用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));
}

輸出結果：

JavaScript周遊對象方法總結

使用Symbol.iterator + for...of...周遊 

let iterator2 = map[Symbol.iterator]();

for(let item of iterator2){
    console.log(\'item : \' + item);
}

輸出結果：

JavaScript周遊對象方法總結

周遊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);
}

輸出結果：

JavaScript周遊對象方法總結

使用Set.prototype.forEach周遊 

let iterator = Set.prototype.values.call(set);

for(let value of iterator){
    console.log(\'value : \' + value);
}

輸出結果：

JavaScript周遊對象方法總結

使用Set.prototype.values + for...of...周遊 

let iterator = Set.prototype.values.call(set);

for(let value of iterator){
    console.log(\'value : \' + value);
}

輸出結果：

JavaScript周遊對象方法總結

使用Symbol.iterator + for...of...周遊 

let iterator2 = set[Symbol.iterator]();

for(let value of iterator2){
    console.log(\'value : \' + value);
}

輸出結果：

JavaScript周遊對象方法總結

尾言

筆者才疏學淺，慌忙之下難免有遺漏或是疏忽，如有錯誤之處，還望各位看官不吝賜教，筆者在此感謝。

參考

  • MDN - Object
  • MDN - Array
  • MDN - Map
  • MDN - Set

作者：Fatman

部落格園位址：https://www.cnblogs.com/liujingjiu

CSDN位址：https://blog.csdn.net/qq_35508835

版權歸Fatman所有，歡迎保留原文連結進行轉載：)

上一篇: 利用Apache部署靜态網站（一）
下一篇: 萬字長文詳解如何搭建一個屬于自己的部落格（純手工搭建