ES6+ Object.entries()

1. 前言

前兩節(jié)我們學(xué)習(xí)了獲取可枚舉對(duì)象上屬性和屬性值作為一個(gè)數(shù)組的方法 Object.keys() 和 Object.values()，但是我們想把鍵值對(duì)同時(shí)獲取到怎么辦呢？這時(shí) ES6 提供了 Object.entries() 方法用于獲取可枚舉對(duì)象上的屬性和值的數(shù)組。

2. 方法詳情

Object.entries() 會(huì)返回一個(gè)二維數(shù)組，數(shù)組中的每一項(xiàng)是可枚舉對(duì)象上的屬性和值的數(shù)組。

2.1 語(yǔ)法使用

Object.entries(obj);

2.2 基本使用

返回結(jié)果是一個(gè)二維數(shù)組，數(shù)組中的每個(gè)元素是一個(gè)包含兩個(gè)元素的數(shù)組，第一個(gè)元素是屬性，第二個(gè)元素是屬性對(duì)應(yīng)的值。

var obj = {a: 1, b: 2, c: 3};
console.log(Object.entries(obj))
// [['a', 1], ['b', 3], ['c', 3]]

如果傳入的參數(shù)是數(shù)字或布爾值時(shí)，則返回一個(gè)空數(shù)組

Object.entries(50)       // []
Object.entries(false)    // []

對(duì) values() 返回?cái)?shù)組的順序，會(huì)按照屬性的數(shù)值大小，從小到大排序。

var obj = {10: 'a', 1: 'b', 7: 'c'};
console.log(Object.entries(obj))
// [["1", "b"], ["7", "c"], ["10", "a"]]

上面的代碼中，屬性名為數(shù)值的屬性，是按照數(shù)值大小，從小到大遍歷的，因此返回值是一個(gè)排序后的二維數(shù)組。

values() 傳入的對(duì)象如果是一個(gè)字符串時(shí)，則會(huì)把字符拆成數(shù)組中的單個(gè)項(xiàng)，如下：

console.log(Object.entries('abc'))
// [["0", "a"], ["1", "b"], ["2", "c"]]

3. 案例

3.1 用于 for…of 循環(huán)獲取對(duì)象上的鍵值對(duì)

Object.entries() 在開(kāi)發(fā)中有很好的用途，可以同時(shí)獲取對(duì)象的鍵值對(duì)進(jìn)行使用。

其實(shí)像使用 Object.keys()、 Object.values() 和 Object.entries() 都是為了遍歷對(duì)象，然后對(duì)對(duì)象中的元素進(jìn)行操作，下面我們來(lái)看一下 Object.entries() 在 for 循環(huán)中的使用。

var obj = { name: 'imooc', age: 7, lesson: 'ES6 Wiki' };
for (let i = 0; i < Object.entries(obj).length; i++) {
  var [key, value] = Object.entries(obj)[i]
  console.log(key, value);
}

上面的代碼中我們可以看出，在循環(huán)體內(nèi)可以通過(guò)結(jié)構(gòu)的方式獲取對(duì)象的屬性和值。使用 for 循環(huán)時(shí)我們要對(duì)循環(huán)的每一步進(jìn)行處理。

在下面的章節(jié)中我們會(huì)學(xué)到 for...of 循環(huán)，它的功能強(qiáng)大，能遍歷可迭代的對(duì)象，可以替代 for、 forEach 等循環(huán)，并具有擴(kuò)展性。

let obj = { name: 'imooc', age: 7, lesson: 'ES6 Wiki' };

for (let [key, value] of Object.entries(obj)) {
  console.log(`${key}: ${value}`);
}
// name: imooc
// age: 7,
// lesson: ES6 Wiki

上面的代碼中，我們不用在 for 循環(huán)中處理每一項(xiàng)，可以在循環(huán)時(shí)直接解構(gòu)出 Object.entries() 的值。這樣就可以遍歷出對(duì)象的鍵值對(duì)。

