揭秘JavaScript对象遍历的奥秘：纵览四种方式，探索高效数据访问之道

前端

2023-12-29 18:37:10

导语：对象遍历的意义

在JavaScript的王国里，对象扮演着举足轻重的角色，充当着存储和组织数据的容器。而当我们需要访问和处理对象中的数据时，遍历对象就成为了必不可少的任务。对象遍历，犹如开启宝箱的钥匙，让我们得以逐一探寻对象中的奥秘，获取所需的数据。

JavaScript对象遍历的四种方式

JavaScript为我们提供了四种常用的对象遍历方式，各有千秋，适用于不同的场景和需求。接下来，我们将逐一揭开它们的庐山真面目。

1. Object.keys()、Object.values()、Object.entries()

这三剑客是JavaScript ES6中新增的利器，专门为对象遍历而生。

Object.keys()

Object.keys()方法会返回一个包含对象所有可枚举属性名的数组。这些属性名按照它们在对象中的顺序排列。

const person = {
  name: 'John',
  age: 30,
  city: 'New York'
};

const keys = Object.keys(person);
console.log(keys); // 输出：['name', 'age', 'city']

Object.values()

Object.values()方法与Object.keys()方法类似，但它返回的是对象所有可枚举属性值组成的数组。

const person = {
  name: 'John',
  age: 30,
  city: 'New York'
};

const values = Object.values(person);
console.log(values); // 输出：['John', 30, 'New York']

Object.entries()

Object.entries()方法可谓是Object.keys()和Object.values()的合体，它返回的是一个由键值对组成的数组，每个键值对都是一个数组，包含了属性名和属性值。

const person = {
  name: 'John',
  age: 30,
  city: 'New York'
};

const entries = Object.entries(person);
console.log(entries); // 输出：[['name', 'John'], ['age', 30], ['city', 'New York']]

2. for...in

for...in循环是一种经典的对象遍历方式，它遍历对象的所有可枚举属性，包括symbol属性。

const person = {
  name: 'John',
  age: 30,
  city: 'New York',
  [Symbol('secret')]: 'I am a secret'
};

for (const key in person) {
  console.log(key); // 输出：'name', 'age', 'city', 'Symbol(secret)'
}

需要注意的是，for...in循环会遍历对象的所有可枚举属性，包括symbol属性，而symbol属性在严格模式下是不可见的。因此，在严格模式下使用for...in循环遍历对象时，symbol属性将被忽略。

3. for...of

for...of循环是ES6中引入的另一种对象遍历方式，它遍历对象的可迭代属性值。

const person = {
  name: 'John',
  age: 30,
  city: 'New York'
};

for (const value of Object.values(person)) {
  console.log(value); // 输出：'John', 30, 'New York'
}

for...of循环只能遍历对象的可迭代属性值，symbol属性不可迭代，因此不会被for...of循环遍历。

4. 传统的for循环

传统的for循环也可以用来遍历对象，但它需要手动获取对象的属性名或属性值。

const person = {
  name: 'John',
  age: 30,
  city: 'New York'
};

const keys = Object.keys(person);
for (let i = 0; i < keys.length; i++) {
  const key = keys[i];
  const value = person[key];
  console.log(key, value); // 输出：'name', 'John', 'age', 30, 'city', 'New York'
}