ECMAScript 2017：使用 Object.values/Object.entries 遍历对象

在 ECMAScript 2017 中，引入了新的遍历对象的方式，即 Object.values 和 Object.entries。这两个方法可以大大简化我们在 JavaScript 中遍历对象的过程，并且使得代码结构更加优雅、清晰。

Object.values 和 Object.entries 的说明

首先，我们需要了解 Object.values 和 Object.entries 的返回值。这两个方法都是返回一个数组，数组中的元素是对象的值或键值对。

以 Object.values 为例，它返回的是一个由对象的值组成的数组。例如：

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

而 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.values 和 Object.entries 的应用

接下来，我们可以看一下在实际代码中 Object.values 和 Object.entries 的应用。

1. 遍历对象

当我们需要遍历一个对象时，使用 Object.values 和 Object.entries 可以大大简化代码。例如，我们可以通过 Object.values 获取对象的值，并使用 forEach 方法遍历：

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

同样的，我们可以使用 Object.entries 获取键值对，并使用 forEach 遍历：

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

上述代码中，我们使用了解构赋值可以更加优雅地获取键值对：

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

2. 获取对象的值

当我们需要获取一个对象中的所有值时，使用 Object.values 可以更加简单。例如：

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

3. 判断对象中是否存在某个值或键值对

当我们需要判断一个对象中是否存在某个值或键值对时，使用 Object.values 和 Object.entries 更加方便。例如：

const obj = { a: 1, b: 2, c: 3 };
const hasValue = Object.values(obj).includes(1);
console.log(hasValue);      // true
const hasEntry = Object.entries(obj).find(entry => entry[0] === "a");
console.log(hasEntry);      // ["a", 1]

上述代码中，我们可以通过 Object.values 快速判断对象中是否存在某个值，并使用 includes 方法查找。我们也可以使用 Object.entries 快速查找是否存在某个键值对，使用 find 方法查找。

总结

在 ECMAScript 2017 中，引入了 Object.values 和 Object.entries 这两个方法，它们可以大大简化我们在 JavaScript 中遍历对象的过程，并且使得代码结构更加优雅、清晰。通过本文的讲解，我们可以掌握 Object.values 和 Object.entries 的基本用法，并了解了它们在实际代码中的应用。希望能够对大家在前端开发中遍历对象时有所帮助。

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