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

for…in循環

for…in 循環只遍歷可枚舉屬性（包括它的原型鏈上的可枚舉屬性）。

var obj = {a:1, b:2, c:3};

for (var prop in obj) {
  console.log(prop ); // a b c
}

一個Array數組也是一個對象，數組的每個元素的索引被視爲屬性名稱，所以可以看到使用for…in 循環Array數組，拿到的其實是每個元素的索引

var a = [ 'A' , 'B', 'C' ]；

a.name = ' Hello ' ;

for (var  i   in  a ){
	alert ( i )        //   '0' , '1' , '2' , 'name'
}

下面的函數說明了hasOwnProperty()的用法：繼承的屬性不顯示。

var triangle = {a: 1, b: 2, c: 3};

function ColoredTriangle() {
  this.color = 'red';
}

ColoredTriangle.prototype = triangle;

var obj = new ColoredTriangle();

for (var prop in obj) {
  if (obj.hasOwnProperty(prop)) {
    console.log(`obj.${prop} = ${obj[prop]}`);
  } 
}

// Output:
// "obj.color = red"

for…of 循環

for … of循環是ES6引入的新的語法.用來獲取一對鍵值對中的值.一個數據結構只要部署了 Symbol.iterator 屬性, 就被視爲具有 iterator接口, 就可以使用 for of循環。

let iterable = [10, 20, 30];
for (const value of iterable) {
  console.log(value);
}
// 10
// 20
// 30

let iterable = "boo";
for (let value of iterable) {
  console.log(value);
}
// "b"
// "o"
// "o"

(function() {
  for (let argument of arguments) {
    console.log(argument);
  }
})(1, 2, 3);

// 1
// 2
// 3

下面是一個使用 break 語句，跳出for…of循環的例子。

for (var n of fibonacci) {
  if (n > 1000)
    break;
  console.log(n);
}

for…in循環與for…of 循環的區別

• for…in

1. for…in循環可以遍歷數組的鍵名。
2. 數組的鍵名是數字，但是for…in循環是以字符串作爲鍵名“0”、“1”、“2”等等。
3. 某些情況下，for…in循環會以任意順序遍歷鍵名。
4. for…in循環主要是爲遍歷對象而設計的，不適用於遍歷數組。
5. 語句以任意順序迭代對象的可枚舉屬性

• for…of

1. 不同於forEach方法，它可以與break、continue和return配合使用。
2. 提供了遍歷所有數據結構的統一操作接口。
3. 語句遍歷可迭代對象定義要迭代的數據

注意

1. for…in不應該用於迭代一個 Array，其中索引順序很重要