for...in与for...of

JavaScript提供了两种特殊的循环结构用于遍历对象和可迭代对象。本文将介绍for...in和for...of循环的区别和适用场景。

for...in循环

for...in循环用于遍历对象的可枚举属性。

基本语法

for (let key in object) {
    // 使用key或object[key]
}

遍历对象

for...in最常用于遍历对象的属性：

const person = {
    name: '张三',
    age: 30,
    job: '工程师'
};

for (let key in person) {
    console.log(`${key}: ${person[key]}`);
}
// 输出:
// name: 张三
// age: 30
// job: 工程师

遍历数组

虽然可以使用for...in遍历数组，但通常不推荐这样做：

const colors = ['红', '绿', '蓝'];

for (let index in colors) {
    console.log(`${index}: ${colors[index]}`);
}
// 输出:
// 0: 红
// 1: 绿
// 2: 蓝

不推荐用for...in遍历数组的原因：

1. 遍历顺序不保证
2. 会遍历所有可枚举属性，包括数组原型链上的属性
3. 索引是字符串而非数字（如"0"、"1"、"2"）

特点和注意事项

1. 遍历所有可枚举属性：包括自身属性和继承的属性

const parent = { familyName: '李' };
const child = Object.create(parent);
child.name = '小明';

for (let key in child) {
    console.log(`${key}: ${child[key]}`);
}
// 输出:
// name: 小明
// familyName: 李

2. 过滤继承属性：使用hasOwnProperty()方法

for (let key in child) {
    if (child.hasOwnProperty(key)) {
        console.log(`自身属性 - ${key}: ${child[key]}`);
    } else {
        console.log(`继承属性 - ${key}: ${child[key]}`);
    }
}
// 输出:
// 自身属性 - name: 小明
// 继承属性 - familyName: 李

3. 遍历顺序：
   • 数字键按升序排列
   • 字符串键按添加顺序排列
   • 但不同JavaScript引擎可能有所不同

const mixedObject = {
    2: 'b',
    1: 'a',
    name: '测试',
    age: 25
};

for (let key in mixedObject) {
    console.log(key);
}
// 输出:
// 1
// 2
// name
// age

for...of循环

for...of循环是ES6引入的新特性，用于遍历可迭代对象（如数组、字符串、Map、Set等）。

基本语法

for (let value of iterable) {
    // 使用value
}

遍历数组

for...of是遍历数组元素的理想选择：

const fruits = ['苹果', '香蕉', '橙子'];

for (let fruit of fruits) {
    console.log(fruit);
}
// 输出:
// 苹果
// 香蕉
// 橙子

遍历字符串

for...of可以遍历字符串中的每个字符：

const message = 'Hello';

for (let char of message) {
    console.log(char);
}
// 输出:
// H
// e
// l
// l
// o

遍历Map

for...of可以遍历Map对象的键值对：

const userMap = new Map([
    ['name', '王五'],
    ['age', 28],
    ['city', '上海']
]);

for (let [key, value] of userMap) {
    console.log(`${key}: ${value}`);
}
// 输出:
// name: 王五
// age: 28
// city: 上海

遍历Set

for...of可以遍历Set对象的值：

const uniqueNumbers = new Set([1, 2, 3, 2, 1]);

for (let num of uniqueNumbers) {
    console.log(num);
}
// 输出:
// 1
// 2
// 3

特点和注意事项

1. 只能遍历可迭代对象：对象默认不是可迭代的

const person = { name: '赵六', age: 35 };

// 这会抛出错误
// for (let value of person) {
//     console.log(value);
// }

2. 使对象可迭代：通过实现Symbol.iterator方法

const iterablePerson = {
    name: '赵六',
    age: 35,
    hobbies: ['阅读', '旅行', '摄影'],
    
    [Symbol.iterator]() {
        let index = 0;
        const hobbies = this.hobbies;
        
        return {
            next() {
                if (index < hobbies.length) {
                    return { value: hobbies[index++], done: false };
                } else {
                    return { done: true };
                }
            }
        };
    }
};

for (let hobby of iterablePerson) {
    console.log(hobby);
}
// 输出:
// 阅读
// 旅行
// 摄影

3. 遍历对象的值：使用Object.values()

const person = { name: '赵六', age: 35 };

for (let value of Object.values(person)) {
    console.log(value);
}
// 输出:
// 赵六
// 35

4. 遍历对象的键值对：使用Object.entries()

const person = { name: '赵六', age: 35 };

for (let [key, value] of Object.entries(person)) {
    console.log(`${key}: ${value}`);
}
// 输出:
// name: 赵六
// age: 35

for...in与for...of的对比

主要区别

特性	for...in	for...of
遍历目标	对象的可枚举属性	可迭代对象的值
返回值	属性名（键）	属性值
适用对象	主要用于普通对象	数组、字符串、Map、Set等可迭代对象
遍历原型链	是（包括继承的属性）	否
遍历顺序	不保证	按集合中元素的顺序

选择指南

• 使用for...in当你需要：

  • 遍历对象的所有可枚举属性
  • 访问属性名（键）
  • 处理稀疏数组或对象属性

