JavaScript中你不知道的Object.entries用法
前言
平時我們經常會用到 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.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 遍歷普通對象
很多初學前端的小夥伴可能都寫過下面這個代碼:
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 遍歷,是因為普通對象沒有實現 iterator 接口(關於 JS 的迭代器會專門寫一篇文章講解)。而 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 key 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 是兩個相反的操作
總結
到此這篇關於JavaScript中你不知道的Object.entries用法的文章就介紹到這瞭,更多相關js Object.entries用法內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
參考
- Object.entries() – MDN 文檔
- Map() 構造函數 – MDN 文檔
推薦閱讀:
- es6新增對象的實用方法總結
- ES6的循環與可迭代對象示例詳解
- Object.keys()、Object.values()、Object.entries()用法總結
- JavaScript 賦值,淺復制和深復制的區別
- javascript遍歷對象的五種方式實例代碼