ECMAScript 2021 中的 Object.values() 和 Object.entries() 方法的详解与高级用法-JavaScript中文网-JavaScript教程资源分享门户

在 ECMAScript 2021 中，Object 对象新增了两个方法：Object.values() 和 Object.entries()。这两个方法可以帮助开发者更方便地操作对象，提高代码的可读性和可维护性。本文将详细介绍这两个方法的用法和示例代码，并探讨它们的高级用法和指导意义。

Object.values() 方法

Object.values() 方法返回一个数组，包含对象的所有可枚举属性的值。具体用法如下：

Object.values(obj)

其中，obj 是要获取属性值的对象。返回的数组中，元素的顺序与使用 for...in 循环遍历对象时的顺序相同。下面是一个示例：

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

在上面的示例中，我们定义了一个对象 obj，包含三个属性 a、b、c，然后使用 Object.values() 方法获取其所有属性值，并将其赋值给变量 values。最后，我们将 values 输出到控制台，得到了一个数组 [1, 2, 3]，与对象属性值的顺序相同。

需要注意的是，Object.values() 方法只返回对象的可枚举属性的值。如果要获取所有属性的值，包括不可枚举属性和原型链上的属性，可以使用 Object.getOwnPropertyNames() 方法和 Object.getPrototypeOf() 方法。

Object.entries() 方法

Object.entries() 方法返回一个数组，包含对象的所有可枚举属性的键值对。具体用法如下：

Object.entries(obj)

其中，obj 是要获取键值对的对象。返回的数组中，每个元素都是一个数组，包含两个元素，第一个元素是属性的键，第二个元素是属性的值。下面是一个示例：

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

在上面的示例中，我们定义了一个对象 obj，包含三个属性 a、b、c，然后使用 Object.entries() 方法获取其所有属性的键值对，并将其赋值给变量 entries。最后，我们将 entries 输出到控制台，得到了一个数组 [["a", 1], ["b", 2], ["c", 3]]，其中每个元素都是一个数组，包含属性的键和值。

需要注意的是，Object.entries() 方法只返回对象的可枚举属性的键值对。如果要获取所有属性的键值对，包括不可枚举属性和原型链上的属性，可以使用 Object.getOwnPropertyNames() 方法和 Object.getPrototypeOf() 方法。

高级用法

除了基本用法之外，Object.values() 和 Object.entries() 方法还有一些高级用法，可以帮助开发者更方便地操作对象。

与解构赋值结合使用

Object.values() 和 Object.entries() 方法可以与解构赋值结合使用，快速获取对象的属性值或键值对。下面是一个示例：

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

const [[key1, val1], [key2, val2], [key3, val3]] = Object.entries(obj);
console.log(key1, val1, key2, val2, key3, val3); // "a" 1 "b" 2 "c" 3

在上面的示例中，我们使用解构赋值和 Object.values() 方法快速获取了对象的属性值，并将其赋值给变量 a、b、c。同时，我们还使用解构赋值和 Object.entries() 方法快速获取了对象的键值对，并将其赋值给变量 key1、val1、key2、val2、key3、val3。

与 Array.prototype.map() 方法结合使用

Object.values() 和 Object.entries() 方法可以与 Array.prototype.map() 方法结合使用，快速对对象的属性值或键值对进行处理。下面是一个示例：

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

const entries = Object.entries(obj).map(([key, value]) => [key.toUpperCase(), value * 2]);
console.log(entries); // [["A", 2], ["B", 4], ["C", 6]]

在上面的示例中，我们使用 Object.values() 方法获取对象的属性值，并使用 Array.prototype.map() 方法对其进行处理，将每个值乘以 2。同时，我们还使用 Object.entries() 方法获取对象的键值对，并使用 Array.prototype.map() 方法对其进行处理，将键转换为大写字母，并将每个值乘以 2。

指导意义

Object.values() 和 Object.entries() 方法可以帮助开发者更方便地操作对象，提高代码的可读性和可维护性。在实际开发中，我们可以使用这两个方法来快速获取对象的属性值或键值对，并对其进行处理。同时，我们还可以将这两个方法与解构赋值和 Array.prototype.map() 方法结合使用，实现更加高级的操作。

需要注意的是，Object.values() 和 Object.entries() 方法只返回对象的可枚举属性的值或键值对。如果要获取所有属性的值或键值对，包括不可枚举属性和原型链上的属性，可以使用 Object.getOwnPropertyNames() 方法和 Object.getPrototypeOf() 方法。

总之，Object.values() 和 Object.entries() 方法是 ECMAScript 2021 中非常实用的新增方法，值得开发者深入学习和掌握。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67d2374ba941bf7134434777

ECMAScript 2021 中的 Object.values() 和 Object.entries() 方法的详解与高级用法