• 使用for...of当你需要：

  • 遍历数组或其他集合的值
  • 按顺序访问元素
  • 只关心值而不是索引或键
  • 使用break/continue/return控制循环流程

代码对比

const array = ['a', 'b', 'c'];
array.customProperty = '自定义属性';

// for...in遍历索引和自定义属性
console.log('使用for...in:');
for (let key in array) {
    console.log(key, array[key]);
}
// 输出:
// 0 a
// 1 b
// 2 c
// customProperty 自定义属性

// for...of只遍历值
console.log('使用for...of:');
for (let value of array) {
    console.log(value);
}
// 输出:
// a
// b
// c

实际应用场景

使用for...in的场景

1. 遍历配置对象

const config = {
    apiUrl: 'https://api.example.com',
    timeout: 5000,
    retryCount: 3,
    debug: true
};

function logConfig(configObj) {
    console.log('当前配置:');
    for (let option in configObj) {
        console.log(`- ${option}: ${configObj[option]}`);
    }
}

logConfig(config);

2. 查找对象中的特定属性

function hasRequiredFields(object, requiredFields) {
    for (let field of requiredFields) {
        if (!(field in object)) {
            return false;
        }
    }
    return true;
}

const user = { id: 1, name: '张三', email: 'zhang@example.com' };
console.log(hasRequiredFields(user, ['id', 'name', 'email'])); // true
console.log(hasRequiredFields(user, ['id', 'name', 'phone'])); // false

3. 复制对象属性

function copyProperties(source, target, properties) {
    for (let prop in source) {
        if (properties.includes(prop)) {
            target[prop] = source[prop];
        }
    }
    return target;
}

const fullUser = {
    id: 1,
    name: '张三',
    email: 'zhang@example.com',
    password: 'hashed_password',
    createdAt: '2023-01-01'
};

const publicUser = {};
copyProperties(fullUser, publicUser, ['id', 'name', 'email']);
console.log(publicUser);
// 输出: { id: 1, name: '张三', email: 'zhang@example.com' }

使用for...of的场景

1. 处理异步操作

async function processItems(items) {
    for (const item of items) {
        try {
            // 对每个项目执行异步操作
            const result = await processItem(item);
            console.log(`处理成功: ${item}`, result);
        } catch (error) {
            console.error(`处理失败: ${item}`, error);
        }
    }
}

// 模拟异步处理函数
function processItem(item) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            if (Math.random() > 0.2) {
                resolve(`${item} 处理完成`);
            } else {
                reject(new Error(`处理 ${item} 时出错`));
            }
        }, 100);
    });
}

processItems(['任务1', '任务2', '任务3']);

2. 处理DOM元素集合

// 为所有段落添加点击事件
const paragraphs = document.querySelectorAll('p');

for (const paragraph of paragraphs) {
    paragraph.addEventListener('click', function() {
        this.classList.toggle('highlighted');
    });
}

3. 数据转换

function transformData(data) {
    const result = [];
    
    for (const item of data) {
        // 转换每个项目并添加到结果数组
        const transformed = {
            id: item.id,
            fullName: `${item.firstName} ${item.lastName}`,
            isActive: item.status === 'active'
        };
        
        result.push(transformed);
    }
    
    return result;
}

const users = [
    { id: 1, firstName: '张', lastName: '三', status: 'active' },
    { id: 2, firstName: '李', lastName: '四', status: 'inactive' },
    { id: 3, firstName: '王', lastName: '五', status: 'active' }
];

const transformedUsers = transformData(users);
console.log(transformedUsers);

性能考虑

for...in的性能

for...in循环相对较慢，因为它需要遍历原型链并检查属性的可枚举性：

// 性能测试：for...in vs 其他循环
const largeObject = {};
for (let i = 0; i < 10000; i++) {
    largeObject[`prop${i}`] = i;
}

console.time('for...in');
for (let key in largeObject) {
    const value = largeObject[key];
}
console.timeEnd('for...in');

console.time('Object.keys');
const keys = Object.keys(largeObject);
for (let i = 0; i < keys.length; i++) {
    const value = largeObject[keys[i]];
}
console.timeEnd('Object.keys');

for...of的性能

for...of循环通常比for...in快，但可能比传统的for循环慢：

const largeArray = Array(10000).fill(0).map((_, i) => i);

console.time('for...of');
for (const value of largeArray) {
    // 使用value
}
console.timeEnd('for...of');

console.time('传统for循环');
for (let i = 0; i < largeArray.length; i++) {
    const value = largeArray[i];
}
console.timeEnd('传统for循环');

console.time('forEach');
largeArray.forEach(value => {
    // 使用value
});
console.timeEnd('forEach');

最佳实践

for...in最佳实践

1. 主要用于遍历对象，避免用于数组
2. 使用hasOwnProperty()过滤继承属性
3. 避免在循环中修改对象

// 推荐做法
for (let key in object) {
    if (object.hasOwnProperty(key)) {
        // 处理自身属性
    }
}

for...of最佳实践

1. 用于遍历数组和其他可迭代对象
2. 利用解构获取更多信息
3. 结合entries()方法获取索引和值

