for...in
for...in
循环主要用于遍历对象的可枚举属性(包括继承的属性)。然而,它也可以遍历数组,但此时它遍历的是数组的索引(作为字符串),而不是数组的值。
对数组使用 for...in
:
const array = ['apple', 'banana', 'cherry'];
for (const key in array) {
console.log(key); // 输出:'0', '1', '2'(字符串形式的索引)
console.log(array[key]); // 输出数组的值
}
但是,使用 for...in
遍历数组通常不是一个好主意,因为它会遍历数组的所有可枚举属性,包括继承的属性(如果有的话),并且它不能按照数组索引的顺序遍历(虽然对于标准数组来说,它通常看起来是顺序的)。
对对象使用 for...in
:
const obj = { a: 1, b: 2, c: 3 };
for (const key in obj) {
console.log(key); // 输出:'a', 'b', 'c'(对象的属性名)
console.log(obj[key]); // 输出对应的属性值
}
for...of
for...of
循环用于遍历可迭代对象(包括 Array、Map、Set、String、TypedArray、函数的 arguments 对象等等)的值。
对数组使用 for...of
:
const array = ['apple', 'banana', 'cherry'];
for (const value of array) {
console.log(value); // 输出:'apple', 'banana', 'cherry'(数组的值)
}
这是遍历数组的首选方法,因为它直接遍历数组的值,而不是索引。
对对象使用 for...of
(通常不可行):
默认情况下,普通对象不是可迭代的,因此你不能用 for...of
直接遍历一个对象的属性。但你可以使用像 Object.keys()
, Object.values()
, 或 Object.entries()
这样的方法获取对象的可枚举属性,然后将它们转换为可迭代对象。
const obj = { a: 1, b: 2, c: 3 };
for (const key of Object.keys(obj)) {
console.log(key); // 输出:'a', 'b', 'c'(对象的属性名)
}
for (const value of Object.values(obj)) {
console.log(value); // 输出:1, 2, 3(对象的属性值)
}
for (const [key, value] of Object.entries(obj)) {
console.log(key, value); // 输出:['a', 1], ['b', 2], ['c', 3](属性名和值)
}
当遍历数组时,应优先使用 for...of
;当遍历对象的属性时,应使用 for...in
(但通常最好与 Object.keys()
, Object.values()
, 或 Object.entries()
一起使用)。