for each...in,for...in,for...of的examples和explaintion

(1)for...in

for...in語句用來叠代（或者說遍歷）對象的屬性或數組中的元素，並對每個屬性或方法執行運算。但是對象的方法不能由for...in語句來叠代，有些語句也不能有for...in來叠代，例如某些宿主對象的屬性。和實力成員不同的是，靜態成員也是不能叠代的。

例子：

1、用for...in語句遍歷myObject對象的屬性：

Js代碼

1. var myObject = {hisName: "javascript", age: 11, belonging: "ECMA" };
2. for(var prop in myObject){
3. document.write("myObject." + prop + "=" myObject[prop] + "<br>");
4. }

執行的結果將會顯示在瀏覽器中，如下：

1. myObject.hisName = javascript
2. myObject.belonging = ECMA
3. myObject.age = 11

2、下面用for...in語句遍歷數組的元素：

1. var myArray = new Array("one","two","three");
2. for(var index in myArray){
3. document.write("myArray[" + index + "] = " + myArray[index] + "<br>"):
4. }

執行的結果將會顯示在瀏覽器中，如下：

1. myArray[2] = three
2. myArray[1] = two
3. myArray[0] = one

(2)for each...in

與for...in語句不同的是，for each...in語句將遍歷對象屬性的值，而不是屬性的名稱。

例子：

1、用for each...in語句遍歷myObject對象的屬性：

1. var myObject = {hisName: "javascript", age: 11, belonging: "ECMA" };
2. for(var item in myObject){
3. document.write(item+ "<br>");
4. }

執行的結果將會顯示在瀏覽器中，如下：

1. javascript
2. ECMA
3. 11

2、下面用 for each...in 語句遍歷數組的元素：

1. var myArray = new Array("one","two","three");
2. for(var item in myArray){
3. document.write(item + "<br>"):
4. }

執行的結果將會顯示在瀏覽器中，如下：

1. three
2. two
3. one

(3)for...of

JavaScript 原有的for...in循環，只能獲得對象的鍵名，不能直接獲取鍵值。ES6 提供for...of循環，允許遍歷獲得鍵值。for...of循環調用遍歷器接口，數組的遍歷器接口只返回具有數字索引的屬性。這一點跟for...in循環也不一樣。

例子：

1、

var arr = [‘a‘, ‘b‘, ‘c‘, ‘d‘];

for (let a in arr) {
console.log(a); // 0 1 2 3
}

for (let a of arr) {
console.log(a); // a b c d
}

2、

let arr = [3, 5, 7];
arr.foo = ‘hello‘;

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

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

轉自：http://www.cnblogs.com/myzy/p/7238983.html

　　　http://hjj20040849.iteye.com/blog/1504155

10th week blog1