// 使用解构获取键值对
for (const [key, value] of Object.entries(object)) {
    console.log(`${key}: ${value}`);
}

// 获取数组元素的索引和值
for (const [index, value] of array.entries()) {
    console.log(`${index}: ${value}`);
}

迭代器和生成器

for...of循环的工作原理基于迭代器协议。了解迭代器和生成器有助于更好地理解和使用for...of循环。

迭代器协议

迭代器是一个具有next()方法的对象，该方法返回形如{value, done}的结果：

// 手动使用迭代器
const array = ['a', 'b', 'c'];
const iterator = array[Symbol.iterator]();

console.log(iterator.next()); // {value: 'a', done: false}
console.log(iterator.next()); // {value: 'b', done: false}
console.log(iterator.next()); // {value: 'c', done: false}
console.log(iterator.next()); // {value: undefined, done: true}

生成器函数

生成器函数使用function*语法，可以简化迭代器的创建：

function* rangeGenerator(start, end, step = 1) {
    for (let i = start; i <= end; i += step) {
        yield i;
    }
}

// 使用for...of遍历生成器
for (const num of rangeGenerator(1, 10, 2)) {
    console.log(num);
}
// 输出: 1, 3, 5, 7, 9

自定义可迭代对象

通过实现Symbol.iterator方法，可以使任何对象变为可迭代的：

const customIterable = {
    data: [10, 20, 30, 40],
    
    // 实现Symbol.iterator方法
    [Symbol.iterator]() {
        let index = 0;
        const data = this.data;
        
        return {
            next() {
                if (index < data.length) {
                    return { value: data[index++], done: false };
                } else {
                    return { done: true };
                }
            }
        };
    }
};

// 现在可以使用for...of遍历
for (const item of customIterable) {
    console.log(item);
}
// 输出: 10, 20, 30, 40

浏览器和Node.js兼容性

浏览器兼容性

• for...in：所有现代浏览器都支持
• for...of：IE不支持，其他现代浏览器（Chrome、Firefox、Safari、Edge）都支持

如果需要在旧浏览器中使用for...of，可以使用Babel等工具进行转译。

Node.js兼容性

Node.js从0.12版本开始支持for...of循环，所有现代版本的Node.js都完全支持for...in和for...of循环。

常见陷阱和问题

for...in的陷阱

1. 意外遍历原型属性

// 扩展Array原型
Array.prototype.customMethod = function() {};

const array = [1, 2, 3];

// 会遍历到customMethod
for (let key in array) {
    console.log(key); // 输出: "0", "1", "2", "customMethod"
}

// 正确做法
for (let key in array) {
    if (array.hasOwnProperty(key)) {
        console.log(key); // 输出: "0", "1", "2"
    }
}

2. 遍历顺序不确定

不要依赖for...in的遍历顺序，尤其是在处理数组时：

const obj = {
    '2': 'b',
    '1': 'a',
    '0': 'c'
};

// 遍历顺序可能是数字键的升序，而不是添加顺序
for (let key in obj) {
    console.log(key, obj[key]);
}
// 可能输出:
// 0 c
// 1 a
// 2 b

for...of的陷阱

1. 尝试遍历非可迭代对象

const obj = { a: 1, b: 2 };

// 这会抛出错误
try {
    for (const value of obj) {
        console.log(value);
    }
} catch (error) {
    console.error(error.message); // obj is not iterable
}

// 正确做法
for (const value of Object.values(obj)) {
    console.log(value);
}

2. 在异步代码中使用await

在for...of循环中使用await是安全的，但在forEach等方法中则不然：

// 正确 - 会按顺序等待每个Promise
async function processSequentially(items) {
    for (const item of items) {
        await processItem(item); // 每次迭代都会等待
    }
}

// 错误 - 不会按顺序等待
async function processIncorrectly(items) {
    items.forEach(async (item) => {
        await processItem(item); // 所有Promise同时启动
    });
    // 函数会立即返回，不等待处理完成
}

总结

for...in和for...of是JavaScript中两种强大的循环结构，各有其适用场景：

• for...in：

  • 遍历对象的可枚举属性（键）
  • 包括继承的属性
  • 主要用于普通对象
  • 遍历顺序不保证
  • 性能相对较慢

• for...of：

  • 遍历可迭代对象的值
  • 按照集合中元素的顺序遍历
  • 适用于数组、字符串、Map、Set等
  • 不遍历原型链
  • 可以与async/await结合使用

选择合适的循环结构取决于具体的使用场景和需求。一般来说：

• 遍历对象属性时，使用for...in
• 遍历数组或其他集合的值时，使用for...of
• 需要同时获取索引和值时，使用for...of结合entries()方法

练习

1. 编写一个函数，使用for...in循环查找对象中所有值为函数的属性
2. 创建一个自定义可迭代对象，实现斐波那契数列的迭代
3. 使用for...of循环和生成器函数实现一个分页迭代器
4. 编写一个函数，比较使用for...in和for...of遍历大型数组的性能差异
5. 实现一个深度复制函数，使用for...in循环复制对象的所有属性（包括嵌套对象）