东盟建设工程有限公司网站,自己做网站用什么app,网站开发与技术维护,内容电商网站有哪些在 JavaScript 编程中#xff0c;for...of 和 for...in 是常用的循环语法#xff0c;但它们在使用时可能会引发一些意想不到的问题。本文将分享我在使用这两种循环时所遇到的坑和经验。
两者的区别#xff1a;
适用对象类型#xff1a; for…of#xff1a;主要用于遍历可…在 JavaScript 编程中for...of 和 for...in 是常用的循环语法但它们在使用时可能会引发一些意想不到的问题。本文将分享我在使用这两种循环时所遇到的坑和经验。
两者的区别
适用对象类型 for…of主要用于遍历可迭代对象例如数组、字符串、Set、Map等可以获取到迭代对象的值。for…in主要用于遍历对象的属性包括原型链上的属性可以获取到属性名键。
遍历顺序 for…of按照对象的顺序迭代一般用于遍历有序集合。for…in无法保证属性的遍历顺序可能会导致属性的无序输出。
迭代内容 for…of迭代的是对象的值本身例如数组中的元素、字符串中的字符等。for…in迭代的是对象的属性名需要通过属性名访问属性值。
支持情况 for…of在 ES6 中引入适用于可迭代对象如数组、字符串等。for…in在早期版本的 JavaScript 中就存在用于遍历对象的属性。但是不适用于数组等可迭代对象因为它会遍历出额外的属性。
性能 for…of通常性能比 for…in 更好因为它不需要遍历原型链上的属性。
示例代码演示两者的不同用法
// for...of 遍历数组
const arr [1, 2, 3, 4];
for (const element of arr) {console.log(element); // 输出数组的每个元素
}// for...in 遍历对象的属性
const obj { a: 1, b: 2, c: 3 };
for (const key in obj) {console.log(key); // 输出属性名 a, b, cconsole.log(obj[key]); // 输出属性值 1, 2, 3
}// for...of 遍历数组
const arr [1, 2, 3, 4];
for (const element of arr) {console.log(element); // 输出数组的每个元素
}// for...in 遍历对象的属性
const obj { a: 1, b: 2, c: 3 };
for (const key in obj) {console.log(key); // 输出属性名 a, b, cconsole.log(obj[key]); // 输出属性值 1, 2, 3
}总之如果你想遍历数组或其他可迭代对象的值使用 for…of如果你想遍历对象的属性使用 for…in。
for…of 遍历数组的陷阱
当使用 for...of 循环来遍历数组时我们通常是为了遍历数组的元素而不是索引。然而在使用 for...of 循环时有一些常见陷阱需要避免特别是关于循环索引和遍历顺序的问题。下面是如何正确使用 for...of 循环来遍历数组以及如何避免这些陷阱的解释
1. 遍历元素而非索引 使用 for...of 循环时我们直接遍历数组的元素而不需要关心索引的细节。这样可以使代码更加简洁易读。例如 const array [1, 2, 3, 4, 5];
for (const element of array) {console.log(element); // 输出数组的每个元素
}2. 避免使用索引 避免在 for...of 循环中使用额外的索引变量因为 for...of 循环本身已经直接提供了数组的每个元素。这有助于减少代码复杂性和错误的机会。不推荐的写法 const array [1, 2, 3, 4, 5];
for (let i 0; i array.length; i) {console.log(array[i]); // 避免这种额外使用索引的方式
}3. 保持遍历顺序 for...of 循环保证按照数组中的顺序进行遍历因此它适用于需要按顺序处理元素的场景。这确保了元素的处理顺序与它们在数组中的位置一致。
4. 不会遍历稀疏元素 for...of 循环不会遍历数组中的稀疏元素未赋值的元素只会遍历有实际值的元素。这有助于避免不必要的处理。
5. 适用于可迭代对象 除了数组for...of 循环还适用于其他可迭代对象如字符串、Set、Map 等。这使得代码具有更广泛的适用性。
综上所述使用 for...of 循环来遍历数组是一种更直观、简洁的方式可以避免许多在传统 for 循环中容易犯的错误。通过专注于元素而非索引保持遍历顺序并充分利用循环的简洁性我们可以提高代码的可读性和可维护性减少错误的风险。
for…in 遍历对象的不可靠性
在使用 for...in 循环时可能会遇到一些问题其中包括遍历顺序的不确定性和遍历到原型属性的风险。下面是对这些问题的探讨
1. 遍历顺序的不确定性 for...in 循环无法保证遍历对象属性的顺序。这是因为对象属性在 ECMAScript 规范中被定义为无序的。因此使用 for...in 循环来依赖属性遍历的特定顺序是不可靠的。
2. 遍历到原型属性的风险 for...in 循环会遍历对象自身属性以及继承自原型链的属性。这可能会导致意外的属性遍历尤其是当我们只想遍历对象自身的属性时。
3. 原型属性被遍历 function Person() {this.name Alice;
}Person.prototype.age 30;const person new Person();for (const prop in person) {console.log(prop); // 输出 name 和 age
}或
/*** param {Function} fn* return {Array}*/
array [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
fn function (n) {return String(n 5);
}Array.prototype.groupBy function (fn) {const myMap new Map();const keys Object.keys(this);console.log(keys);for (const key in keys) {if (myMap.has(fn(this[key]))) {myMap.set(fn(this[key]), myMap.get(fn(this[key])).concat([this[key]]));} else {myMap.set(fn(this[key]), [this[key]]);}}const myObj {};for (const [key, value] of myMap) {myObj[key] value;}return myObj;
};array.groupBy(fn);
/*** [1,2,3].groupBy(String) // {1:[1],2:[2],3:[3]}*/4. 使用 hasOwnProperty 过滤原型属性 for (const prop in person) {if (person.hasOwnProperty(prop)) {console.log(prop); // 仅输出 name}
}5. 遍历可枚举属性 Object.defineProperty(person, country, {value: USA,enumerable: true
});for (const prop in person) {console.log(prop); // 输出 name、age 和 country
}6. 遍历不可枚举属性 Object.defineProperty(person, address, {value: 123 Main St,enumerable: false
});for (const prop in person) {console.log(prop); // 仅输出 name 和 age
}7. 遍历顺序问题 const obj { a: 1, b: 2, c: 3 };for (const prop in obj) {console.log(prop); // 输出 a、b 和 c但顺序不确定
}8. 遍历字符串属性 const str Hello;for (const char in str) {console.log(char); // 输出 0、1、2、3 和 4
}综上所述尽管 for...in 循环在某些情况下可以派上用场但要特别小心遍历顺序的不确定性和遍历到原型属性的风险。在需要遍历对象属性时推荐使用 Object.keys、Object.values 或 Object.entries 等方法以获得更可靠的遍历结果。或者考虑使用 for...of 循环来遍历数组和可迭代对象以避免这些问题。
