for...in 与 Object.keys() 探索JavaScript对象的新用法

2023-09-26 13:24:13

用 for...in 和 Object.keys() 巧妙地遍历 JavaScript 对象

在 JavaScript 中，对象是存放和管理数据的强大工具。要有效地处理这些数据，你需要学会遍历对象，访问它们的键值对。在这篇博客中，我们将深入探讨两种常用的遍历方法：for...in 和 Object.keys()。

for...in：深入挖掘对象属性

for...in 是一个循环语句，允许你遍历对象的可枚举属性 。这些属性包括对象本身定义的属性，以及从原型继承的属性。

语法：

for (const key in object) {
  // 访问键和值
}

示例：

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

for (const key in person) {
  console.log(`键：${key}，值：${person[key]}`);
}

输出：

键：name，值：John
键：age，值：30
键：city，值：New York

Object.keys()：专注于自身属性

Object.keys() 是一个内置函数，它返回一个包含对象自身可枚举属性键 的数组。它不会遍历原型继承的属性。

语法：

const keys = Object.keys(object);

示例：

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

const keys = Object.keys(person);

for (const key of keys) {
  console.log(`键：${key}，值：${person[key]}`);
}

输出：

键：name，值：John
键：age，值：30
键：city，值：New York

比较：找出最佳选择

虽然 for...in 和 Object.keys() 都可以遍历对象，但它们有一些关键的区别：

可枚举性： for...in 遍历可枚举属性（包括原型属性），而 Object.keys() 仅遍历自身可枚举属性。
性能： Object.keys() 通常比 for...in 性能更好，因为它只需要遍历一次对象。
原型继承： for...in 可以检测原型属性，而 Object.keys() 不会。

最佳实践：

在大多数情况下，Object.keys() 是遍历对象的更佳选择，因为它更简洁、更高效，并且不会遍历原型属性。

代码示例：

以下是使用 for...in 和 Object.keys() 遍历对象的代码示例：

// 使用 for...in
const person = {
  name: "John",
  age: 30,
  city: "New York"
};

for (const key in person) {
  console.log(`键：${key}，值：${person[key]}`);
}

// 使用 Object.keys()
const person = {
  name: "John",
  age: 30,
  city: "New York"
};

const keys = Object.keys(person);

for (const key of keys) {
  console.log(`键：${key}，值：${person[key]}`);
}