1、For each...in

?

for each...in?語句在對象屬性的所有值上迭代指定的變量。對于每個不同的屬性，執行一個指定的語句。

語法：

for each (variable in object) {statement }

variable：

變量，以迭代屬性值，可以選擇用var關鍵字聲明。這個變量是函數的局部變量，而不是循環的局部變量。

object：

對象，該對象迭代屬性。

statement：

為每個屬性執行的語句。要在循環中執行多個語句，使用block語句({…)來對這些語句進行分組。

描述：

一些內置屬性沒有迭代。這些方法包括對象的所有內置方法，例如String的indexOf方法。然而，所有用戶定義的屬性都被迭代。 警告：不要在數組中使用這樣的循環。只在對象上使用。 下面的代碼片段迭代對象的屬性，計算它們的和： var sum = 0; var obj = {prop1: 5, prop2: 13, prop3: 8}; for each (var item in obj) { sum += item; } console.log(sum); // logs "26", which is 5+13+8

?

2、For...in

for...in 語句遍歷對象的所有非符號可枚舉屬性。

語法：

for (variable in object) { ... }

variable：

在每次迭代中都為變量分配不同的屬性名。

object：

對象，其非符號可枚舉屬性被迭代。

描述：

一個 for...in 循環只迭代可枚舉的非符號屬性。從數組和對象等內置構造函數創建的對象從對象繼承了不可枚舉的屬性。原型和字符串。原型，例如String的indexOf()方法或Object的toString()方法。循環將遍歷對象本身的所有可枚舉屬性，以及對象從其構造函數原型繼承的那些屬性(靠近原型鏈中的對象的屬性將覆蓋原型的屬性)。

Deleted, added, or modified properties:

一個for...in循環以任意順序迭代對象的屬性(請參閱delete操作符，以了解為什么不能依賴于看起來的迭代順序，至少在跨瀏覽器設置中是這樣)。

如果一個屬性在一次迭代中被修改，然后在稍后的時間訪問，它在循環中的值就是它在以后的時間的值。在訪問之前被刪除的屬性以后將不會被訪問。添加到正在進行迭代的對象中的屬性可以被訪問，也可以從迭代中省略。

通常，最好不要添加、修改或刪除屬性。

Array iteration and for...in：

注意:for…in不應該用于遍歷索引順序很重要的數組。

數組索引只是具有整數名稱的可枚舉屬性，否則與一般對象屬性相同。不能保證for…in將以任何特定順序返回索引。for…循環語句將返回所有可枚舉的屬性，包括具有非整數名稱的屬性和繼承的屬性。

因為迭代的順序與實現相關，所以在數組上迭代可能不會以一致的順序訪問元素。因此，最好使用帶有數值索引的for循環。

只迭代自己的屬性：

如果您只想考慮附加到對象本身的屬性，而不是它的原型，那么使用getOwnPropertyNames()或執行hasOwnProperty()檢查(也可以使用propertyIsEnumerable)。或者，如果您知道不會有任何外部代碼干擾，您可以使用check方法擴展內置原型。

例子：

下面的函數將對象作為其參數。然后它遍歷對象的所有可枚舉的非符號屬性，并返回一個屬性名稱及其值的字符串。var obj = {a: 1, b: 2, c: 3};

for (const 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 (const prop in obj) { if (obj.hasOwnProperty(prop)) { console.log(`obj.${prop} = ${obj[prop]}`); } } // Output: // "obj.color = red"

?

3、For...of

for...of 語句創建一個循環遍歷可迭代對象(包括內置的字符串、數組，例如類數組參數或NodeList對象、TypedArray、Map和Set以及用戶定義的迭代)，調用一個定制的迭代鉤子，并用語句執行對象的每個不同屬性的值。

語法：

for (variable of iterable) {statement }

variable：

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

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

迭代映射：

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

迭代一個集合：

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

迭代參數對象：

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

查看更多例子請訪問：https://devdocs.io/javascript/statements/for...of

?

?

?

?

?

轉載于:https://www.cnblogs.com/DJOSIMON/p/9935301.html

總結

以上是生活随笔為你收集整理的For each...in / For...in / For...of 的解释与例子的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。