for. in和for. of的区别:

for..in和for..of都是循环结构，用于遍历数据结构。它们之间唯一的区别是实体 它们迭代:

For ..in迭代对象的所有可枚举属性键 For ..of迭代可迭代对象的值。可迭代对象的例子有数组、字符串和nodelist。

例子:

Let arr = ['el1'， 'el2'， 'el3']; 加勒比海盗。adddedprop = 'arrProp'; // elKey是属性键 for(让elKey在arr中){ console.log (elKey); ｝ // elValue是属性值 for (let elValue of arr) { console.log (elValue) ｝

在这个例子中，我们可以观察到for.. In循环遍历对象的键，在这个例子中，对象是数组对象。键是0,1,2(对应数组元素)和adddedprop。这是arr数组对象在chrome devtools中的外观:

你可以看到，我们的for..in循环只是简单地遍历这些键。

示例中的for..of循环遍历数据结构的值。这个例子中的值是'el1'， 'el2'， 'el3'。可迭代数据结构使用for..of返回的值取决于可迭代对象的类型。例如，数组将返回所有数组元素的值，而字符串则返回字符串中的每个字符。

简单的回答:为了……在键上循环，而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

我在迭代器和生成器中找到了完整的答案(虽然它适用于TypeScript，但也适用于JavaScript)

Both for..of and for..in statements iterate over lists; the values iterated on are different though, for..in returns a list of keys on the object being iterated, whereas for..of returns a list of values of the numeric properties of the object being iterated. Here is an example that demonstrates this distinction: let list = [4, 5, 6]; for (let i in list) { console.log(i); // "0", "1", "2", } for (let i of list) { console.log(i); // "4", "5", "6" } Another distinction is that for..in operates on any object; it serves as a way to inspect properties on this object. for..of on the other hand, is mainly interested in values of iterable objects. Built-in objects like Map and Set implement Symbol.iterator property allowing access to stored values. let pets = new Set(["Cat", "Dog", "Hamster"]); pets["species"] = "mammals"; for (let pet in pets) { console.log(pet); // "species" } for (let pet of pets) { console.log(pet); // "Cat", "Dog", "Hamster" }

为…在循环

为…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循环将只循环遍历对象中的值。

//for in，迭代对象中的键和数组中的索引

 let obj={a:1, b:2}
    
    for( const key in obj)
      console.log(obj[key]); //would print 1 and 2
      console.log(key);      //would print a and b

 let arr = [10, 11, 12, 13];

  for (const item in arr) 
    console.log(item);   //would print 0 1 2 3

//for of，迭代数组或任何可迭代对象中的值

let arr = [10, 11, 12, 13];

for (const item of arr )
  console.log(item);  //would print 10  11  12  13

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"]