for-in
循环和 for-of
循环都是 JavaScript 中用于迭代数据结构(如数组、对象等)的循环结构,但它们有一些重要的区别。
for-in 循环:
for-in
循环用于迭代对象的可枚举属性,通常用于遍历对象的键名(属性名)。
const myObject = {
a: 1,
b: 2,
c: 3
};
for (let key in myObject) {
console.log(key); // 输出 'a', 'b', 'c'
console.log(myObject[key]); // 输出 1, 2, 3
}
注意:for-in
循环也会遍历对象的原型链上的属性,因此可能会包含一些你并不期望的属性。
for-of 循环:
for-of
循环用于迭代可迭代对象的元素,通常用于遍历数组或类数组对象(如字符串、NodeList 等)。
const myArray = [1, 2, 3];
for (let value of myArray) {
console.log(value); // 输出 1, 2, 3
}
注意:for-of
循环只能用于迭代实现了迭代器(iterator)接口的对象。
区别:
-
迭代的内容:
for-in
:遍历对象的键名。for-of
:遍历可迭代对象的元素。
-
适用范围:
for-in
:适用于对象,可以用来遍历对象的属性,包括继承的属性。for-of
:适用于可迭代对象,如数组、字符串、Map、Set 等。
-
遍历顺序:
for-in
:不保证属性的遍历顺序,遍历对象属性时可能会以不同的顺序返回。for-of
:遍历数组时会按照元素在数组中的顺序返回。
-
原型链上的属性:
for-in
:会遍历对象的原型链上的属性。for-of
:只能用于迭代实现了迭代器接口的对象。
总的来说,for-in
用于遍历对象的属性(包括继承的属性),而 for-of
用于遍历可迭代对象的元素。在大多数情况下,for-of
更适合用于遍历数组等数据结构。