1. 程式人生 > >for each...in for...in for...of

for each...in for...in for...of

for each...in

使用一個變數迭代一個物件的所有屬性值,對於每一個屬性值,有一個指定的語句塊被執行.

for each...in 是 ECMA-357 (E4X) 標準的一部分, 大部分非Mozilla瀏覽器都沒有實現該標準, E4X並不是 ECMAScript 標準的一部分.

作為ECMA-357(E4X)標準的一部分,for each...in語句已被廢棄,E4X中的大部分特性已被刪除,但考慮到向後相容,for each...in只會被禁用而不會被刪除,可以使用ES6中新的for...of語句來代替.

語法:

for each (variable in object) {
  statement
}

  

引數:

variable
用來遍歷屬性值的變數,前面的 var關鍵字是可選的.該變數是函式的區域性變數而不是語句塊的區域性變數.
object
該物件的屬性值會被遍歷.
statement
遍歷屬性值時執行的語句. 如果想要執行多條語句, 請用( { ... }) 將多條語句括住.

 

一些物件的內建屬性是無法被遍歷到的,包括所有的內建方法,例如String物件的indexOf方法.不過,大部分的使用者自定義屬性都是可遍歷的.

警告:永遠不要使用for each...in語句遍歷陣列,僅用來遍歷常規物件。

for...in 

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

語法:

for (variable in object) {...}

  

引數:

variable
在每次迭代時,將不同的屬性名分配給 變數
object
被迭代其列舉屬性的物件。

 

for..in 不應該被用來迭代一個下標順序很重要的 Array .

陣列索引僅是可列舉的整數名,其他方面和別的普通物件屬性沒有什麼區別。for...in 並不能夠保證返回的是按一定順序的索引,但是它會返回所有可列舉屬性,包括非整數名稱的和繼承的。

因為迭代的順序是依賴於執行環境的,所以陣列遍歷不一定按次序訪問元素。 因此當迭代那些訪問次序重要的 arrays 時用整數索引去進行 for 迴圈 (或者使用 Array.prototype.forEach() 或 for...of 迴圈) 。

僅迭代自身的屬性

如果你只要考慮物件本身的屬性,而不是它的原型,那麼使用 getOwnPropertyNames() 或執行  hasOwnProperty() 來確定某屬性是否是物件本身的屬性 (也能使用propertyIsEnumerable)。另外,如果你知道外部不存在任何的干擾程式碼,你可以擴充套件內建原型與檢查方法。

var obj = {a:1, b:2, c:3};
    
for (var prop in obj) {
  console.log("obj." + prop + " = " + obj[prop]);
}

// Output:
// "obj.a = 1"
// "obj.b = 2"
// "obj.c = 3"

  

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("o." + prop + " = " + obj[prop]);
  } 
}

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

  

for...of

 ECMAScript 6新方法,使用時參考https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/for...of

  • for...of - 一個相似的語法,用來遍歷可迭代物件,有時候效果等同於for each...in語句.
  • 對於for...of的迴圈,可以由breakthrow 或return終止。在這些情況下,迭代器關閉。
  • 不要重用生成器

    生成器不應該重用,即使for...of迴圈的提前終止,例如通過break關鍵字。在退出迴圈後,生成器關閉,並嘗試再次迭代,不會產生任何進一步的結果。