在JavaScript中， for...in 和 for...of 都是用于迭代循環(huán)的結(jié)構(gòu)：
?文章來源：http://www.zghlxwxcb.cn/news/detail-419187.html
1. for...in 循環(huán)：
for...in 循環(huán)主要用于遍歷對象的可枚舉屬性。這種循環(huán)不僅遍歷對象自身的屬性，還會遍歷原型鏈上的可枚舉屬性。它的語法如下：
for (variable in object) { // 執(zhí)行的代碼 }
其中 variable 是屬性名， object 是要遍歷的對象。
注意：雖然 for...in 循環(huán)也可以用于遍歷數(shù)組，但這并不推薦，因為它會遍歷數(shù)組的所有可枚舉屬性，包括非索引屬性和原型鏈上的屬性。
?
示例：
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 循環(huán)：
for...of 循環(huán)用于遍歷可迭代對象（例如數(shù)組、字符串、Map、Set等），這是ES6引入的新特性。它的語法如下：
for (variable of iterable) { // 執(zhí)行的代碼 }
其中 variable 是每次迭代時的當(dāng)前元素， iterable 是要遍歷的可迭代對象。
?
示例：
const arr = [1, 2, 3]; for (const value of arr) { console.log(value); } // 輸出： // 1 // 2 // 3
?
?
? for...in 和 for...of 循環(huán)在JavaScript中具有不同的使用場景，它們之間的主要區(qū)別如下：
1. 遍歷對象：
- for...in ：適用于遍歷對象的可枚舉屬性，包括原型鏈上的屬性。它會遍歷對象自身的屬性以及繼承自原型鏈的可枚舉屬性。這對于處理對象屬性時非常有用。
- for...of ：不適用于普通對象，因為它們不是可迭代的。如果需要遍歷對象屬性，建議使用 for...in 循環(huán)。
2. 遍歷數(shù)組：
- for...in ：雖然可以用于遍歷數(shù)組，但并不推薦。因為 for...in 會遍歷所有可枚舉屬性，包括非索引屬性和原型鏈上的屬性。這可能導(dǎo)致意外的結(jié)果和性能問題。
- for...of ：推薦用于遍歷數(shù)組，因為它只遍歷數(shù)組的元素，不會遍歷非索引屬性或原型鏈上的屬性。
3. 遍歷其他可迭代對象（例如字符串、Map、Set）：
- for...in ：不適用于遍歷這些可迭代對象。
- for...of ：可以遍歷這些可迭代對象，如字符串、Map、Set等。
4. 性能：
- for...in ：由于需要遍歷對象的原型鏈，可能導(dǎo)致性能較差。
- for...of ：遍歷可迭代對象時，性能較好。
?
總結(jié)：
- 使用 for...in 循環(huán)遍歷對象的可枚舉屬性（包括原型鏈上的屬性）。
- 使用 for...of 循環(huán)遍歷可迭代對象，如數(shù)組、字符串、Map、Set等。
- 在處理數(shù)組時，盡量避免使用 for...in 循環(huán)，以防止意外的結(jié)果和性能問題。
?
在實際應(yīng)用中，根據(jù)數(shù)據(jù)類型和所需操作來選擇合適的循環(huán)結(jié)構(gòu)。同時，還可以考慮使用其他迭代方法，如數(shù)組的 forEach 、 map 、 filter 等高階函數(shù)。文章來源地址http://www.zghlxwxcb.cn/news/detail-419187.html
到了這里，關(guān)于JS中的for in和for of的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
