tenth week (1)

一、for each...in

      使用一個變量迭代一個對象的全部屬性值,對於每個屬性值,有一個指定的語句塊被執行.

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

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

    語法

    for each (variable in object) {

   statement

 }

  參數

      variable

用來遍歷屬性值的變量,前面的 var關鍵字是可選的.該變量是函數的局部變量而不是語句塊的局部變量.

  object

該對象的屬性值會被遍歷.

  statement

遍歷屬性值時執行的語句. 若是想要執行多條語句, 請用( { ... }) 將多條語句括住.

   描述

      一些對象的內置屬性是沒法被遍歷到的,包括全部的內置方法,例如String對象的indexOf方法.不過,大部分的用戶自定義屬性都是可遍歷的.

  示例

     警告:永遠不要使用for each...in語句遍歷數組,僅用來遍歷常規對象

   下面的代碼片斷演示如何遍歷一個對象的屬性值, 並計算它們的和:

 var sum = 0; var obj = {prop1: 5, prop2: 13, prop3: 8}; for each (var item in obj) { sum += item; } print(sum); // 輸出"26",也就是5+13+8的值
摘自https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/for_each...in

2.for...in
 以任意順序遍歷一個對象的可枚舉屬性。對於每一個不一樣的屬性，語句都會被執行.
 語法

    for (variable in object) {...}

  variable

   在每次迭代時，將不一樣的屬性名分配給 變量。

  object

   被迭代枚舉其屬性的對象。

描述

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

刪除，添加或者修改屬性

for...in 循環以任意序迭代一個對象的屬性（請參閱delete運算符，瞭解爲何不能依賴於迭代的表面有序性，至少在跨瀏覽器設置中）。若是一個屬性在一次迭代中被修改，在稍後被訪問，其在循環中的值是其在稍後時間的值。一個在被訪問以前已經被刪除的屬性將不會在以後被訪問。在迭代進行時被添加到對象的屬性，可能在以後的迭代被訪問，也可能被忽略。一般，在迭代過程當中最好不要在對象上進行添加、修改或者刪除屬性的操做，除非是對當前正在被訪問的屬性。這裏並不保證是否一個被添加的屬性在迭代過程當中會被訪問到，不保證一個修改後的屬性（除非是正在被訪問的）會在修改前或者修改後被訪問，不保證一個被刪除的屬性將會在它被刪除以前被訪問。

數組迭代和 for...in

提示：for...in不該該用於迭代一個 Array，其中索引順序很重要。

數組索引只是具備整數名稱的枚舉屬性，而且與通用對象屬性相同。不能保證for ... in將以任何特定的順序返回索引。for ... in循環語句將返回全部可枚舉屬性，包括非整數類型的名稱和繼承的那些。

由於迭代的順序是依賴於執行環境的，因此數組遍歷不必定按次序訪問元素。所以當迭代訪問順序很重要的數組時，最好用整數索引去進行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"

下面的函數說明了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"

摘自https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/for...in

3.for...of

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

語法

for (variable of iterable) {
    //statements
}

variable

在每次迭代中，將不一樣屬性的值分配給變量。

iterable

被迭代枚舉其屬性的對象。

示例

迭代Array

let iterable = [10, 20, 30]; for (let value of iterable) { value += 1; console.log(value); } // 11 // 21 // 31

若是你不想修改語句塊中的變量 , 也可使用const代替let。

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

迭代String

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

迭代 TypedArray

let iterable = new Uint8Array([0x00, 0xff]); for (let value of iterable) { console.log(value); } // 0 // 255

迭代Map

let iterable = new Map([["a", 1], ["b", 2], ["c", 3]]); for (let entry of iterable) { console.log(entry); } // ["a", 1] // ["b", 2] // ["c", 3] for (let [key, value] of iterable) { console.log(value); } // 1 // 2 // 3

迭代 Set

let iterable = new Set([1, 1, 2, 2, 3, 3]); for (let value of iterable) { console.log(value); } // 1 // 2 // 3

迭代 arguments 對象

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

迭代 DOM 集合

迭代 DOM 元素集合，好比一個NodeList對象：下面的例子演示給每個 article 標籤內的 p 標籤添加一個 "read" 類。

//注意：這隻能在實現了NodeList.prototype[Symbol.iterator]的平臺上運行 let articleParagraphs = document.querySelectorAll("article > p"); for (let paragraph of articleParagraphs) { paragraph.classList.add("read"); }

關閉迭代器

對於for...of的循環，能夠由break, throw 或return終止。在這些狀況下，迭代器關閉。

function* foo(){ yield 1; yield 2; yield 3; }; for (let o of foo()) { console.log(o); break; // closes iterator, triggers return }

迭代生成器

你還能夠迭代一個生成器：

function* fibonacci() { // 一個生成器函數 let [prev, curr] = [0, 1]; for (;;) { // while (true) { [prev, curr] = [curr, prev + curr]; yield curr; } } for (let n of fibonacci()) { console.log(n); // 當n大於1000時跳出循環 if (n >= 1000) break; }

不要重用生成器

生成器不該該重用，即便for...of循環的提早終止，例如經過break關鍵字。在退出循環後，生成器關閉，並嘗試再次迭代，不會產生任何進一步的結果。

var gen = (function *(){ yield 1; yield 2; yield 3; })(); for (let o of gen) { console.log(o); break;//關閉生成器 } //生成器不該該重用，如下沒有意義！ for (let o of gen) { console.log(o); }

迭代其餘可迭代對象

你還能夠迭代顯式實現可迭代協議的對象：

var iterable = { [Symbol.iterator]() { return { i: 0, next() { if (this.i < 3) { return { value: this.i++, done: false }; } return { value: undefined, done: true }; } }; } }; for (var value of iterable) { console.log(value); } // 0 // 1 // 2
摘自https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/for...of