目錄

• 前言
• 1. 使用 for...of 遍歷普通物件
  
• 2. 普通物件與 Map 物件相互轉換
  
• 總結
• 參考

前言

平時我們經常會用到 Object 類上的靜態方法，例如 Object.keys 、Object.values 、Object.assign 等等，但可能很少用到 Object.entries 這個方法，這篇文章就來講解 Object.entries 方法的兩個小技巧。

作用

Object.entries() 方法返回一個給定物件自身可列舉屬性的鍵值對陣列，其排列與使用 for…in 迴圈遍歷該物件時返回的順序一致（區別在於 for-in 迴圈也列舉原型鏈中的屬性）。

示例

const obj = { foo: 'bar',baz: 42 };
console.log(Object.entries(obj)); // [ ['foo','bar'],['baz',42] ]

// array like object
const obj = { 0: 'a',1: 'b',2: 'c' };
console.log(Object.entries(obj)); // [ ['0','a'],['1','b'],['2','c'] ]

// array like object with random key ordering
const anObj = { 100: 'a',2: 'b',7: 'c' };
console.log(Object.entrie
 
s(anObj)); // [ ['2',['7','c'],['100','a'] ]

// getFoo is property which isn't enumerable
const myObj = Object.create({},{ getFoo: { value() { return this.foo; } } });
myObj.foo = 'bar';
console.log(Object.entries(myObj)); // [ ['foo','bar'] ]

// non-object argument will be coerced to an object
console.log(Object.entries('foo')); // [ ['0','f'],'o'],'o'] ]

// iterate through key-value gracefully
const obj = { a: 5,b: 7,c: 9 };
for (const [key,value] of Object.entries(obj)) {
  console.log(`${key} ${value}`); // "a 5","b 7","c 9"
}

// Or,using array extras
Object.entries(obj).forEach(([key,value]) => {
console.log(`${key} ${value}`); // "a 5","c 9"

1. 使用 for...of 遍歷普通物件

很多初學前端的小夥伴可能都寫過下面這個程式碼：

let obj = {
  a: 1,b: 2
}

for (let value of obj) {
  // ...
}

但是執行一下就發現，哦吼，報錯了：

Uncaught TypeError: obj is not iterable

於是乎，遍歷普通物件就變成了清一色的 for...in 遍歷。但由於 for...in 不光會遍歷物件的自有屬性，還會遍歷到物件原型上，因此我們在使用的時候還需要加一個過濾，例如：

for (let key in obj) {
  if (Object.prototype.hasOwnProperty.call(obj,key)) {
    // ...
  }
}

可以看到這樣寫很不優雅。之所以普通物件不能用 for...of 遍歷，是因為普通物件沒有實現 inNqHwqQehkterator 介面（關於 的迭代器會專門寫一篇文章講解）。而 JS 陣列是實現了 iterator 介面的，因此通過 Object.entries 得到的鍵值對陣列就可以使用 for...of 遍歷：

for (let [key,value] of Object.entries(obj)) {
  // ...
}

Object.entries 會返回物件自身可列舉屬性的鍵值對陣列，不包含原型上的屬性

2. 普通物件與 Map 物件相互轉換

看到專案中將普通物件轉為 Map 物件，還在使用 for...in 遍歷：

let obj = {
  a: 1,b: 2
}

let map = new Map();

for (let keyhttp://www.cppcns.com in obj) {
  if (Object.prototype.hasOwnProperty.call(obj,key)) {
    map.set(key,obj[key]);
  }
}

實際上 Map 構造器可以接受一個鍵值對陣列初始化，這就意味著可以使用 Object.entries 將普通物件轉為 Map 物件：

let map = new Map(Object.entries(obj));

那麼 Map 物件如何轉回普通物件呢？還使用遍歷嗎？不需要，可以使用 Object.fromEntries 靜態方法來轉換：

let obj = Object.fromEntries(map);

說到這裡，很多小夥伴可能還是沒搞清楚普通物件、鍵值對陣列、Map 物件的轉換關係，我用一張圖總結一下：

Object.entries和Object.fromEntries 是兩個相反的操作

總結

到此這篇關於中你不知道的Object.entries用法的文章就介紹到這了,更多相關j客棧s Object.entries用法內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！

參考

• Object.entries() - MDN 文件
• Map() 建構函式 - MDN 文件