网络技术问题 | JavaScript 课程测验 1 |问题 31

介绍

在 JavaScript 中，for...in 和 Object.keys() 都可以用于迭代对象的属性，但它们之间有什么区别呢？这是本题的探讨方向。

区别

for...in

for...in 循环语句可以迭代对象中所有可枚举属性的名称，包括原型链中的属性。语法如下：

for (variable in object) {
  // code to be executed
}

其中：

• variable：每次迭代时将其设置为当前属性的名称。
• object：要迭代的对象。

下面是一个例子：

const obj = { a: 1, b: 2, c: 3};

for (const prop in obj) {
  console.log(prop);
}

输出结果如下：

a
b
c

注意，for...in 的缺点是：

• 迭代顺序不一定与属性在代码中出现的顺序一致。
• 不能保证访问属性的顺序与添加属性的顺序一致。
• 会迭代对象继承来的属性，因此需要使用 hasOwnProperty() 进行判断。

Object.keys()

Object.keys() 方法返回一个由对象的属性名称组成的数组。语法如下：

Object.keys(object)

其中：

• object：要返回其枚举自身属性的对象。

下面是一个例子：

const obj = { a: 1, b: 2, c: 3};

const keys = Object.keys(obj);

console.log(keys);

输出结果如下：

["a", "b", "c"]

Object.keys() 的优点是：

• 返回值是一个数组，可以使用数组方法对其进行处理。
• 不迭代继承的属性。
• 返回属性名称的顺序与在对象中定义的顺序一致。

总结

for...in 和 Object.keys() 都可以用于迭代对象的属性，但它们之间还是有些许区别的。需要根据具体场景来选择使用哪种方式。