你好，我是沐爸，歡迎點(diǎn)贊、收藏、評論和關(guān)注。

在 JavaScript 中，for...in 和 for...of 是兩種用于遍歷數(shù)組（或其他可迭代對象）的循環(huán)語句，但它們之間存在顯著的差異。

一、遍歷數(shù)組

for…in

const arr = ['apple', 'banana', 'cherry']for (const index in arr) {console.log(index, arr[index])
}
// 0 apple
// 1 banana
// 2 cherry

遍歷數(shù)組的索引，訪問數(shù)組元素通過 arr[index]形式。

for…of

const arr = ['apple', 'banana', 'cherry']for (const value of arr) {console.log(value)
}
// apple
// banana
// cherry

遍歷數(shù)組元素，不能訪問索引。

二、遍歷對象

for...in

const obj = {name: '張三',age: 20
}for (const key in obj) {console.log(key, obj[key])
}
// name 張三
// age 20

遍歷對象的鍵（key），通過obj[key]訪問屬性的值。

for…of

const obj = {name: '張三',age: 20
}for (const key of obj) {console.log(key)
}
// TypeError: obj is not iterable

for...of 循環(huán)默認(rèn)并不支持直接遍歷對象的屬性。因?yàn)?code>for...of循環(huán)是為可迭代對象（如Array, Map, Set, arguments等）設(shè)計的，這些對象都有一個[Symbol.iterator]方法。

所以，常見的做法是結(jié)合 Object.keys()、Object.values或者Object.entries() 進(jìn)行遍歷。

const obj = {name: '張三',age: 20
}for (const key of Object.keys(obj)) {console.log(key, obj[key])
}
// name 張三
// age 20for (const value of Object.values(obj)) {console.log(value)
}
// 張三
// 20for (const [key, value] of Object.entries(obj)) {console.log(key, value)
}
// name 張三
// age 20

另外，for…in 和 for…of 在遍歷對象原型上的屬性也有區(qū)別，for…in 會遍歷對象原型上的屬性，for…of 不會。

function Person(name, age) {this.name = namethis.age = age
}Person.prototype.say = function() {console.log('My Name is ' + this.name)
}const obj = new Person('張三', 20)for (const key in obj) {console.log(key, obj[key])
}
// name 張三
// age 20
// say [Function (anonymous)]for (const key of Object.keys(obj)) {console.log(key, obj[key])
}
// name 張三
// age 20

說準(zhǔn)確點(diǎn)，并不是 for…of 不會遍歷對象原型上的屬性，而是 for…of 借助的 Object.keys()、Object.values、Object.entries()方法返回的數(shù)組只包含對象自身的屬性和值。

如果想讓 for…in 跟 for…of 一樣只遍歷對象自身的屬性，可使用 hasOwnProperty。

for (const key in obj) {if (obj.hasOwnProperty(key)) {console.log(key, obj[key])}
}

三、遍歷其他類型數(shù)據(jù)

1.字符串

let str = "hello"for (const index in str) {console.log(index, str[index])
}
// 0 h
// 1 e
// 2 l
// 3 l
// 4 ofor (const value of str) {console.log(value)
}
// h
// e
// l
// l
// o

2.Set 結(jié)構(gòu)

const set = new Set(['apple', 'banana', 'cherry'])for (const value in set) {console.log(value) // 這里幾乎不會執(zhí)行任何有用的操作，因?yàn)閟et沒有可枚舉的屬性
}for (const value of set) {console.log(value)
}
// 輸出（順序可能不同，因?yàn)镾et是無序的）：
// apple
// banana
// cherry

3.Map結(jié)構(gòu)

const map = new Map([['a', 1], ['b', 2], ['c', 3]])for (const value in map) {console.log(value) // 這里幾乎不會執(zhí)行任何有用的操作，因?yàn)閙ap沒有可枚舉的屬性
}for (const [key, value] of map) {console.log(key, value) 
}
// 輸出：  
// a 1  
// b 2  
// c 3

4.類數(shù)組arguments

function fn(a, b, c) {for (const index in arguments) {console.log(index, arguments[index])}// 0 zhangsan// 1 20// 2 男for (const value of arguments) {console.log(value)}// zhangsan// 20// 男
}fn('zhangsan', 20, '男')

四、總結(jié)

通過以上示例可知，兩者主要有以下區(qū)別：

• for...in：
  • 遍歷對象的可枚舉屬性（包括原型鏈上的）
  • 對于數(shù)組，遍歷的是索引（字符串類型）。
  • 不可遍歷 Set 和 Map 結(jié)構(gòu)
• for...of：
  • 遍歷可迭代對象的值，直接訪問值而不是鍵名或索引。
  • 不可直接變量對象，需要借助 Object.keys/values/entries。
  • 另外可遍歷 Set 和 Map 結(jié)構(gòu)

好了，分享結(jié)束，謝謝點(diǎn)贊，下期再見。