for...in
和 for...of
是两种用于迭代的循环结构,它们有不同的用途和行为。下面是它们的主要区别:
for...in
-
用途:
for...in
用于遍历对象的可枚举属性。 -
遍历内容: 它遍历对象的键(属性名),包括继承的属性(通过原型链)。
-
适用对象: 适合用于对象的属性遍历,不适用于数组或其他可迭代对象。
-
注意: 遍历顺序是无保证的,不一定是插入顺序。它也会遍历从原型链继承的属性。
-
用法
const obj = { a: 1, b: 2, c: 3 };
for (let key in obj) {
console.log(key, obj[key]);
}
// 输出
a 1
b 2
c 3
for...of
-
用途:
for...of
用于遍历可迭代对象(如数组、字符串、集合、映射等)。 -
遍历内容: 它遍历的是可迭代对象的值。
-
适用对象: 适合用于数组、字符串、
Map
、Set
和其他实现了迭代协议的对象。 -
注意: 遍历顺序是与插入顺序一致的。
-
用法
const arr = [10, 20, 30];
for (let value of arr) {
console.log(value);
}
// 输出
10
20
30
关键区别总结
-
迭代对象:
for...in
迭代对象的属性名。for...of
迭代可迭代对象的值。
-
适用场景:
for...in
主要用于对象的属性。for...of
主要用于数组、字符串及其他可迭代对象。
-
继承属性:
for...in
会遍历对象及其原型链上的可枚举属性。for...of
不会遍历原型链上的属性,仅关注对象的实际值。
注意: 在编程中,for...of
更常用于数组和其他可迭代对象的遍历,而 for...in
主要用于遍历对象的属性。
JavaScript基础