JavaScript 中的 `for...in` 和 `for...of`
JavaScript 中的 for...in
和 for...of
是两种常用的迭代循环语句。它们的用途和行为是不同的。
for...in
循环用于循环遍历对象的属性,它会遍历对象的可枚举属性和原型链上的可枚举属性。
const obj = { a: 1, b: 2 };
for (let prop in obj) {
console.log(prop); // 输出 'a' 和 'b'
}
上面的代码遍历了 obj
对象的所有属性,并输出了属性名称。
需要注意的是,for...in
循环不保证属性遍历的顺序是固定的,所以不能在遍历对象的时候依赖属性遍历的顺序。
另外,for...in
循环还有一个重要的用途,就是遍历对象的原型链上的属性。
function Person() {
this.name = 'Tom';
}
Person.prototype.age = 18;
const p = new Person();
for (let prop in p) {
console.log(prop); // 输出 'name' 和 'age'
}
上面的代码中,p
对象既有自己的属性,也有继承自原型的属性。for...in
循环可以同时遍历这两种属性。
for...of
循环用于遍历可迭代对象(包括 Array
、Map
、Set
、String
等对象)的元素。它只遍历对象的值,而不是键或者属性。
const arr = ['a', 'b', 'c'];
for (let item of arr) {
console.log(item); // 输出 'a'、'b'、'c'
}
上面的代码遍历了 arr
数组中所有的元素,并输出每个元素的值。
另外,需要注意的是,for...of
循环只能用于遍历迭代对象的值,而不能用于遍历对象的属性。如果用于非迭代对象上,将会出现类型错误的异常。
const obj = { a: 1, b: 2 };
for (let item of obj) {
console.log(item); // 抛出 TypeError 异常: obj is not iterable
}
上面的代码中,obj
不是一个可迭代对象,所以使用 for...of
循环将会抛出一个 TypeError
异常。