对象遍历的妙用：for in、Object.keys() 与 for of 深度解析

2024-02-07 09:53:26

for in
for in 是 JavaScript 中最基本的遍历方式，它可以遍历对象的可枚举属性。对象的可枚举属性是指那些可以通过 for...in 循环访问的属性，包括自身属性和从原型链继承而来的属性。

for in 的语法如下：

for (const key in object) {
  // 访问对象的键名和键值
  console.log(key, object[key]);
}

使用 for in 遍历对象时，遍历顺序是不确定的。这意味着每次遍历的结果可能不同，具体取决于对象的属性顺序。

Object.keys()

Object.keys() 方法返回一个包含对象所有可枚举属性键名的数组。与 for in 不同，Object.keys() 只会遍历对象自身的可枚举属性，不会遍历从原型链继承而来的属性。

Object.keys() 的语法如下：

const keys = Object.keys(object);

for (const key of keys) {
  // 访问对象的键名和键值
  console.log(key, object[key]);
}

使用 Object.keys() 遍历对象时，遍历顺序是确定的。这意味着每次遍历的结果都相同，与对象的属性顺序无关。

for of

for of 是 JavaScript 中一种新的遍历方式，它可以遍历具有 iterable 接口的数据结构，例如数组、字符串和 Set。

for of 的语法如下：

for (const element of iterable) {
  // 访问元素
  console.log(element);
}

使用 for of 遍历数组时，遍历顺序与数组的元素顺序一致。

三种遍历方式的比较

特征	for in	Object.keys()	for of
遍历类型	对象的可枚举属性	对象自身的可枚举属性	具有 iterable 接口的数据结构
遍历顺序	不确定	确定	确定
适用场景	遍历对象的所有可枚举属性	遍历对象自身的可枚举属性，不包括从原型链继承而来的属性	遍历数组、字符串、Set 等具有 iterable 接口的数据结构

实例

以下是一些使用 for in、Object.keys() 和 for of 遍历对象和数组的实例：

// 使用 for in 遍历对象
const person = {
  name: 'John Doe',
  age: 30,
  city: 'New York'
};

for (const key in person) {
  console.log(key, person[key]);
}

// 输出：
// name John Doe
// age 30
// city New York

// 使用 Object.keys() 遍历对象
const keys = Object.keys(person);

for (const key of keys) {
  console.log(key, person[key]);
}

// 输出：
// name John Doe
// age 30
// city New York

// 使用 for of 遍历数组
const numbers = [1, 2, 3, 4, 5];

for (const number of numbers) {
  console.log(number);
}

// 输出：
// 1
// 2
// 3
// 4
// 5