for...in 语句
工作原理
- 遍历属性 ：
for...in遍历对象的所有可枚举属性，这些属性不仅限于对象本身的属性，还包括原型链上的可枚举属性。 - 返回键名：每次迭代时，循环变量会得到当前属性的键（即字符串形式的属性名）。
- 不保证顺序：虽然大多数浏览器按创建顺序遍历，但 ECMAScript 规范并未强制要求特定的遍历顺序。
使用示例
javascript
const obj = {
a: 'alpha',
b: 'beta',
c: 'gamma'
};
// 添加一个继承的可枚举属性
Object.prototype.d = 'delta';
for (let key in obj) {
if (obj.hasOwnProperty(key)) { // 过滤掉继承的属性
console.log(`${key}: ${obj[key]}`);
}
}注意事项
- 避免数组遍历 ：由于
for...in可能会遍历到非数字索引的属性（如方法），因此不适合用于遍历数组元素。 - 性能问题 ：如果对象有很多继承的属性，
for...in可能会导致性能下降，尤其是在大型应用程序中。
for...of 语句
工作原理
- 遍历值 ：
for...of遍历的是实现了迭代协议的对象，它直接给出每个成员的值，而不是键。 - 只遍历自身属性 ：与
for...in不同，for...of不遍历原型链上的属性。 - 保证顺序 ：对于数组和字符串，
for...of按照插入顺序遍历。
使用示例
javascript
const arr = ['apple', 'banana', 'cherry'];
for (let fruit of arr) {
console.log(fruit);
}
// 对于Map和Set等集合类型同样适用
const map = new Map([['key1', 'value1'], ['key2', 'value2']]);
for (let [key, value] of map) {
console.log(`${key}: ${value}`);
}特殊用法
- 解构赋值 ：在遍历像
Map或者其他包含键值对的数据结构时，可以使用解构赋值来同时获取键和值。 - Array-like Objects ：对于类数组对象（例如
arguments或者NodeList），for...of同样适用，因为它们通常也实现了迭代协议。
注意事项
- 需要迭代器支持 ：只有实现了迭代协议的对象才能用
for...of来遍历，普通对象不可以直接用for...of。 - 中断和继续 ：你可以使用
break,continue控制流语句来提前退出循环或跳过某些迭代。
高级特性
结合使用 Symbol.iterator
如果你有一个自定义对象，并希望它能够被 for...of 遍历，你需要为这个对象定义 [Symbol.iterator]() 方法，以实现迭代协议。
javascript
const myIterable = {
*[Symbol.iterator]() {
yield 'hello';
yield 'world';
}
};
for (let value of myIterable) {
console.log(value);
}使用 Object.entries(), Object.keys(), Object.values()
对于普通的对象，如果你想通过 for...of 来遍历其属性，可以先使用 Object.entries(), Object.keys() 或 Object.values() 将对象转换成一个数组，然后再遍历。
javascript
const obj = { a: 1, b: 2, c: 3 };
// 遍历键值对
for (let [key, value] of Object.entries(obj)) {
console.log(`${key}: ${value}`);
}
// 遍历键
for (let key of Object.keys(obj)) {
console.log(key);
}
// 遍历值
for (let value of Object.values(obj)) {
console.log(value);
}最佳实践
- 选择合适的循环方式 ：根据你要遍历的数据结构选择最合适的循环方式。对于对象使用
for...in，而对于数组和其他可迭代对象使用for...of。 - 考虑性能：尽量减少不必要的遍历操作，特别是在处理大量数据时。
- 注意代码可读性：确保你的代码易于理解，特别是在混合使用不同类型的遍历方式时。