在前端开发中，使用对象是非常常见的。随着 ECMAScript 新特性的不断增加，我们可以更加方便地操作对象。其中，ES8 引入了两个有用的新操作：Object.values 和 Object.entries。本文将详细介绍这两个操作的用法，以及对前端开发的指导意义。
Object.values
Object.values 方法返回一个给定对象的所有可枚举属性值的数组。该方法接收一个对象作为参数，返回该对象所有可枚举属性的值，返回的数组元素顺序与使用 for...in 循环遍历该对象时返回的顺序相同。
下面是 Object.values 方法的示例代码：
const obj = { a: 10, b: 20, c: 30 };
const arr = Object.values(obj);
console.log(arr); // [10, 20, 30]在上面的示例代码中，我们定义了一个对象 obj，其中包含三个属性。我们使用 Object.values 方法将 obj 的所有属性值作为一个数组返回，并将其赋值给 arr 变量。最后，使用 console.log 方法输出 arr 变量的值，结果为 [10, 20, 30]。
可以看到，Object.values 方法非常方便地将一个对象的属性值以数组的形式返回。这对于我们需要对对象属性值进行操作时非常有用。
Object.entries
Object.entries 方法返回一个给定对象的所有可枚举属性的键值对数组。该方法接收一个对象作为参数，返回由该对象所有可枚举属性的键值对组成的二维数组，每个键值对数组包含两个元素，第一个元素表示属性名，第二个元素表示属性值。返回的数组元素顺序与使用 for...in 循环遍历该对象时返回的顺序相同。
下面是 Object.entries 方法的示例代码：
const obj = { a: 10, b: 20, c: 30 };
const arr = Object.entries(obj);
console.log(arr); // [['a', 10], ['b', 20], ['c', 30]]在上面的示例代码中，我们定义了一个对象 obj，其中包含三个属性。我们使用 Object.entries 方法将 obj 的所有属性以键值对的形式返回，并将其赋值给 arr 变量。最后，使用 console.log 方法输出 arr 变量的值，结果为 [['a', 10], ['b', 20], ['c', 30]]。
可以看到，Object.entries 方法非常方便地将一个对象的属性以键值对的形式返回。这对于我们需要对对象属性进行遍历、过滤等操作时非常有用。
指导意义
Object.values 和 Object.entries 两个方法的出现，不仅方便了开发者对对象属性值的操作，还可以极大地减少代码量。在实际开发中，我们可以利用这两个方法将对象属性进行过滤、遍历等操作，提升代码的可读性和可维护性。
下面是一个使用 Object.entries 方法遍历对象属性的示例代码：
const obj = { a: 10, b: 20, c: 30 };
Object.entries(obj).forEach(([key, value]) => {
console.log(`${key}: ${value}`);
});在上面的示例代码中，我们使用 Object.entries 方法将 obj 对象的所有属性以键值对的形式返回。然后，我们使用 forEach 方法遍历该数组，对每个键值对进行输出。上面的示例代码输出结果为：
a: 10 b: 20 c: 30
可以看到，使用 Object.entries 方法可以很方便地遍历对象的属性。
总结
Object.values 和 Object.entries 两个方法是 ES8 新特性中非常有用的操作。它们可以方便地将对象的属性值和键值对以数组形式返回，极大地减少了我们处理对象时的代码量。通过学习这两个方法，可以提升我们对 JavaScript 对象的操作水平。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64576114968c7c53b0a1adc9