ES8 之新特性 Object.entries() 和 Object.values() 快速变量两全其美

在前端开发中，我们经常需要对对象进行遍历或者获取对象中的某些属性值。ES8 中新增了两个方法 Object.entries() 和 Object.values()，它们可以快速地帮助我们实现这些操作。

Object.entries()

Object.entries() 方法返回一个给定对象自身可枚举属性的键值对数组。这个数组中的每个元素都是一个形如 [key, value] 的数组，其中 key 是对象的属性名，value 是属性值。

示例代码：

const obj = { a: 1, b: 2, c: 3 };
const entries = Object.entries(obj);

console.log(entries); // [["a", 1], ["b", 2], ["c", 3]]

Object.entries() 方法可以很方便地将对象转换成数组，我们可以使用数组的一些方法，如 forEach()、map()、reduce() 等对其进行操作。

示例代码：

const obj = { a: 1, b: 2, c: 3 };
Object.entries(obj).forEach(([key, value]) => {
  console.log(`${key}: ${value}`);
});
// a: 1
// b: 2
// c: 3

Object.values()

Object.values() 方法返回一个给定对象自身可枚举属性的所有属性值的数组。

示例代码：

const obj = { a: 1, b: 2, c: 3 };
const values = Object.values(obj);

console.log(values); // [1, 2, 3]

Object.values() 方法可以很方便地获取对象中的所有属性值，我们可以使用数组的一些方法，如 forEach()、map()、reduce() 等对其进行操作。

示例代码：

const obj = { a: 1, b: 2, c: 3 };
Object.values(obj).forEach(value => {
  console.log(value);
});
// 1
// 2
// 3

总结

Object.entries() 和 Object.values() 是 ES8 中新增的两个方法，它们可以快速地帮助我们实现对象的遍历和属性值获取。使用它们可以让我们的代码更加简洁和易读，同时也可以提高代码的效率。

在实际开发中，我们可以结合这两个方法进行一些高级操作，比如将对象转换成 Map 对象，或者使用 Object.fromEntries() 方法将数组转换成对象。

const obj = { a: 1, b: 2, c: 3 };
const map = new Map(Object.entries(obj));
console.log(map); // Map { 'a' => 1, 'b' => 2, 'c' => 3 }

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

在使用 Object.entries() 和 Object.values() 方法时，我们需要注意它们不支持非可枚举属性的遍历，同时也不支持原型链上的属性遍历。

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