ES9 中的基础知识：Objects 的 entries、values 和 keys 操作以及其用法

在前端开发中，我们经常需要操作 JavaScript 对象（Object）。ES9 中新添加了三个方法，分别是 Object.entries，Object.values 和 Object.keys，这三个方法可以方便地获取对象的键值对、值数组和键数组。本文将详细介绍这三个方法的用法及其学习与指导意义，同时也会提供一些示例代码，帮助大家更好地理解和使用它们。

Object.entries

Object.entries 方法可以将一个对象转换为一个二维数组，其中每一行数组代表一个键值对，第一个元素是键名，第二个元素是键值。这个方法非常适合用来遍历对象的属性和值。

const person = { name: 'John Doe', age: 25, gender: 'male' };
const entries = Object.entries(person);
console.log(entries);
// Output: [["name", "John Doe"], ["age", 25], ["gender", "male"]]

我们可以遍历这个数组来访问对象的键值对：

for (const [key, value] of Object.entries(person)) {
  console.log(`${key}: ${value}`)
}
// Output:
// name: John Doe
// age: 25
// gender: male

Object.entries 的返回值是一个可迭代对象，因此可以使用 Array.from 方法将其转换为数组。

const entriesArray = Array.from(entries);
console.log(entriesArray);
// Output: [["name", "John Doe"], ["age", 25], ["gender", "male"]]

Object.values

Object.values 方法可以将一个对象的所有值提取出来，返回一个值数组。

const person = { name: 'John Doe', age: 25, gender: 'male' };
const values = Object.values(person);
console.log(values);
// Output: ["John Doe", 25, "male"]

同样的，我们也可以遍历这个数组来访问对象的值：

for (const value of Object.values(person)) {
  console.log(value);
}
// Output:
// John Doe
// 25
// male

Object.values 的返回值同样是一个可迭代对象，也可以用 Array.from 方法将其转换为数组。

const valuesArray = Array.from(values);
console.log(valuesArray);
// Output: ["John Doe", 25, "male"]

Object.keys

Object.keys 方法可以将一个对象的所有键提取出来，返回一个键数组。

const person = { name: 'John Doe', age: 25, gender: 'male' };
const keys = Object.keys(person);
console.log(keys);
// Output: ["name", "age", "gender"]

我们同样可以遍历这个数组来访问对象的键：

for (const key of Object.keys(person)) {
  console.log(key);
}
// Output:
// name
// age
// gender

Object.keys 的返回值同样也是一个可迭代对象，也可以用 Array.from 方法将其转换为数组。

const keysArray = Array.from(keys);
console.log(keysArray);
// Output: ["name", "age", "gender"]

总结

Object.entries、Object.values 和 Object.keys 这三个方法十分实用，可以帮助我们轻松地访问和遍历对象的属性和值。它们被广泛用于 JavaScript 开发中，因此掌握它们的用法对于那些希望深入学习 JavaScript 和前端开发的开发者来说是十分必要的。

希望本文的讲解和示例代码对大家有所帮助！

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