深入理解for in mdn

一、for in语句的介绍

for in语句是一种在JavaScript中进行循环迭代的常见方式。它可以遍历对象的所有可枚举属性，并在每个属性上执行指定的语句。以下是一个简单的示例：

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

for (let prop in obj) {
  console.log(prop); //输出'a' 'b' 'c'
}

在上面的例子中，我们使用for in语句遍历了一个对象obj的所有属性，并在每个属性上执行了console.log()方法，打印了属性名。请注意，在for in循环中，prop被声明为let变量，因此它是块级作用域的。

二、for in语句的原理

for in语句的原理是遍历对象的所有可枚举自有属性（不包含从原型继承的属性），并执行指定的语句。以下是一个更具体的示例：

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

Object.defineProperty(obj, 'd', {
  value: 4,
  enumerable: false
});

for (let prop in obj) {
  console.log(prop); //输出'a' 'b' 'c'
}

在上面的例子中，我们使用了Object.defineProperty()方法将一个不可枚举属性d添加到obj对象中。当我们用for in语句遍历obj对象时，d属性不会被迭代，因为它是不可枚举的。因此，for in语句只会输出'a'、'b'、'c'这三个属性名。

三、for in语句的注意事项

1、遍历顺序不确定

使用for in语句进行迭代时，并不保证返回属性的顺序，因此在进行某些操作时需要特别小心。例如，以下代码可能会输出不同的顺序：

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

for (let prop in obj) {
  console.log(prop); //输出'a' 'b' 'c'，但顺序不一定相同
}

2、仅迭代可枚举属性

使用for in语句迭代对象时，它只会返回对象的可枚举自有属性。例如，在以下示例中，for in语句只会迭代obj对象的a属性，因为其他属性都不可枚举：

const obj = {a: 1};
Object.defineProperty(obj, 'b', {value: 2, enumerable: false});

for(let prop in obj){
  console.log(prop); //输出'a'，但不包括'b'
}

3、不要在数组上使用for in语句

虽然for in语句可以迭代数组，但这种做法并不推荐。考虑以下示例：

const arr = ['a', 'b', 'c'];

for(let index in arr){
  console.log(index); //输出'0' '1' '2'
}

在上面的示例中，虽然我们期望输出的是数组元素的值，但实际上它输出的是元素的索引。这是因为在JavaScript中，数组也是一种特殊的对象，可以有自己的属性和方法。因此，使用循环迭代数组时，请使用for of语句（在ES6中引入）或forEach()方法。

4、在迭代前检查对象是否为空

在使用for in语句迭代对象时，请先确保对象不为空，否则会导致错误。以下是一个简单的示例：

const obj = {};

for(let prop in obj){
  console.log(prop); //不执行
}

在上面的示例中，我们尝试使用for in语句迭代一个空对象。由于该对象没有属性，for in语句没有执行任何操作。

四、小结

for in语句是JavaScript中一种常见的循环迭代方式，用于遍历对象的可枚举自有属性。在使用for in语句时，请注意它的注意事项，以避免出现错误。