JavaScript学习笔记(二)：遍历方法汇总

JavaScript 遍历方法汇总

JavaScript 提供了多种遍历数组和对象的方法，每种方法适用于不同的场景。

---

数组遍历方法

1. for 循环

   • 适用于需要精确控制遍历过程（如跳出循环、跳过某次循环）。
   • 语法：

     for (let i = 0; i < arr.length; i++) {console.log(arr[i]);
     }
     

2. forEach

   • 适用于简单的遍历操作，无返回值。
   • 语法：

     arr.forEach((item, index) => {console.log(item, index);
     });
     

3. map

   • 适用于需要对数组每个元素进行操作并返回新数组。
   • 语法：

     const newArr = arr.map((item) => item * 2);
     

4. filter

   • 适用于筛选符合条件的元素并返回新数组。
   • 语法：

     const filteredArr = arr.filter((item) => item > 2);
     

5. reduce

   • 适用于将数组元素累积为单个值。
   • 语法：

     const sum = arr.reduce((acc, item) => acc + item, 0);
     

6. for...of

   • 适用于遍历可迭代对象（如数组、字符串）。
   • 语法：

     for (const item of arr) {console.log(item);
     }
     

---

对象遍历方法

1. for...in

   • 适用于遍历对象的所有可枚举属性（包括原型链上的属性）。
   • 语法：

     for (const key in obj) {console.log(key, obj[key]);
     }
     

2. Object.keys

   • 适用于获取对象自身的可枚举属性名数组。
   • 语法：

     Object.keys(obj).forEach((key) => {console.log(key, obj[key]);
     });
     

3. Object.values

   • 适用于获取对象自身的可枚举属性值数组。
   • 语法：

     Object.values(obj).forEach((value) => {console.log(value);
     });
     

4. Object.entries

   • 适用于获取对象自身的可枚举键值对数组。
   • 语法：

     Object.entries(obj).forEach(([key, value]) => {console.log(key, value);
     });
     

---

使用场景对比

1. 数组遍历

   • 需要精确控制遍历过程时使用 for 循环。
   • 简单遍历且不需要返回值时使用 forEach。
   • 需要返回新数组时使用 map 或 filter。
   • 需要累积计算时使用 reduce。
   • 遍历可迭代对象时使用 for...of。

2. 对象遍历

   • 遍历对象属性（包括原型链）时使用 for...in。
   • 仅需属性名时使用 Object.keys。
   • 仅需属性值时使用 Object.values。
   • 需要键值对时使用 Object.entries。

---

性能对比

• for 循环通常是最快的遍历方法，尤其是在大型数据集上。
• forEach、map、filter 等方法虽然代码简洁，但在性能上略逊于 for 循环。
• for...of 比 for 循环稍慢，但语法更简洁。
• for...in 遍历对象时性能较低，因为它会遍历原型链上的属性。

---

总结

• 选择遍历方法时需根据具体场景和需求决定。
• 性能要求高的场景优先使用 for 循环。
• 代码简洁性要求高的场景可使用高阶函数（如 map、filter）。
• 遍历对象时优先使用 Object.keys、Object.values 或 Object.entries，避免使用 for...in 遍历原型链。