for of 和 for in 都是JavaScript中用于遍歷對象或集合的循環(huán)結構，但它們的目的和用法有所不同：
相同點：
都是用來遍歷數(shù)據(jù)結構，可以用來處理數(shù)組、Set、Map等可迭代對象或對象屬性。
區(qū)別
1、遍歷對象的性質不同
for in 語句主要用于遍歷對象的可枚舉屬性，包括對象自身的屬性和從原型鏈繼承的屬性。
for of 語句則是遍歷實現(xiàn)了可迭代協(xié)議（Iterable Protocol）的對象，如數(shù)組、Set、Map、String、Generator對象等。它不會遍歷對象的屬性，而是遍歷對象的各個元素或值。
2、循環(huán)變量的含義不同
for in 循環(huán)中的迭代變量將依次獲取對象的屬性名。
for of 循環(huán)中的迭代變量將依次獲取可迭代對象的元素值。
3、使用場景不同
當需要遍歷數(shù)組元素或可迭代對象的值時，使用 for of 更合適。
當需要遍歷對象的所有屬性（包括可能繼承的屬性）時，使用 for in 更合適。
// 對于數(shù)組：
let array = ['apple', 'banana', 'cherry'];
// 使用 for of 遍歷數(shù)組元素：
for (let item of array) {
console.log(item); // 輸出 'apple', 'banana', 'cherry'
}
// 使用 for in 不適合遍歷數(shù)組，但也可用（不推薦）：
for (let key in array) {
console.log(array[key]); // 輸出數(shù)組的索引字符串 '0', '1', '2'
}
// 對于對象：
let obj = { a: 1, b: 2, c: 3 };
// 使用 for in 遍歷對象屬性：
for (let prop in obj) {
console.log(prop); // 輸出 'a', 'b', 'c'
console.log(obj[prop]); // 輸出 1, 2, 3
}
// 使用 for of 無法直接遍歷對象，但可以借助Object.values/Object.entries：
for (let value of Object.values(obj)) {
console.log(value); // 輸出 1, 2, 3
}
總之，for of 主要用于遍歷值，而 for in 主要用于遍歷鍵（屬性名）。在實際編程中，應根據(jù)具體需要選擇合適的遍歷方式。
另外在vue中文章來源：http://www.zghlxwxcb.cn/news/detail-838395.html
v-for="(item, index) of items" :key="item.id"
v-for="(item, index) in items" :key="item.id"
//兩者是等效的，item是value，index是key。均用于遍歷數(shù)組、Set、Map或其他可迭代對象
//循環(huán)生成的元素應該添加一個唯一的key屬性，如果沒有這樣的唯一標識符，也可以使用index作為key
Vue官方文檔更多時候是使用in關鍵字作為示例，建議使用in文章來源地址http://www.zghlxwxcb.cn/news/detail-838395.html
到了這里，關于JavaScript：for of 與for in的區(qū)別的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
![[HTML]Web前端開發(fā)技術26（HTML5、CSS3、JavaScript ）JavaScript基礎——喵喵畫網(wǎng)頁](https://imgs.yssmx.com/Uploads/2024/02/828994-1.png)
