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

为…在循环中返回单个属性的索引，对属性的值没有影响，它循环并返回关于属性的信息，而不是关于属性的值。 如

Let profile = { 名字叫拿弗他利。 年龄:24岁 favCar:“野马”， 最喜欢的饮料:百利酒 ｝

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

现在让我们用for…在下面的循环中

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

现在输出的原因是，我们的配置文件对象中有四(4)个属性，我们都知道索引从0开始…N，我们得到了属性的下标0,1,2,3因为我们使用的是for. in循环。

for...of loop* can return either the property, value or both, Let's take a look at how. In javaScript, we can't loop through objects normally as we would on arrays, so, there are a few elements we can use to access either of our choices from an object. Object.keys(object-name-goes-here) >>> Returns the keys or properties of an object. Object.values(object-name-goes-here) >>> Returns the values of an object. Object.entries(object-name-goes-here) >>> Returns both the keys and values of an object.

下面是它们的用法示例，请注意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}`)
                   }

对不清楚的部分提出意见。

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

for of (ES6新增功能)使用特定于对象的迭代器并遍历由该迭代器生成的值。

在你的例子中，数组迭代器产生数组中的所有值(忽略非索引属性)。

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

为…在循环

为…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 of用于遍历可迭代对象，For in用于遍历对象属性

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

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

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

另一个技巧:

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