结论先行:
for..in 用于遍历对象的属性名,也就是会将对象的属性名作为迭代变量来遍历。
它并不适用于遍历数组和类数组对象。
for...of 适用于遍历数组,也就是会将数组的属性值作为迭代变量来遍历。
具体分析:
for...in 和 for...of 都是 JavaScript 中的循环语句,但它们的作用和使用方式略有不同。
1、for..in 循环
for..in 循环用于遍历对象的可枚举属性,它会将对象的每个属性名称(或键名)作为迭代变量来遍历。
以下是 for...in 的基本语法
for (variable in object) {
}
其中,variable 表示每次迭代中当前属性的名称(或键名),object 表示要遍历的对象。
const obj = { a: 1, b: 2, c: 3 };
for (const key in obj) {
console.log(key, obj[key]);
}
// a 1
// b 2
// c 3
需要注意的是,for...in 循环遍历的是对象的可枚举属性,包括自有属性和继承属性。
因此,它并不适用于遍历数组和类数组对象。
2、for...of 循环
for...of 循环用于遍历可迭代对象的元素,它会将对象的每个元素作为迭代变量来遍历。
以下是 for..of 的基本语法:
for (variable of iterable) {
}
其中,variable 表示每次迭代中当前元素的值,iterable 表示要遍历的可迭代对象,如数组、字符串、Set、Map 等。
const arr = [1, 2, 3];
for (const item of arr) {
console.log(item);
}
// 1
// 2
// 3
需要注意的是,for...of 循环只能遍历实现了选代器接口 (lterator) 的对象,因此它不适用于普通的对象。
此外,它遍历的是对象的元素值,而不是键名或属性名
3、总结
for...in 适用于遍历对象的属性名,而 for...of 适用于遍历数组、字符串等可迭代对象的元素值。
4、什么是可迭代对象(Iterable)
可迭代对象(Iterable)是指实现了迭代器接口的对象,它可以被迭代(遍历)的对象。
在 JavaScript 中,可迭代对象通常是指具有内部属性
Symbol.iterator
的对象。
可迭代对象是指它具有内部属性 Symbol.iterator
的对象。
迭代器接口定义了一个 next()
方法,该方法返回一个包含 value
和 done
属性的对象。其中,value
表示当前迭代位置的值,done
表示迭代是否已经结束。
可迭代对象可以通过调用其内部属性
Symbol.iterator
来获取一个迭代器对象。迭代器对象用于在可迭代对象上进行迭代操作。每次调用迭代器对象的next()
方法,都会返回一个表示迭代结果的对象。
以下是一个简单的示例,展示了如何使用可迭代对象和迭代器对象:
const iterable = [1, 2, 3]; // 数组是可迭代对象
const iterator = iterable[Symbol.iterator](); // 获取迭代器对象
console.log(iterator.next()); // { value: 1, done: false }
console.log(iterator.next()); // { value: 2, done: false }
console.log(iterator.next()); // { value: 3, done: false }
console.log(iterator.next()); // { value: undefined, done: true }
在上面的示例中,数组
iterable
是一个可迭代对象,我们通过访问其内部属性Symbol.iterator
获取了一个迭代器对象iterator
。然后,我们可以使用迭代器对象的next()
方法来逐个获取数组中的元素,直到迭代结束。
需要注意的是,并不仅限于数组,许多 JavaScript 内置对象(如字符串、Set、Map 等)都是可迭代对象,也可以自定义对象实现迭代器接口,使其成为可迭代对象。
这样,我们就可以使用统一的方式来遍历不同类型的对象。