( for... in ) 和 (for... of ) 语句有什么区别？

Question

我知道什么是for... in 循环（它迭代键），但我第一次听说for... of（它迭代值）。

我对@9​​87654327@ 循环感到困惑。

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

我了解for... of 会迭代属性值。那为什么不记录"3", "5", "7", "hello" 而不是"3", "5", "7"？

与 for... in 循环不同，它迭代每个键 ("0", "1", "2", "foo") 并迭代 foo 键，for... of 不 迭代 foo 的值属性，即"hello"。为什么会这样？

在这里我控制台 for... of 循环。它应该记录"3", "5", "7","hello"，但它记录"3", "5", "7"。为什么？

Example Link

Answer 1

for in 循环遍历对象的可枚举属性名称。

for of（ES6 中的新功能）确实使用 object-specific iterator 并循环由它生成的值。

在您的示例中，array iterator 确实产生了数组中的所有值（忽略非索引属性）。

Answer 2

我在Iterators and Generators 找到了完整的答案（虽然它适用于 TypeScript，但 JavaScript 也是如此）

for..of 和 for..in 语句都迭代列表；价值 虽然迭代不同，for..in 返回一个键列表 被迭代的对象，而for..of 返回值列表 被迭代对象的数值属性。

下面是一个展示这种区别的例子：

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

另一个区别是for..in对任何对象进行操作；它服务 作为检查此对象属性的一种方式。 for..of 另一方面 hand，主要对可迭代对象的值感兴趣。内置 像 Map 和 Set 这样的对象实现 Symbol.iterator 属性允许 访问存储的值。

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

Answer 3

for..in 和 for..of 的区别：

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

1. for..in 遍历所有可枚举的对象的属性键
2. for..of 迭代可迭代对象的值。可迭代对象的示例包括数组、字符串和 NodeList。

示例：

let arr = ['el1', 'el2', 'el3'];

arr.addedProp = 'arrProp';

// elKey are the property keys
for (let elKey in arr) {
  console.log(elKey);
}

// elValue are the property values
for (let elValue of arr) {
  console.log(elValue)
}

在这个例子中，我们可以观察到for..in 循环遍历对象的键，在这个例子中是一个数组对象。键是 0、1、2（对应于数组元素）和addedProp。这是 arr 数组对象在 chrome devtools 中的外观：

您会看到我们的for..in 循环只是简单地迭代这些键。

---

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

Answer 4

for...in 循环

for...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 循环会给您带来很大的麻烦。因为 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

这就是为什么在遍历数组时不鼓励使用 for...in 循环。

注意：forEach 循环 是 JavaScript 中的另一种 for 循环。 但是forEach()其实是数组方法，所以只能用 专门用数组。也没有办法阻止或打破 forEach 循环。如果您在循环中需要这种类型的行为，您将 必须使用基本的 for 循环。

for...of 循环

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

这使得 for...of 循环成为所有 for 循环中最简洁的版本。

但是等等，还有更多！ for...of 循环还有一些额外的好处，可以修复 for 和 for...in 循环的弱点。

您可以随时停止或中断 for...of 循环。

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

而且您不必担心向对象添加新属性。 for...of 循环只会遍历对象中的值。

Answer 5

这是记住for...inLoop 和for...ofLoop 之间区别的有用助记符。

“索引，对象”

for...in Loop => 遍历数组中的索引。

for...of Loop => 遍历 object of 个对象。

Answer 6

for...in 语句以任意顺序迭代对象的可枚举属性。 可枚举属性是那些其内部 [[Enumerable]] 标志设置为 true 的属性，因此如果原型链中有任何可枚举属性，for...in 循环也会对其进行迭代。

for...of 语句迭代可迭代对象定义要迭代的数据。

示例：

Object.prototype.objCustom = function() {}; 
Array.prototype.arrCustom = function() {};

let iterable = [3, 5, 7];

for (let i in iterable) {
  console.log(i); // logs: 0, 1, 2, "arrCustom", "objCustom"
}

for (let i in iterable) {
  if (iterable.hasOwnProperty(i)) {
    console.log(i); // logs: 0, 1, 2,
  }
}

for (let i of iterable) {
  console.log(i); // logs: 3, 5, 7
}

