js中forin和forof区别
原创JavaScript 中 for...in 和 for...of 的区别
在 JavaScript 中,for...in
和 for...of
是两种常用于遍历数据结构的循环语句。尽管它们都可以用来遍历数组或对象,但它们之间存在一些重要的差异。下面我们将详细探讨这些区别。
for...in 循环
for...in
循环重点用于遍历对象的 可枚举属性,包括原型链上的所有可枚举属性。以下是使用 for...in
遍历对象的示例:
const obj = { a: 1, b: 2, c: 3 };
for (let key in obj) {
console.log(`属性名:${key},属性值:${obj[key]}`);
}
需要注意的是,for...in
循环不仅遍历对象自身的属性,还会遍历从原型继承的属性。故而,在遍历数组时不推荐使用 for...in
,由于它会遍历所有可枚举的属性,包括数组索引以外的属性(如原型上的属性)。
for...of 循环
for...of
循环是 ES6 中引入的,它重点用来遍历可迭代对象,如数组、字符串、Map、Set 等。这种循环语句不会遍历对象的属性,而是遍历对象的 值。以下是使用 for...of
遍历数组的示例:
const array = [1, 2, 3];
for (let value of array) {
console.log(value);
}
for...of
循环的语法比 for...in
更简洁,并且它直接迭代对象的值,而不是属性名,这意味着你不需要通过属性名来访问值。
重点区别
for...in
遍历对象的 键,而for...of
遍历对象的 值。for...in
可以遍历任何对象,无论它们是否具有迭代标志(iterable),但通常只应该用于遍历对象的键。for...of
只遍历具有迭代标志(如Symbol.iterator
方法)的迭代对象,如数组、字符串等。for...in
遍历时会包括原型链上的所有可枚举属性,而for...of
只遍历当前对象自身的元素。- 对于数组来说,
for...of
循环的性能通常比for...in
更好。
结论
在处理数组和其它可迭代对象时,推荐使用 for...of
循环。而对于对象,尤其是那些你想要遍历所有可枚举属性的对象,使用 for...in
更为合适。需要注意的是,使用 for...in
遍历数组时,应该结合 hasOwnProperty
方法来过滤出对象自身的属性:
const array = [1, 2, 3];
for (let key in array) {
if (array.hasOwnProperty(key)) {
console.log(`索引:${key},值:${array[key]}`);
}
}