在 ECMAScript 2017 (ES8) 中，我们可以使用两个新的方法来操作对象：Object.values() 和 Object.entries()。这两个方法非常有用，可以帮助我们更方便地操作对象。
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() 方法返回的数组将包含该对象的引用。
const obj = {
a: { value: 1 },
b: { value: 2 },
c: { value: 3 }
};
const values = Object.values(obj);
console.log(values); // [{ value: 1 }, { value: 2 }, { value: 3 }]Object.entries()
Object.entries() 方法和 Object.values() 方法非常相似，它也接受一个对象作为参数。不同的是，它返回的是一个数组，每个元素都是一个键值对的数组，包含对象属性的名称和对应的属性值。
const obj = {
a: 1,
b: 2,
c: 3
};
const entries = Object.entries(obj);
console.log(entries); // [['a', 1], ['b', 2], ['c', 3]]同样地，如果对象的属性值是一个对象，那么 Object.entries() 方法返回的数组将包含该对象的引用。
const obj = {
a: { value: 1 },
b: { value: 2 },
c: { value: 3 }
};
const entries = Object.entries(obj);
console.log(entries); // [['a', { value: 1 }], ['b', { value: 2 }], ['c', { value: 3 }]]区别
两个方法的区别在于返回值的类型。Object.values() 返回值是对象属性值的数组，而 Object.entries() 返回值是多个键值对的数组。
我们可以通过下面的代码演示它们的区别：
-- -------------------- ---- ------- ----- --- - - -- -- -- -- -- - -- ----- ------ - ------------------- ----- ------- - -------------------- -------------------- -- --- -- -- --------------------- -- ------ --- ----- --- ----- ---
指导意义
Object.values() 和 Object.entries() 这两个方法对于 JavaScript 开发者来说是非常有用的工具。我们可以根据对象的属性值或属性名来处理对象，而且返回值的数据结构也更方便操作。
我们可以在很多场景下使用这两个方法，比如对象的遍历、对象属性的过滤、对象属性的排序等等。
下面的示例演示了如何利用 Object.entries() 方法对对象属性进行排序：
-- -------------------- ---- ------- ----- --- - - -- -- -- -- -- - -- ----- ------------- - ---------------------------- -- -- ---- - ------ --------------------------- -- ------ --- ----- --- ----- ---
在这个例子中，我们利用了 Array.prototype.sort() 方法对对象属性进行排序。注意，我们在 sort() 方法中使用了 a[1] 和 b[1]，它们分别表示当前比较的两个对象的属性值。这个排序逻辑可以根据程序需要进行更改。
总结
Object.values() 和 Object.entries() 方法是 ECMAScript 2017 中引入的两个新方法，它们可以让我们更方便地操作对象。Object.values() 返回对象属性值的数组，而 Object.entries() 返回多个键值对的数组。
我们可以使用这两个方法完成很多操作，比如对象属性的遍历、过滤、排序等等。同时，我们也可以将它们与其他 JavaScript 方法和语言特性一起使用，发挥更大的作用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64744989968c7c53b01abba1