和之前一样，您可以跳过在 for...of 循环中添加 hasOwnProperty。

Answer 7

两个循环之间的另一个区别，之前没有人提到过：

不推荐使用解构for...in。请改用for...of。

Source

所以如果我们想在循环中使用destructuring，为了获取每个array元素的index和value，我们应该使用 for...of 循环和 Array 方法 entries():

for (const [idx, el] of arr.entries()) {
    console.log( idx + ': ' + el );
}

Answer 8

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

Answer 9

有一些已经定义的数据类型可以让我们轻松地对其进行迭代，例如数组、映射、字符串对象

普通 for in 迭代迭代器，并作为响应为我们提供按插入顺序排列的键，如下例所示。

  const numbers = [1,2,3,4,5];
   for(let number in number) {
     console.log(number);
   }

   // result: 0, 1, 2, 3, 4

现在，如果我们尝试使用 for of 进行相同的操作，那么作为响应，它会为我们提供值而不是键。例如

  const numbers = [1,2,3,4,5];
   for(let numbers of numbers) {
    console.log(number);
  }

  // result: 1, 2, 3, 4, 5

因此，查看这两个迭代器，我们可以轻松区分它们之间的区别。

注意：- For of 仅适用于 Symbol.iterator

所以如果我们尝试迭代普通对象，那么它会给我们一个错误，例如-

const Room = {
   area: 1000,
   height: 7,
   floor: 2
 }

for(let prop in Room) {
 console.log(prop);
 } 

// Result area, height, floor

for(let prop of Room) {
  console.log(prop);
 } 

房间不可迭代

现在为了迭代，我们需要定义一个 ES6 Symbol.iterator 例如

  const Room= {
    area: 1000, height: 7, floor: 2,
   [Symbol.iterator]: function* (){
    yield this.area;
    yield this.height;
    yield this.floors;
  }
}


for(let prop of Room) {
  console.log(prop);
 } 

//Result 1000, 7, 2

这是 For in 和 For of 之间的区别。希望它可以消除差异。

Answer 10

for-in 循环

for-in 循环用于遍历集合的可枚举属性，以任意顺序。集合是一个容器类型的对象，其项目可以使用索引或键。

var myObject = {a: 1, b: 2, c: 3};
var myArray = [1, 2, 3];
var myString = "123";

console.log( myObject[ 'a' ], myArray[ 1 ], myString[ 2 ] );

for-in 循环一次提取集合的可枚举属性（键）并一次迭代一个。可枚举属性是可以出现在for-in 循环中的集合的属性。

默认情况下，数组和对象的所有属性都出现在for-in 循环中。但是，我们可以使用Object.defineProperty 方法手动配置集合的属性。

var myObject = {a: 1, b: 2, c: 3};
var myArray = [1, 2, 3];

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

for( var i in myObject ){ console.log( 'myObject:i =>', i ); }
for( var i in myArray ){ console.log( 'myArray:i  =>', i ); }

在上面的例子中，myObject 的属性d 和myArray 的索引3 没有出现在for-in 循环中，因为它们配置了enumerable: false。

for-in 循环几乎没有问题。在数组的情况下，for-in 循环还将考虑使用myArray.someMethod = f 语法将methods 添加到数组中，但是myArray.length 仍然是4。

for-of 循环

for-of 循环遍历集合的值是一种误解。 for-of 循环遍历 Iterable 对象。可迭代对象是在其原型之一上直接具有名称为 Symbol.iterator 的方法的对象。

Symbol.iterator 方法应该返回一个Iterator。迭代器是具有next 方法的对象。此方法在调用时返回value 和done 属性。

当我们使用for-of 循环迭代一个iterable 对象时，一旦获得一个iterator 对象，就会调用Symbol.iterator 方法。对于for-of 循环的每次迭代，将调用此迭代器对象的next 方法，直到next() 调用返回的done 返回false。如果next() 调用返回value 属性，则for-of 循环在每次迭代中收到的值。

var myObject = { a: 1, b: 2, c: 3, d: 4 };

