ES7 中的 Object.values 和 Object.entries 方法

在前端开发中，经常会用到对象，而 ES7 中新增的 Object.values 和 Object.entries 方法能够更方便地遍历对象的属性和值，增强了开发效率和代码可读性。

Object.values 方法

Object.values 方法返回一个由对象的属性值组成的数组，顺序与 for...in 循环遍历的顺序一致。

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

在遍历对象属性时，Object.values 方法可以代替 for...in 循环和 Object.keys 方法。

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

Object.entries 方法

Object.entries 方法返回一个由对象的属性键值对组成的数组，每个键值对是一个数组，第一个元素是属性名，第二个元素是属性值。

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

在遍历对象属性时，Object.entries 方法可以代替 for...in 循环和 Object.keys 方法，同时获取属性名和属性值。

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

应用场景

Object.values 和 Object.entries 方法可以用于对象的遍历、过滤、转换等操作，增强了代码的可读性和灵活性。

遍历对象

// javascriptcn.com 代码示例
const obj = { a: 1, b: 2, c: 3 };
for (const value of Object.values(obj)) {
  console.log(value);
}
// 1
// 2
// 3

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

过滤属性

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

转换为数组

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

总结

ES7 中的 Object.values 和 Object.entries 方法能够更方便地遍历对象的属性和值，增强了开发效率和代码可读性。在实际开发中，可以根据需求灵活运用这两个方法，提高代码质量和开发效率。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6570da13d2f5e1655d98377e