ES9 之 Object.values() 和 Object.entries()-JavaScript中文网-JavaScript教程资源分享门户

ES9 新增了两个很实用的方法，Object.values() 和 Object.entries()，让我们可以更方便地操作对象。本文将深入介绍这两个方法的用法和示例。

Object.values()

Object.values() 方法返回一个对象自身可枚举属性的值的数组。如果对象中不存在可枚举属性，则返回空数组。

语法如下：

Object.values(obj)

示例 1：获取对象的值数组

以下代码使用 Object.values() 方法获取对象 person 的值数组：

// javascriptcn.com 代码示例
const person = {
  name: 'Tom',
  age: 18,
  gender: 'male'
};

const values = Object.values(person);

console.log(values); // ['Tom', 18, 'male']

示例 2：输出对象所有可遍历属性的值

以下代码使用 Object.values() 方法输出一个对象所有可遍历属性的值：

const obj = { foo: 'bar', baz: 42 };
console.log(Object.values(obj)); // ['bar', 42]

示例 3：获取数组的值

以下代码使用 Object.values() 方法获取数组 arr 的值数组：

const arr = ['a', 'b', 'c'];
console.log(Object.values(arr)); // ['a', 'b', 'c']

Object.entries()

Object.entries() 方法返回一个对象自身可枚举属性的键值对数组。如果对象中不存在可枚举属性，则返回空数组。

语法如下：

Object.entries(obj)

示例 1：获取对象的键值对数组

以下代码使用 Object.entries() 方法获取对象 person 的键值对数组：

// javascriptcn.com 代码示例
const person = {
  name: 'Tom',
  age: 18,
  gender: 'male'
};

const entries = Object.entries(person);

console.log(entries); // [['name', 'Tom'], ['age', 18], ['gender', 'male']]

示例 2：遍历输出对象的键值对

以下代码使用 Object.entries() 方法遍历输出对象 obj 的所有键值对：

const obj = { foo: 'bar', baz: 42 };
for (const [key, value] of Object.entries(obj)) {
  console.log(`${key}: ${value}`);
}
// expected output:
// "foo: bar"
// "baz: 42"

示例 3：获取 Map 对象的键值对

以下代码使用 Object.entries() 方法获取 Map 对象 map 的键值对数组：

const map = new Map([
  [1, 'one'],
  [2, 'two'],
  [3, 'three']
]);

console.log(Object.entries(map)); // [[1, 'one'], [2, 'two'], [3, 'three']]

总结

Object.values() 和 Object.entries() 方法让我们可以更方便地操作对象，通过本文的学习，我们可以见识到其威力，这将大大提高我们工作的效率，所以在日常开发中一定要灵活应用它们。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6532438f7d4982a6eb4b2b88