3.2 把對(duì)象轉(zhuǎn)為 Map 結(jié)構(gòu)

Object.entries() 還有一個(gè)最重要的功能，就是可以把指定的對(duì)象直接轉(zhuǎn)化成 ES6 的 Map 數(shù)據(jù)結(jié)構(gòu)。

ES6 提供了新的 Map 數(shù)據(jù)結(jié)構(gòu)，它類(lèi)似于對(duì)象，也是鍵值對(duì)的集合，但是 Map 的鍵可以是任意類(lèi)型（原始類(lèi)型和對(duì)象類(lèi)型），并且提供了 set 、 get 方法去設(shè)置和獲取對(duì)象的值。如果想把一個(gè)對(duì)象轉(zhuǎn)為 Map 結(jié)構(gòu)，可以借助 Object.entries() 來(lái)實(shí)現(xiàn)。

var obj = { name: 'imooc', age: 7 };
var map = new Map(Object.entries(obj));
console.log(map)            // Map(2) {"name" => "imooc", "age" => 7}
console.log(map.get(name))  // imooc

上面的代碼中，很好地把已有的對(duì)象，轉(zhuǎn)化為 Map 對(duì)象，而且可以使用 Map 的方法獲取對(duì)象上的數(shù)據(jù)。

4. Object.fromEntries()

Object.fromEntries() 是 Object.entries() 的反轉(zhuǎn)函數(shù)，這樣理解起來(lái)就比較輕松。它接收的是一個(gè)可迭代的對(duì)象，類(lèi)似 Array、Map 或者其它實(shí)現(xiàn)了可迭代協(xié)議的對(duì)象，結(jié)果返回一個(gè)新的對(duì)象。

4.1 數(shù)組轉(zhuǎn)化為對(duì)象

將一個(gè)帶有鍵值對(duì)的數(shù)組轉(zhuǎn)化成對(duì)象。

var arr = [ ['a', '0'], ['b', '1'], ['c', '2'] ];
var obj = Object.fromEntries(arr);
console.log(obj); // {a: "0", b: "1", c: "2"}

上面的代碼中，arr 是一個(gè)二維數(shù)組，子數(shù)組中的每一個(gè)項(xiàng)包含鍵和值，只有這樣的數(shù)組類(lèi)型才可以轉(zhuǎn)化為對(duì)象。

4.2 Map 轉(zhuǎn)化為對(duì)象

Object.fromEntries() 可以直接將 Map 結(jié)構(gòu)的對(duì)象轉(zhuǎn)化為一個(gè)正常的對(duì)象，在開(kāi)發(fā)中是一個(gè)非常常用的方法。

var map = new Map();
map.set('name', 'imooc');
map.set('age', 7);
console.log(map);     // Map(2) {"name" => "imooc", "age" => 7}
var obj = Object.fromEntries(map);
console.log(obj);     // {name: "imooc", age: 7}

上面的代碼中，先定義一個(gè) Map 數(shù)據(jù)結(jié)構(gòu)，并給 map 添加 name 和 age 兩個(gè)屬性，然后使用 Object.fromEntries() 方法對(duì) map 進(jìn)行操作，最后可以得到一個(gè)對(duì)象。

4. 小結(jié)

本節(jié)主要講解了 ES6 提供了獲取可枚舉對(duì)象上的鍵值對(duì)的方法，這個(gè)方法在開(kāi)發(fā)中很常用，主要用于 for...of 循環(huán)和 Map 數(shù)據(jù)結(jié)構(gòu)的轉(zhuǎn)化。另外，Object.fromEntries() 是 Object.entries() 的反轉(zhuǎn)函數(shù)，他們的操作是相反的，主要用在對(duì) Map 數(shù)據(jù)結(jié)構(gòu)轉(zhuǎn)換為普通的對(duì)象結(jié)構(gòu)。