我知道什么是a。在循环中(它在键上迭代),但我听说for…的第一次(它遍历值)。

我对……感到困惑。的循环。

var arr = [3, 5, 7];
arr.foo = "hello";
    
for (var i in arr) {
  console.log(i); // logs "0", "1", "2", "foo"
}
    
for (var i of arr) {
  console.log(i); // logs "3", "5", "7"
  // it doesn't log "3", "5", "7", "hello"
}

我理解为……Of迭代属性值。那为什么它记录的不是"3" "5" "7" "hello"而是"3" "5" "7"

不像……循环中,遍历每个键("0","1","2","foo"),也遍历foo键,for…Of不会遍历foo属性的值,即“hello”。为什么会这样?

在此我为……的循环。它应该日志“3”,“5”,“7”,“你好”,但日志“3”,“5”,“7”。为什么?

例子链接


当前回答

for-in语句以任意顺序遍历对象的可枚举属性。

该循环将遍历对象本身的所有可枚举属性以及对象从其构造函数原型继承的属性

你可以把它理解为for in迭代并列出所有键。

var str = 'abc';
var arrForOf = [];
var arrForIn = [];

for(value of str){
  arrForOf.push(value);
}

for(value in str){
  arrForIn.push(value);
}

console.log(arrForOf); 
// ["a", "b", "c"]
console.log(arrForIn); 
// ["0", "1", "2", "formatUnicorn", "truncate", "splitOnLast", "contains"]

其他回答

For of用于遍历可迭代对象,For in用于遍历对象属性

这里有一个要记住的小技巧:

For of不是针对对象的(而是针对可迭代对象的)

For in不是针对可迭代对象的,而是针对对象的

另一个技巧:

For in返回对象索引(键),而For of返回值

为…在循环

为…In循环通过消除计数逻辑和退出条件改进了for循环的弱点。

例子:

const digits = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

for (const index in digits) {
  console.log(digits[index]);
}

但是,你仍然需要处理使用索引访问数组值的问题,这很糟糕;这几乎比以前更让人困惑了。

还有,for…当您需要向数组(或另一个对象)添加额外的方法时,In循环可能会给您带来大麻烦。因为……在循环中,循环遍历所有可枚举的属性,这意味着如果您向数组的原型添加任何额外的属性,那么这些属性也将出现在循环中。

Array.prototype.decimalfy = function() {
  for (let i = 0; i < this.length; i++) {
    this[i] = this[i].toFixed(2);
  }
};

const digits = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

for (const index in digits) {
  console.log(digits[index]);
}

打印:

0 1 2 3. 4 5 6 7 8 9 函数(){ for(设I = 0;I < this.length;我+ +){ this[i] = this[i].toFixed(2); } }

这就是为什么……当循环遍历数组时,不鼓励使用In循环。

注意:forEach循环是JavaScript中的另一种for循环。 然而,forEach()实际上是一个数组方法,因此只能使用它 仅用于数组。也没有办法停止或打破一个 forEach循环。如果你的循环中需要这种类型的行为,你会 必须使用一个基本的for循环。

为…的循环

为…Of循环用于遍历任何类型的可迭代数据。

例子:

const digits = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

for (const digit of digits) {
  console.log(digit);
}

打印:

0 1 2 3 4 5 6 7 8 9

这使得……Of loop是所有for循环中最简洁的版本。

但是等等,还有更多!为…Of循环还有一些额外的优点,可以修复for和for…在循环。

你可以stop或break for…的循环。

const digits = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

for (const digit of digits) {
  if (digit % 2 === 0) {
    continue;
  }
  console.log(digit);
}

打印:

1 3 5 7 9

您不必担心向对象添加新属性。为…Of循环将只循环遍历对象中的值。

为…Of循环只对可迭代对象有效。在JavaScript中,可迭代对象是可以循环的对象。

String、Array、TypedArray、Map和Set都是内置的可迭代对象,因为它们的每个原型对象都实现了@@iterator方法。因此,对于…Of循环作用于上述的对象类型。

Object在JavaScript中默认是不可迭代的。因此,对于…Of循环对对象无效。

简单地说,对于……Of适用于字符串和数组,但不适用于对象。

为…In适用于那些可枚举标志设置为true的属性。

通过简单赋值或属性初始化器创建的属性的可枚举标志默认为true。 通过Object.defineProperty创建的属性的可枚举标志默认为false。

这里有一个更详细的例子:https://dev.to/swastikyadav/difference-between-forof-and-forin-loop-in-javascript-j2o

for-in语句以任意顺序遍历对象的可枚举属性。

该循环将遍历对象本身的所有可枚举属性以及对象从其构造函数原型继承的属性

你可以把它理解为for in迭代并列出所有键。

var str = 'abc';
var arrForOf = [];
var arrForIn = [];

for(value of str){
  arrForOf.push(value);
}

for(value in str){
  arrForIn.push(value);
}

console.log(arrForOf); 
// ["a", "b", "c"]
console.log(arrForIn); 
// ["0", "1", "2", "formatUnicorn", "truncate", "splitOnLast", "contains"]

简单的回答:为了……在键上循环,而for…对值的循环。

for (let x in ['a', 'b', 'c', 'd'] {
    console.log(x); 
}

// Output
0
1
2
3


for (let x of ['a', 'b', 'c', 'd'] {
    console.log(x); 
}

// Output
a
b
c
d