for…in和for…of的用法與區別

一句話歸納：for in是遍歷（object）鍵名，for of是遍歷（array）鍵值。

文章的內容大部分來自MDN。

for...in

for...in 循環只遍歷可枚舉屬性（包括它的原型鏈上的可枚舉屬性）。像 Array和Object使用內置構造函數所建立的對象都會繼承自Object.prototype和String.prototype的不可枚舉屬性，例如 String 的 indexOf()  方法或 Object的toString()方法。循環將遍歷對象自己的全部可枚舉屬性，以及對象從其構造函數原型中繼承的屬性（更接近原型鏈中對象的屬性覆蓋原型屬性）。

var obj = {a:1, b:2, c:3};
    
for (let key in obj) {
  console.log(key);
}

// a
// b
// c

for...of

for...of語句在可迭代對象（包括Array，Map，Set，String，TypedArray，arguments 對象等等）上建立一個迭代循環，調用自定義迭代鉤子，併爲每一個不一樣屬性的值執行語句

const array1 = ['a', 'b', 'c'];

for (const val of array1) {
  console.log(val);
}

// a
// b
// c

for of不能夠遍歷普通對象，想要遍歷對象的屬性，能夠用for in循環, 或內建的Object.keys()方法

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

不管是for...in仍是for...of語句都是迭代一些東西。它們之間的主要區別在於它們的迭代方式。

for...in語句以任意順序迭代對象的可枚舉屬性。

for...of 語句遍歷可迭代對象定義要迭代的數據。

如下示例顯示了與Array一塊兒使用時，for...of循環和for...in循環之間的區別。

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

let iterable = [3, 5, 7];
iterable.foo = 'hello';

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

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

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

總結：for in 通常用來遍歷對象的key、for of 通常用來遍歷數組的value