ES9 中新增了两个方法 Object.values() 和 Object.entries()，它们可以方便地将对象的值和键值对转化为数组形式，这对于前端开发人员来说是一个非常方便的功能。在本文中，我们将深入探讨这两个新方法的使用技巧，并且提供一些示例代码供读者参考。
Object.values()
Object.values() 方法返回一个给定对象的所有可枚举属性值的数组，其顺序与使用 for...in 循环遍历该对象时的顺序相同（区别在于 for...in 循环还会枚举原型链中的属性）。该方法的语法如下：
Object.values(obj)
其中，obj 表示要获取值的对象。
以下是一个示例代码，展示了 Object.values() 方法的使用：
const obj = { a: 1, b: 2, c: 3 };
const values = Object.values(obj);
console.log(values); // [1, 2, 3]上述代码中，我们定义了一个对象 obj，其中包含了三个属性。然后，我们使用 Object.values() 方法将 obj 的属性值转化为数组形式，并将其赋值给 values 变量。最后，我们使用 console.log() 函数输出 values 变量的值，结果为 [1, 2, 3]。
Object.entries()
Object.entries() 方法返回一个给定对象自身可枚举属性的键值对数组，其顺序与使用 for...in 循环遍历该对象时的顺序相同（区别在于 for...in 循环还会枚举原型链中的属性）。该方法的语法如下：
Object.entries(obj)
其中，obj 表示要获取键值对的对象。
以下是一个示例代码，展示了 Object.entries() 方法的使用：
const obj = { a: 1, b: 2, c: 3 };
const entries = Object.entries(obj);
console.log(entries); // [["a", 1], ["b", 2], ["c", 3]]上述代码中，我们定义了一个对象 obj，其中包含了三个属性。然后，我们使用 Object.entries() 方法将 obj 的键值对转化为数组形式，并将其赋值给 entries 变量。最后，我们使用 console.log() 函数输出 entries 变量的值，结果为 [["a", 1], ["b", 2], ["c", 3]]。
使用技巧
Object.values() 和 Object.entries() 方法的使用非常简单，但是我们需要注意以下几点：
1. 兼容性问题
由于 Object.values() 和 Object.entries() 方法是 ES9 中新增的方法，因此在一些老版本的浏览器中可能不被支持。如果需要在老版本浏览器中使用这两个方法，我们可以使用 polyfill 或者手动实现这两个方法。
以下是一个使用 polyfill 的示例代码：
-- -------------------- ---- -------
-- ---------------- -
------------- - ------------- -
------ ---------------------------------- -
------ ---------
---
-
-
-- ----------------- -
-------------- - ------------- -
--- -------- - -----------------
- - ----------------
-------- - --- ---------
----- -----
----------- - ------------- ------------------
------ ---------
-
-上述代码中，我们使用了 Object.keys() 方法获取了对象的键名数组，然后使用 map() 方法将其转化为值数组或者键值对数组。
2. 注意对象的属性顺序
Object.values() 和 Object.entries() 方法返回的数组的顺序与对象的属性顺序一致，因此在使用这两个方法时需要注意对象属性的顺序。
以下是一个示例代码，展示了对象属性顺序对 Object.values() 和 Object.entries() 方法的影响：
const obj = { b: 2, a: 1, c: 3 };
console.log(Object.values(obj)); // [2, 1, 3]
console.log(Object.entries(obj)); // [["b", 2], ["a", 1], ["c", 3]]上述代码中，我们定义了一个对象 obj，其中属性的顺序为 b、a、c。然后，我们使用 Object.values() 和 Object.entries() 方法分别将 obj 的属性值和键值对转化为数组形式，并使用 console.log() 函数输出结果。可以看到，Object.values() 方法返回的数组顺序与对象属性顺序一致，而 Object.entries() 方法返回的数组顺序也与对象属性顺序一致。
3. 对象的属性类型
Object.values() 和 Object.entries() 方法只能获取对象的可枚举属性，因此如果对象中包含了不可枚举属性或者 Symbol 类型的属性，则无法使用这两个方法获取其值或者键值对。
以下是一个示例代码，展示了不可枚举属性和 Symbol 类型属性对 Object.values() 和 Object.entries() 方法的影响：
const obj = {};
Object.defineProperty(obj, 'a', {
value: 1,
enumerable: false
});
obj[Symbol('b')] = 2;
console.log(Object.values(obj)); // [ ]
console.log(Object.entries(obj)); // [ ]上述代码中，我们定义了一个空对象 obj，并使用 Object.defineProperty() 方法将属性 a 定义为不可枚举属性。然后，我们使用 Symbol() 函数创建了一个 Symbol 类型的属性 b。最后，我们使用 Object.values() 和 Object.entries() 方法分别尝试获取 obj 的属性值和键值对，并使用 console.log() 函数输出结果。可以看到，由于属性 a 是不可枚举属性，属性 b 是 Symbol 类型的属性，因此 Object.values() 和 Object.entries() 方法无法获取它们的值或者键值对。
总结
Object.values() 和 Object.entries() 方法是 ES9 中新增的两个方法，它们可以方便地将对象的值和键值对转化为数组形式。在使用这两个方法时，我们需要注意对象属性的顺序、对象属性的类型以及兼容性问题。如果您需要在老版本浏览器中使用这两个方法，可以使用 polyfill 或者手动实现这两个方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/657824add2f5e1655d205746