// make `myObject` iterable by adding `Symbol.iterator` function directlty on it
myObject[ Symbol.iterator ] = function(){
  console.log( `LOG: called 'Symbol.iterator' method` );
  var _myObject = this; // `this` points to `myObject`
  
  // return an iterator object
  return {
    keys: Object.keys( _myObject ), 
    current: 0,
    next: function() {
      console.log( `LOG: called 'next' method: index ${ this.current }` );
      
      if( this.current === this.keys.length ){
        return { done: true, value: null }; // Here, `value` is ignored by `for-of` loop
      } else {
        return { done: false, value: _myObject[ this.keys[ this.current++ ] ] };
      }
    }
  };
}

// use `for-of` loop on `myObject` iterable
for( let value of myObject ) {
  console.log( 'myObject: value => ', value );
}

for-of 循环是 ES6 中的新功能，Iterable 和 Iterables 也是如此。 Array 构造函数类型在其原型上具有 Symbol.iterator 方法。 Object 构造函数很遗憾没有它，但 Object.keys()、Object.values() 和 Object.entries() 方法返回一个可迭代对象（您可以使用 console.dir(obj) 检查原型方法）。 for-of 循环的好处是任何对象都可以被迭代，甚至你的自定义 Dog 和 Animal 类。

使对象可迭代的简单方法是实现ES6 Generator，而不是自定义迭代器实现。

与for-in 不同，for-of 循环可以在每次迭代中等待异步任务完成。这是在for 语句documentation 之后使用await 关键字实现的。

for-of 循环的另一个优点是它支持 Unicode。根据 ES6 规范，字符串以 UTF-16 编码存储。因此，每个字符可以采用16-bit 或32-bit。传统上，字符串使用 UCS-2 编码存储，该编码仅支持可存储在 16 bits 中的字符。

因此，String.length 在字符串中返回 16-bit 块的数量。现代字符（如 Emoji 字符）占用 32 位。因此，此字符将返回 length of 2。for-in 循环遍历 16-bit 块并返回错误的 index。但是，for-of 循环会根据 UTF-16 规范对单个字符进行迭代。

var emoji = "??";

console.log( 'emoji.length', emoji.length );

for( var index in emoji ){ console.log( 'for-in: emoji.character', emoji[index] ); }
for( var character of emoji ){ console.log( 'for-of: emoji.character', character ); }

Answer 11

当我第一次开始学习 for in 和 of 循环 时，我也对我的输出感到困惑，但通过一些研究和理解，你可以想到单个循环如下：

1. for...in loop 返回单个属性的索引，并具有对属性的值没有影响，它循环并返回关于属性而不是值的信息。 例如

let profile = { name : "Naphtali", age : 24, favCar : "Mustang", favDrink : "Baileys" }

上面的代码只是创建了一个名为profile的对象，我们将在我们的两个示例中使用它，所以，不要当您在示例中看到 profile 对象 时会感到困惑，只要知道它是被创建的。

所以现在让我们使用下面的 for...in 循环

for(let myIndex in profile){
    console.log(`The index of my object property is ${myIndex}`)
}
 // Outputs : 
        The index of my object property is 0
        The index of my object property is 1
        The index of my object property is 2
        The index of my object property is 3

现在输出的原因是我们的 profile 对象中有 Four(4) 属性，并且众所周知，索引从 0 开始...n，因此，我们得到属性索引 0,1,2,3，因为我们正在使用 >for..in 循环。

1. for...of loop* 可以返回属性、值 或 两者，我们来看看如何。 在 javaScript 中，我们不能像在数组上那样正常循环遍历对象，因此，我们可以使用一些元素来访问我们从对象中选择的任何一个。

   • Object.keys(object-name-goes-here) >>> 返回 keys 或 properties 一个对象。

   • Object.values(object-name-goes-here) >>> 返回对象的值。

   • Object.entries(object-name-goes-here) >>> 返回 both keys 和 >值对象。

---

下面是它们的用法示例，注意Object.entries()：

Step One: Convert the object to get either its key, value, or both.
Step Two: loop through.


// Getting the keys/property

   Step One: let myKeys = ***Object.keys(profile)***
   Step Two: for(let keys of myKeys){
             console.log(`The key of my object property is ${keys}`)
           }

