JS中的for in和for of-有解無憂

在JavaScript中， for...in 和 for...of 都是用于迭代回圈的結構：

1. for...in 回圈：

for...in 回圈主要用于遍歷物件的可列舉屬性，這種回圈不僅遍歷物件自身的屬性，還會遍歷原型鏈上的可列舉屬性，它的語法如下：

for (variable in object) {
  // 執行的代碼
}

其中 variable 是屬性名， object 是要遍歷的物件，

注意：雖然 for...in 回圈也可以用于遍歷陣列，但這并不推薦，因為它會遍歷陣列的所有可列舉屬性，包括非索引屬性和原型鏈上的屬性，

示例：

const obj = { a: 1, b: 2, c: 3 };

for (const key in obj) {
  console.log( ${key}: ${obj[key]} );
}

// 輸出：
// a: 1
// b: 2
// c: 3

2. for...of 回圈：

for...of 回圈用于遍歷可迭代物件（例如陣列、字串、Map、Set等），這是ES6引入的新特性，它的語法如下：

for (variable of iterable) {
  // 執行的代碼
}

其中 variable 是每次迭代時的當前元素， iterable 是要遍歷的可迭代物件，

示例：

const arr = [1, 2, 3];

for (const value of arr) {
  console.log(value);
}

// 輸出：
// 1
// 2
// 3

for...in 和 for...of 回圈在JavaScript中具有不同的使用場景，它們之間的主要區別如下：

1. 遍歷物件：

- for...in ：適用于遍歷物件的可列舉屬性，包括原型鏈上的屬性，它會遍歷物件自身的屬性以及繼承自原型鏈的可列舉屬性，這對于處理物件屬性時非常有用，
- for...of ：不適用于普通物件，因為它們不是可迭代的，如果需要遍歷物件屬性，建議使用 for...in 回圈，

2. 遍歷陣列：

- for...in ：雖然可以用于遍歷陣列，但并不推薦，因為 for...in 會遍歷所有可列舉屬性，包括非索引屬性和原型鏈上的屬性，這可能導致意外的結果和性能問題，
- for...of ：推薦用于遍歷陣列，因為它只遍歷陣列的元素，不會遍歷非索引屬性或原型鏈上的屬性，

3. 遍歷其他可迭代物件（例如字串、Map、Set）：

- for...in ：不適用于遍歷這些可迭代物件，
- for...of ：可以遍歷這些可迭代物件，如字串、Map、Set等，

4. 性能：

- for...in ：由于需要遍歷物件的原型鏈，可能導致性能較差，
- for...of ：遍歷可迭代物件時，性能較好，

總結：

- 使用 for...in 回圈遍歷物件的可列舉屬性（包括原型鏈上的屬性），
- 使用 for...of 回圈遍歷可迭代物件，如陣列、字串、Map、Set等，
- 在處理陣列時，盡量避免使用 for...in 回圈，以防止意外的結果和性能問題，

在實際應用中，根據資料型別和所需操作來選擇合適的回圈結構，同時，還可以考慮使用其他迭代方法，如陣列的 forEach 、 map 、 filter 等高階函式，

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/550700.html