在 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(([key, value]) => {
console.log(key, value);
});
// "a" 1
// "b" 2
// "c" 32. 获取对象的值
当我们需要获取一个对象中的所有值时，使用 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