1. 程式人生 > >For each...in / For...in / For...of 的解釋和例子

For each...in / For...in / For...of 的解釋和例子

for each...in 語句在物件屬性的所有值上迭代指定的變數。對於每個不同的屬性,執行一個指定的語句。

語法:

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

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

語法:

for (variable in object)
{ ... }

引數:

variable
在每次迭代時,將不同的屬性名分配給 變數
object
      被迭代其列舉屬性的物件。
for...in不應該被用來迭代一個下標順序很重要的 array。 因為 for...in 並不能夠保證返回的是按一定順序的索引,但是它會返回所有可列舉屬性,包括非整數名稱的和繼承的。
例子
          var obj = {a:1, b:2, c:3}
          f or (var prop in obj) { console.log("obj." + prop + " = " + obj[prop]);
               }

// Output:
// "obj.a = 1"
// "obj.b = 2"
// "obj.c = 3"
例子 摘自 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/for...in#Description

 

for...of 語句建立一個迴圈遍歷可迭代物件(包括內建的字串、陣列,例如類陣列引數或NodeList物件、TypedArray、Map和Set以及使用者定義的迭代),呼叫一個定製的迭代鉤子,並用語句執行物件的每個不同屬性的值。

 

語法:

 

for (variable of iterable) {
  statement
}

ariable:

在每次迭代中,將不同屬性的值賦給變數。

iterable:

物件,其可迭代屬性被迭代。

例子:

迭代陣列

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

遍歷字串:

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
例子摘自https://devdocs.io/javascript/statements/for...of