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

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

區別 可選 有一個 不同 將不 ret strong clas 圖片

參考博客:

https://www.cnblogs.com/ruoqiang/p/6217929.html

https://www.cnblogs.com/dupd/p/5895474.html

1 for ...in 遍歷對象

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

語法:

for (variable in object) {...}

參數:

variable
  在每次叠代時,將不同的屬性名分配給變量
object
  被叠代其枚舉屬性的對象。
技術分享圖片
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"
技術分享圖片

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

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

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

2 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語句遍歷數組,僅用來遍歷常規對象。

技術分享圖片
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的值
技術分享圖片

3 for of遍歷對象

循環遍歷對象的值,是遍歷鍵值對後面的那一個value哦 ,與for in遍歷key相反

技術分享圖片
var myArry =[1,2,3,4];
myArry.desc =‘four‘;
for(var value of myArry){
  console.log(value)
}
//1
//2
//3
//4
技術分享圖片
  • 這是最簡潔、最直接的遍歷數組元素的語法
  • 這個方法避開了for-in循環的所有缺陷
  • 與forEach()不同的是,它可以正確響應break、continue和return語句

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