ES7 中的 Object.values() 和 Object.entries() 方法详解

在 ECMAScript 2016（又称 ES7）中，新增了 Object.values() 和 Object.entries() 方法，为开发者提供了更便捷的操作对象属性的方式。这两个方法不仅可以简化代码，还可以提高程序的运行效率。

Object.values() 方法

Object.values() 方法返回一个对象的所有可枚举属性值的数组。这个方法是 ES7 中新增的，所以在使用时需要注意浏览器的支持情况。

语法

Object.values(obj)

其中，obj 是要返回属性值的对象。

示例

// www.javascriptcn.com code example
const clubs = {
  "Real Madrid": "Spain",
  "Manchester United": "England",
  "AC Milan": "Italy",
  "Bayern Munich": "Germany",
  "Boca Juniors": "Argentina"
};

const clubsValues = Object.values(clubs);

console.log(clubsValues);
// 输出 ["Spain", "England", "Italy", "Germany", "Argentina"]

在上面的示例代码中，我们传入了 clubs 对象，并使用 Object.values() 方法获取了它的所有属性值，然后将其打印到控制台中。

Object.entries() 方法

Object.entries() 方法返回一个对象的所有可枚举属性键值对的数组。这个方法也是 ES7 中新增的，所以在使用时需要注意浏览器的支持情况。

语法

Object.entries(obj)

其中，obj 是要返回属性键值对的对象。

示例

// www.javascriptcn.com code example
const clubs = {
  "Real Madrid": "Spain",
  "Manchester United": "England",
  "AC Milan": "Italy",
  "Bayern Munich": "Germany",
  "Boca Juniors": "Argentina"
};

const clubsEntries = Object.entries(clubs);

console.log(clubsEntries);
// 输出 [["Real Madrid", "Spain"], ["Manchester United", "England"], ["AC Milan", "Italy"], ["Bayern Munich", "Germany"], ["Boca Juniors", "Argentina"]]

在上面的示例代码中，我们传入了 clubs 对象，并使用 Object.entries() 方法获取了它的所有属性键值对，然后将其打印到控制台中。

应用场景

Object.values() 和 Object.entries() 方法可用于许多场景，例如：

• 遍历对象的值或键值对
• 过滤对象的值或键值对
• 计算对象的值或键值对的总和、平均数等

下面的示例展示了如何使用 Object.values() 和 Object.entries() 方法来遍历一个对象、过滤它的值，并计算它们的总和：

// www.javascriptcn.com code example
const scores = {
  "John": 90,
  "Jane": 95,
  "Mike": 80,
  "Lucy": 85
};

const passingScores = Object.values(scores).filter(score => score >= 85);

const totalScore = passingScores.reduce((sum, score) => sum + score);

console.log(totalScore);
// 输出 270

在上面的示例代码中，我们传入了一个包含学生成绩的 scores 对象，并使用 Object.values() 方法获取了它的所有属性值，然后用 filter() 方法过滤了及格的成绩，并用 reduce() 方法计算了它们的总和。

结语

Object.values() 和 Object.entries() 方法的出现丰富了 JavaScript 对象的操作方式，可以为开发者提供更加便捷和高效的编程体验。在编写正式代码时，我们可以结合具体的业务场景，灵活运用这两个方法，从而提高整体的程序效率。

Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/67cf5a23e46428fe9ea84d22