淺談for...in與for....of
for...in:
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不應該用於迭代一個Array，其中索引順序很重要。陣列索引只是具有整數名稱的列舉屬性，並且與通用物件屬性相同。不能保證
for ... in將以任何特定的順序返回索引。for ... in迴圈語句將返回所有可列舉屬性，包括非整數型別的名稱和繼承的那些。因為迭代的順序是依賴於執行環境的，所以陣列遍歷不一定按次序訪問元素。因此當迭代訪問順序很重要的陣列時，最好用整數索引去進行
for迴圈（或者使用Array.prototype.forEach()或for...of迴圈）。例如：
<!DOCTYPE html>
<html>
<body><p>點選按鈕迴圈物件屬性。</p>
<button onclick="myFunction()">點我</button>
<p id="demo"></p>
<script>
function myFunction() {
var person = {fname:"John", lname:"Doe", age:25};
var text = "";
var x;
for (x in person) {text += person[x] + " ";
}
document.getElementById("demo").innerHTML = text;
}
</script></body>
</html>for....of:
for...of語句在可迭代物件（包括Array，Map，Set，String，TypedArray，arguments 物件等等）上建立一個迭代迴圈，呼叫自定義迭代鉤子，併為每個不同屬性的值執行語句。語法
for (variable of iterable) { //statements }-
variable -
在每次迭代中，將不同屬性的值分配給變數。 -
iterable -
被迭代列舉其屬性的物件。 - 例如：
function* foo(){
yield 1;
yield 2;
}for (let o of foo()) {
console.log(o);
// expected output: 1break; // closes iterator, triggers return
}for...of與for...in的區別無論是
for...in還是for...of語句都是迭代一些東西。它們之間的主要區別在於它們的迭代方式。for...of語句遍歷可迭代物件定義要迭代的資料。for each....in:
使用一個變數迭代一個物件的所有屬性值,對於每一個屬性值,有一個指定的語句塊被執行.
作為ECMA-357(E4X)標準的一部分,for each...in語句已被廢棄,E4X中的大部分特性已被刪除,但考慮到向後相容,for each...in只會被禁用而不會被刪除,可以使用ES6中新的for...of語句來代替.(bug 791343.)
for each...in是 ECMA-357 (E4X) 標準的一部分, 大部分非Mozilla瀏覽器都沒有實現該標準, E4X並不是 ECMAScript 標準的一部分.語法
for each (variable in object) { statement }-
variable -
用來遍歷屬性值的變數,前面的
var關鍵字是可選的.該變數是函式的區域性變數而不是語句塊的區域性變數.
-
object - 該物件的屬性值會被遍歷.
-
statement -
遍歷屬性值時執行的語句. 如果想要執行多條語句, 請用(
{ ... }) 將多條語句括住.
描述
一些物件的內建屬性是無法被遍歷到的,包括所有的內建方法,例如String物件的
indexOf方法.不過,大部分的使用者自定義屬性都是可遍歷的.警告:永遠不要使用for each...in語句遍歷陣列,僅用來遍歷常規物件。
(以上內容均來源於網路摘抄)
-