快捷導(dǎo)航

JavaScript中你不知道的Object.entries用法

更新時間：2021年10月09日 11:18:53 作者：GreenTea

大家應(yīng)該都知道,Object.entries()方法返回一個給定對象自身可枚舉屬性的鍵值對數(shù)組，其排列與使用 for...in 循環(huán)遍歷該對象時返回的順序一致,這篇文章主要給大家介紹了關(guān)于JavaScript中你不知道的Object.entries用法的相關(guān)資料,需要的朋友可以參考下

前言

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

作用

Object.entries() 方法返回一個給定對象自身可枚舉屬性的鍵值對數(shù)組，其排列與使用 for…in 循環(huán)遍歷該對象時返回的順序一致（區(qū)別在于 for-in 循環(huán)也枚舉原型鏈中的屬性）。

示例

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.entries(anObj)); // [ ['2', 'b'], ['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'], ['1', 'o'], ['2', '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", "b 7", "c 9"

1. 使用 for...of 遍歷普通對象

很多初學(xué)前端的小伙伴可能都寫過下面這個代碼：

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

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

但是運(yùn)行一下就發(fā)現(xiàn)，哦吼，報錯了：

Uncaught TypeError: obj is not iterable

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

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

可以看到這樣寫很不優(yōu)雅。之所以普通對象不能用 for...of 遍歷，是因為普通對象沒有實現(xiàn) iterator 接口（關(guān)于 JS 的迭代器會專門寫一篇文章講解）。而 JS 數(shù)組是實現(xiàn)了 iterator 接口的，因此通過 Object.entries 得到的鍵值對數(shù)組就可以使用 for...of 遍歷：

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

Object.entries 會返回對象自身可枚舉屬性的鍵值對數(shù)組，不包含原型上的屬性

2. 普通對象與 Map 對象相互轉(zhuǎn)換

看到項目中將普通對象轉(zhuǎn)為 Map 對象，還在使用 for...in 遍歷：

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

let map = new Map();

for (let key in obj) {
  if (Object.prototype.hasOwnProperty.call(obj, key)) {
    map.set(key, obj[key]);
  }
}

實際上 Map 構(gòu)造器可以接受一個鍵值對數(shù)組初始化，這就意味著可以使用 Object.entries 將普通對象轉(zhuǎn)為 Map 對象：