for...of...與for...in...的區別

for...of...

• 定義：for of是ES6新增的迴圈方法。

• 使用範圍：只能遍歷陣列。

• 功能：可以正確響應break、continue和return語句

• 注意：

  • for of遍歷的只是陣列內的元素，而不包括陣列的原型屬性method和索引index
  • key是陣列中每一項的具體值
  • for of遍歷物件會報錯

• 如果想用for of遍歷陣列的索引用Array.prototype.keys:

  • for (const index of [1, 2, 3, 4, 5].keys()) {
      console.log(index);
    }
    // index的值書數字型別的索引
     
    

• 如果要同時訪問鍵和值，可以使用Array.prototype.entries()

  • for (const [index, value] of [1, 2, 3, 4, 5].entries()) {
      console.log(index, value);
    }
    

for...in...

• 定義：for in是ES5的迴圈方法。

• 使用範圍：可以遍歷物件或者陣列，但是適用與遍歷物件

• 功能：不能響應break、continue和return語句

• 注意：

  • 如果用來遍歷陣列，key是陣列的索引（字串型別），如果是物件key是物件的鍵名
  • for in遍歷陣列的毛病
    • 1.index索引為字串型數字，不能直接進行幾何運算
    • 2.遍歷順序有可能不是按照實際陣列的內部順序
    • 3.使用for in會遍歷陣列所有的可列舉屬性，包括原型。例如上慄的原型方法method和name屬性

• 總結：所以for in更適合遍歷物件，不要使用for in遍歷陣列。

總結

• for..of適用遍歷數/陣列物件/字串/map/set等擁有迭代器物件的集合.但是不能遍歷物件,因為沒有迭代器物件.與forEach()不同的是，它可以正確響應break、continue和return語句
• for-of迴圈不支援普通物件，但如果你想迭代一個物件的屬性，你可以用for-in迴圈（這也是它的本職工作）或內建的Object.keys()方法：