在JavaScript中,for…in和for…of都是用来遍历集合的循环控制结构,但它们之间存在一些重要的区别:
- 用途不同:
for…in循环用于遍历对象的属性。
for…of循环用于遍历可迭代对象
(如数组,字符串,Set,Map等)的值。 - 遍历的内容不同:
for…in会遍历对象所有的可枚举属性,包括原型链上的属性。
for…of遍历的是可迭代对象的实际值,不包括原型链上的值。 - 循环控制不同:
for…in循环使用对象的属性名作为循环变量的值。
for…of循环使用迭代器的值作为循环变量的值。 - 语法结构不同:
for…in语法:
for (let 变量 in 对象) {
// 使用变量来引用属性名
}
for…of语法:
for (let 变量 of 可迭代对象) {
// 使用变量来引用迭代器的值
}
- 迭代的可选性不同:
for…in循环中,即使属性是undefined或原型链上的属性,只要可枚举,也会被遍历到。
for…of循环中,只有可迭代对象中实际存在的值才会被遍历到。 - 与数组的索引关系:
for…in不直接与数组的索引相关联,所以不能直接获取索引。
for…of可以与数组的索引相关联,通过数组的entries()方法,可以同时获取索引和值。
// 对象
const obj = { a: 1, b: 2, c: 3 };
// 使用 for...in 遍历
for (let key in obj) {
console.log(key, obj[key]); // 输出 a=1, b=2, c=3
}
// 数组
const arr = [10, 20, 30];
// 使用 for...of 遍历
for (let value of arr) {
console.log(value); // 输出 10, 20, 30
}
// 使用 for...of 遍历数组索引和值
for (let [index, value] of arr.entries()) {
console.log(index, value); // 输出 0=10, 1=20, 2=30
}
在实际开发中,选择哪种循环结构通常取决于要遍历的数据类型和具体需求。