使用 ES9 中的 Object.entries() 和 Object.values() 更快地处理数据

在 JavaScript 中，我们经常需要处理对象和数组，我们可能需要遍历它们、过滤它们、查找它们的键或值等等。在 ES9 中，JavaScript 引入了新的 Object.entries() 和 Object.values() 方法，它们可以让我们处理对象和数组更快捷方便。本文将介绍这两个方法的用法和优势，并且提供实用的代码示例。

Object.entries()

Object.entries() 方法返回一个给定对象自身可枚举属性的键值对数组，数组中每个元素都是一个形如 [key, value] 的数组，其中 key 是对象的键，value 是对象的键所对应的值。这样数组就可以用于快速遍历对象和创建新的 Map 或对象。

下面是 Object.entries() 的简单用法：

const obj = { foo: 'bar', baz: 42 };
console.log(Object.entries(obj));
// [ ['foo', 'bar'], ['baz', 42] ]

我们可以结合解构赋值（destructuring）来访问 key 和 value：

const obj = { foo: 'bar', baz: 42 };
for (const [key, value] of Object.entries(obj)) {
  console.log(`${key}: ${value}`);
}
// logs:
// "foo: bar"
// "baz: 42"

Object.entries() 还可以用于将对象转化成 Map：

const obj = { foo: 'bar', baz: 42 };
const map = new Map(Object.entries(obj));
console.log(map);
// Map { 'foo' => 'bar', 'baz' => 42 } 

Object.values()

Object.values() 方法返回一个给定对象自身可枚举属性值（不含 key）的数组，顺序与 for...in 循环保持一致。

下面是 Object.values() 的简单用法：

const obj = { foo: 'bar', baz: 42 };
console.log(Object.values(obj)); // [ 'bar', 42 ]

Object.values() 可以很方便地计算数组的平均值：

const arr = [10, 20, 30];
const avg = arr.reduce((a, b) => a + b, 0) / arr.length;
console.log(avg); // 20

可以用 Object.values() 来计算平均值，使代码更简洁：

const arr = [10, 20, 30];
const avg = Object.values(arr).reduce((a, b) => a + b, 0) / arr.length;
console.log(avg); // 20

总结

Object.entries() 和 Object.values() 是 ES9 新增的两个方法，它们让处理对象和数组变得更方便。Object.entries() 可以将对象转换成键值对数组，用于遍历和创建 Map 或者对象。Object.values() 可以返回对象的值，便于获取数组的平均值和其他操作。如果你的项目支持 ES9，那么 Object.entries() 和 Object.values() 将是你处理对象和数组的好帮手。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64956e1248841e989429c9c8