for...in 迴圈

for...in 語句用於對陣列或者物件的屬性進行迴圈操作。

for ... in 迴圈中的程式碼每執行一次，就會對陣列的元素或者物件的屬性進行一次操作。

for...in語句以任意順序遍歷一個物件的可列舉屬性。對於每個不同的屬性，語句都會被執行。

for (variable in object) {...}

variable

在每次迭代時，將不同的屬性名分配給變數。

object

被迭代列舉其屬性的物件。

for...in 迴圈只遍歷可列舉屬性。像 Array和 Object使用內建建構函式所建立的物件都會繼承自

陣列索引只是具有整數名稱的列舉屬性，並且與通用物件屬性相同。不能保證for ... in將以任何特定的順序返回索引。for ... in迴圈語句將返回所有可列舉屬性，包括非整數型別的名稱和繼承的那些。

因為迭代的順序是依賴於執行環境的，所以陣列遍歷不一定按次序訪問元素。因此當迭代訪問順序很重要的陣列時，最好用整數索引去進行for

語法：

for (變數 in 物件){    在此執行程式碼
}

“變數”用來指定變數，指定的變數可以是陣列元素，也可以是物件的屬性。

var mycars = new Array()
mycars[0] = "Saab"
mycars[1] = "Volvo"
mycars[2] = "BMW"

mycars.color = "white"

for (var x in mycars)
{
   console.log(mycars[x]);
}

var mycars = ["Saab", "Volvo", "BMW"];

mycars.color = "white"

for (var x in mycars)
{
   console.log(mycars[x]);
}
 

var mycars = {1:"Saab", 2:"Volvo", 3:"BMW"};

mycars.color = "white"

for (var x in mycars)
{
   console.log(mycars[x]);
}

var mycars = {"1":"Saab", "2":"Volvo", "3":"BMW"};

mycars.color = "white"

for (var x in mycars)
{
   console.log(mycars[x]);
}

for...of 迴圈

for … of迴圈是ES6引入的新的語法，用for … of迴圈遍歷集合

for...of語句在可迭代物件（包括 Array，Map，Set，String，TypedArray，arguments 物件等等）上建立一個迭代迴圈，呼叫自定義迭代鉤子，併為每個不同屬性的值執行語句。

for (variable of iterable) {
    //statements
}

var mycars = new Array()
mycars[0] = "Saab"
mycars[1] = "Volvo"
mycars[2] = "BMW"

mycars.color = "white"

for (var x of mycars)
{
   console.log(x);
}

ar mycars = ["Saab", "Volvo", "BMW"];

mycars.color = "white"

for (var x of mycars)
{
   console.log(x);
}

var mycars = {1:"Saab", 2:"Volvo", 3:"BMW"};

mycars.color = "white"

for (var x of mycars)
{
   console.log(x);
}
//錯誤用法

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); // logs 0, 1, 2, "foo", "arrCustom", "objCustom"
}

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

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

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

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

每個物件將繼承objCustom屬性，並且作為Array的每個物件將繼承arrCustom屬性，因為將這些屬性新增到Object.prototype和Array.prototype。由於繼承和原型鏈，物件iterable繼承屬性objCustom和arrCustom。

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

此迴圈僅以原始插入順序記錄iterable 物件的可列舉屬性。它不記錄陣列元素3, 5, 7 或hello，因為這些不是列舉屬性。但是它記錄了陣列索引以及arrCustom和objCustom。如果你不知道為什麼這些屬性被迭代，array iteration and for...in中有更多解釋。

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

這個迴圈類似於第一個，但是它使用hasOwnProperty() 來檢查，如果找到的列舉屬性是物件自己的（不是繼承的）。如果是，該屬性被記錄。記錄的屬性是0, 1, 2和foo，因為它們是自身的屬性（不是繼承的）。屬性arrCustom和objCustom不會被記錄，因為它們是繼承的。

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

該迴圈迭代並記錄iterable作為可迭代物件定義的迭代值，這些是陣列元素 3, 5, 7，而不是任何物件的屬性。

For 迴圈

for 迴圈是您在希望建立迴圈時常會用到的工具。

下面是 for 迴圈的語法：

for (語句 1; 語句 2; 語句 3)
  {
  被執行的程式碼塊
  }

語句 1 在迴圈（程式碼塊）開始前執行

語句 2 定義執行迴圈（程式碼塊）的條件

語句 3 在迴圈（程式碼塊）已被執行之後執行

例項

for (var i=0; i<5; i++)
  {
  x=x + "The number is " + i + "<br>";
  }

總結

for … in迴圈由於歷史遺留問題，它遍歷的實際上是物件的屬性名稱。一個Array陣列實際上也是一個物件，它的每個元素的索引被視為一個屬性。 

for … in迴圈將把name包括在內，但Array的length屬性卻不包括在內。

for … of迴圈則完全修復了這些問題，它只迴圈集合本身的元素。

以上

-------------------------------

樂意黎

2018-05-07