在遍历对象属性时，for...in和for...of有什么区别？

在 JavaScript 中，for...in 和 for...of 是两种不同的遍历方式，它们在处理对象属性时存在本质区别，具体差异如下：

一、遍历目标与返回值

二、核心区别详解

1. 遍历对象的方式不同

• for...in 的使用场景
  for...in 专门用于遍历对象的属性名，返回的是字符串类型的属性键（包括数组的索引）。

  const obj = {
        name: '豆包', age: 2, skill: '编程' };
  for (const key in obj) {
       
    console.log(key);  // 输出: "name", "age", "skill"
  }
  
  // 数组场景（索引作为属性名）
  const arr = ['a', 'b', 'c'];
  for (const index in arr) {
       
    console.log(index);  // 输出: "0", "1", "2"（字符串类型）
  }
  
          
  
            
          
          
          
  
            
  
            AI 代码解读
          
        
        

• for...of 无法直接遍历普通对象
  for...of 只能遍历实现了迭代器接口（Symbol.iterator）的对象，普通对象默认没有迭代器，直接使用会报错。

  const obj = {
        name: '豆包', age: 2 };
  for (const value of obj) {
       
    // 报错：Uncaught TypeError: obj is not iterable
  }
  
          
  
            
          
          
          
  
            
  
            AI 代码解读
          
        
        

  若要使用 for...of 遍历对象属性，需先将对象转换为可迭代结构（如通过 Object.entries() 获取键值对数组）：

  const obj = {
        name: '豆包', age: 2 };
  for (const [key, value] of Object.entries(obj)) {
       
    console.log(key, value);  // 输出: "name" "豆包", "age" 2
  }
  
          
  
            
          
          
          
  
            
  
            AI 代码解读
          
        
        

2. 对原型链和属性特性的处理

• for...in 会遍历原型链上的可枚举属性
  若对象继承了原型链上的属性，for...in 会一并遍历，需通过 hasOwnProperty() 过滤：

  Object.prototype.test = '原型属性';
  const obj = {
        data: '自定义属性' };
  
  for (const key in obj) {
       
    console.log(key);  // 输出: "data", "test"（包括原型属性）
  }
  
  // 过滤原型属性
  for (const key in obj) {
       
    if (obj.hasOwnProperty(key)) {
       
      console.log(key);  // 仅输出: "data"
    }
  }
  
          
  
            
          
          
          
  
            
  
            AI 代码解读
          
        
        

• for...of 只遍历自身元素值
  由于 for...of 依赖迭代器，而迭代器仅遍历对象自身的元素（如数组元素、Map 的键值对），不涉及原型链：

  Array.prototype.push('原型元素');
  const arr = [1, 2];
  
  for (const item of arr) {
       
    console.log(item);  // 输出: 1, 2（不包含原型链上的"原型元素"）
  }
  
          
  
            
          
          
          
  
            
  
            AI 代码解读
          
        
        

3. 语法与使用场景对比

• for...in 的典型场景

  • 遍历普通对象的属性名（如配置项、字典数据）。
  • 遍历数组的索引（但更推荐用 for...of 或 forEach 处理数组元素）。

    // 遍历配置对象
    const config = {
           
    env: 'production',
    debug: false,
    port: 8080
    };
    for (const key in config) {
           
    console.log(`${
             key}: ${
             config[key]}`);
    }
    
            
    
              
            
            
            
    
              
    
              AI 代码解读
            
          
          

• for...of 的典型场景

  • 遍历数组、Set、Map 等可迭代对象的元素值。
  • 需要直接操作元素值并支持 break/continue 中断循环的场景。

    // 遍历数组并中断
    const numbers = [1, 3, 5, 7];
    for (const num of numbers) {
           
    if (num > 5) break;
    console.log(num);  // 输出: 1, 3
    }
    
            
    
              
            
            
            
    
              
    
              AI 代码解读
            
          
          

三、总结与选择建议

注意：for...in 设计初衷是为了遍历对象，而 for...of 是 ES6 引入的迭代器遍历语法，两者适用场景不同，需根据数据类型和需求选择，避免混淆使用。