JavaScript 中的 Object.entries() 和 Object.values()

Object.entries() 和 Object.values() 方法被引入 JavaScript Object 隨 ECMAScript 2017 (ES8) 發布的構造函數。讓我們快速了解一下這些有用的方法。

Object.entries() 方法

Object.entries() 方法接受一個對像作為參數，並返回一個包含鍵值對數組的數組：

const birds = {
    owl: '🦉',
    eagle: '🦅',
    duck: '🦆'
};

const entries = Object.entries(birds);
console.log(entries);

// [['owl', '🦉'], ['eagle', '🦅'], ['duck', '🦆']]

數組元素的順序不依賴於對象的定義方式。順序與 for...in 提供的順序相同 循環。

遍歷一個對象

我們可以使用 Object.entries() 也可以遍歷對象：

// using `for...of` loop
for (const [key, value] of Object.entries(birds)) {
    console.log(`${key}: ${value}`);
}

// owl: 🦉
// eagle: 🦅
// duck: 🦆

// using array destructuring
Object.entries(birds).forEach(([key, value]) => console.log(`${key}: ${value}`));

// owl: 🦉
// eagle: 🦅
// duck: 🦆

將對象轉換為地圖

由於 Map 構造函數也採用 entries 的可迭代對象 初始化地圖對象，Object.entries() 方法可用於從對象創建地圖：

const map = new Map(Object.entries(birds));

console.log(map.size); // 3
console.log(map.has('owl')); // true
console.log(map.get('duck')); // 🦆

Object.values() 方法

Object.values() 方法非常像 Object.entries() , 但只返回與 for...in 提供的順序相同的可枚舉字符串鍵屬性的值 循環：

const foods = {
    cake: '🍰',
    pizza: '🍕',
    candy: '🍬',
    icecream: '🍨'
};

const values = Object.values(foods);
console.log(values);

// ['🍰', '🍕', '🍬', '🍨']

Object.values() 和 Object.entries() 不遵循原型鏈，只遍歷直接添加到給定對象的屬性。他們也忽略了所有不可枚舉的屬性：

Object.defineProperty(foods, 'sushi', {
    value: '🍣',
    writable: true,
    configurable: true,
    enumerable: false
});

console.log(Object.values(foods));

// ['🍰', '🍕', '🍬', '🍨']

將對象轉換為集合

由於 Set 構造函數接受一個可迭代的，帶有 Object.values() ，我們可以很容易地轉換一個 Object 到 Set ：

const set = new Set(Object.values(foods));

console.log(set.size); // 4
console.log(set.has('🍨')); // true