// Getting the values of the property

    Step One: let myValues = ***Object.values(profile)***
    Step Two : for(let values of myValues){
                 console.log(`The value of my object property is ${values}`)
               }

当使用 Object.entries() 时，您需要调用对象上的两个条目，即键和值。您可以通过任一条目调用两者。下面的例子。

Step One: Convert the object to entries, using ***Object.entries(object-name)***
Step Two: **Destructure** the ***entries object which carries the keys and values*** 
like so **[keys, values]**, by so doing, you have access to either or both content.


    // Getting the keys/property

       Step One: let myKeysEntry = ***Object.entries(profile)***
       Step Two: for(let [keys, values] of myKeysEntry){
                 console.log(`The key of my object property is ${keys}`)
               }

    // Getting the values of the property

        Step One: let myValuesEntry = ***Object.entries(profile)***
        Step Two : for(let [keys, values] of myValuesEntry){
                     console.log(`The value of my object property is ${values}`)
                   }

    // Getting both keys and values

        Step One: let myBothEntry = ***Object.entries(profile)***
        Step Two : for(let [keys, values] of myBothEntry){
                     console.log(`The keys of my object is ${keys} and its value 
is ${values}`)
                   }

在不清楚的部分部分制作 cmets。

Answer 12

看到很多很好的答案，但我决定投入我的 5 美分只是为了有一个很好的例子：

for 循环

遍历所有可枚举的道具

let nodes = document.documentElement.childNodes;

for (var key in nodes) {
  console.log( key );
}

for 循环

遍历所有可迭代值

let nodes = document.documentElement.childNodes;

for (var node of nodes) {
  console.log( node.toString() );
}

Answer 13

简答：for...in 循环 键，而 for...of 循环 值。

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

Answer 14

每个人都解释了为什么会出现这个问题，但是仍然很容易忘记它，然后摸不着头脑，为什么会得到错误的结果。尤其是当您处理大量数据时，结果乍一看似乎还不错。

使用Object.entries 可以确保通过所有属性：

var arr = [3, 5, 7];
arr.foo = "hello";

for ( var [key, val] of Object.entries( arr ) ) {
   console.log( val );
}

/* Result:

3
5
7
hello

*/

Answer 15

//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

Answer 16

我发现https://javascript.info/array 的以下解释很有帮助：

循环数组项最古老的方法之一是 for 循环 索引：

let arr = ["Apple", "Orange", "Pear"];

for (let i = 0; i < arr.length; i++) { alert( arr[i] ); } But for arrays there is another form of loop, for..of:

let fruits = ["Apple", "Orange", "Plum"];

// iterates over array elements for (let fruit of fruits) { alert( fruit ); } The for..of doesn’t give access to the number of the

当前元素，只是它的值，但在大多数情况下就足够了。和 它更短。

从技术上讲，因为数组是对象，所以也可以使用 对于..in：

let arr = ["Apple", "Orange", "Pear"];

for (let key in arr) { alert( arr[key] ); // Apple, Orange, Pear } But that’s actually a bad idea. There are potential problems with it:

for..in 循环遍历所有属性，而不仅仅是数字 那些。

但这实际上是个坏主意。它有潜在的问题：

1. for..in 循环遍历所有属性，而不仅仅是数字 那些。

   在浏览器和其他浏览器中存在所谓的“类数组”对象 看起来像数组的环境。也就是说，它们有长度和 索引属性，但它们也可能有其他非数字 我们通常不需要的属性和方法。 for..in 循环 虽然会列出它们。因此，如果我们需要使用类似数组的对象， 那么这些“额外”属性可能会成为问题。

2. for..in 循环针对通用对象而不是数组进行了优化，并且 因此慢了 10-100 倍。当然，它仍然非常快。这 加速可能只对瓶颈很重要。但我们仍然应该意识到 的区别。

一般来说，我们不应该将 for..in 用于数组。

Answer 17

for...of 循环仅适用于可迭代对象。在 JavaScript 中，可迭代对象是可以循环的对象。

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

JavaScript 中的对象默认是不可迭代的。因此，for...of 循环不适用于对象。

简单来说，for...of 适用于字符串和数组，但不适用于对象。

for...in 适用于那些可枚举标志设置为 true 的属性。

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

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