剖析JS中遍历对象属性的多元方式：便捷、高效、各有所长

2023-11-26 04:40:33

前言

在JavaScript中，对象是一种强大的数据结构，用于存储和组织相关数据。对象由键-值对组成，键是唯一的标识符，值可以是任何类型的数据。为了有效处理和操作对象，遍历其属性是必不可少的。

JavaScript提供了多种遍历对象属性的方法，每种方法都有其独特的特点和应用场景。在本文中，我们将深入探讨JS中遍历对象属性的四种常用方式：

Object.keys()
Object.values()
for...in
for...of

1. Object.keys()

Object.keys()方法会返回一个由一个给定对象的自身可枚举属性组成的数组，数组中属性名的排列顺序和使用for...in循环遍历该对象时返回的顺序一致。如果对象的键-值都不可枚举，那么将返回由键组成的空数组。

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

const keys = Object.keys(person);

console.log(keys); // ["name", "age", "city"]

Object.keys()方法非常适合需要获取对象属性名的场景。例如，您可以使用Object.keys()来创建对象的副本：

const personCopy = {};

Object.keys(person).forEach(key => {
  personCopy[key] = person[key];
});

console.log(personCopy); // { name: 'John Doe', age: 30, city: 'New York' }

2. Object.values()

Object.values()方法会返回一个由一个给定对象的自身可枚举属性值组成的数组，数组中属性值排列的顺序和使用for...in循环遍历该对象时返回的顺序一致。如果对象的键-值都不可枚举，那么将返回一个空数组。

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

const values = Object.values(person);

console.log(values); // ["John Doe", 30, "New York"]

Object.values()方法非常适合需要获取对象属性值的情况。例如，您可以使用Object.values()来计算对象的属性值的总和：

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

const sum = Object.values(person).reduce((a, b) => a + b);

console.log(sum); // 60

3. for...in

for...in循环是一种遍历对象属性的传统方法。for...in循环会遍历一个对象的自身可枚举属性（包括从原型链继承的属性）。

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

for (const key in person) {
  console.log(key); // "name", "age", "city"
  console.log(person[key]); // "John Doe", 30, "New York"
}

for...in循环非常适合需要遍历对象的所有属性（包括从原型链继承的属性）的场景。例如，您可以使用for...in循环来查找对象中所有值为null的属性：

const person = {
  name: 'John Doe',
  age: 30,
  city: null
};

for (const key in person) {
  if (person[key] === null) {
    console.log(key); // "city"
  }
}

4. for...of

for...of循环是一种遍历对象可迭代属性值的新方法。for...of循环只遍历对象的自身可迭代属性（不包括从原型链继承的属性）。

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

for (const value of Object.values(person)) {
  console.log(value); // "John Doe", 30, "New York"
}

for...of循环非常适合需要遍历对象的可迭代属性值的情况。例如，您可以使用for...of循环来创建对象的字符串表示：

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

const stringRepresentation = '';

for (const value of Object.values(person)) {
  stringRepresentation += value + ' ';
}

console.log(stringRepresentation); // "John Doe 30 New York "

比较

四种遍历对象属性的方法各有其特点和应用场景。下表总结了四种方法的主要区别：

方法	返回值	可遍历属性	循环顺序
Object.keys()	对象属性名的数组	自身可枚举属性	与for...in循环一致
Object.values()	对象属性值的数组	自身可枚举属性	与for...in循环一致
for...in	对象属性的键	自身可枚举属性和从原型链继承的属性	任意
for...of	对象可迭代属性的值	自身可迭代属性	按属性在对象中的顺序