【前端分享】JavaScript数组与迭代方法详解

目录

一、数组基础

二、迭代方法

1. 传统循环

2. forEach

3. map

4. filter

5. reduce

6. find / findIndex

7. some / every

8. for...of

三、关键区别

四、链式调用

五、注意事项

六、ES6+ 特性

---

JavaScript 的数组和迭代是处理数据集合的核心工具。以下是常见用法和关键概念总结：

---

一、数组基础

1. 创建数组

   let arr1 = [1, 2, 3];  // 字面量
   let arr2 = new Array(3);  // 创建长度为3的空数组
   

2. 访问元素

   arr1[0] = 10;  // 修改第一个元素
   console.log(arr1[1]); // 输出 2
   

3. 修改数组

   • push/pop：尾部增删
   • unshift/shift：头部增删
   • splice(start, deleteCount, ...items)：增删改任意位置

     arr1.splice(1, 0, 'a'); // 在索引1插入'a'，原元素后移
     

---

二、迭代方法

1. 传统循环

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

2. forEach

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

3. map

• 返回新数组，不修改原数组

const doubled = arr1.map(item => item * 2);

4. filter

const evens = arr1.filter(item => item % 2 === 0);

5. reduce

• 累积计算结果

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

6. find / findIndex

const firstEven = arr1.find(item => item % 2 === 0);

7. some / every

const hasNegative = arr1.some(item => item < 0); // 是否有负数
const allPositive = arr1.every(item => item > 0); // 是否全为正数

8. for...of

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

---

三、关键区别

方法	返回值	是否修改原数组	用途
forEach	undefined	❌	遍历
map	新数组	❌	映射转换
filter	过滤后的新数组	❌	筛选元素
reduce	累积值	❌	聚合计算
splice	被删除的元素组成的数组	✅	增删元素

---

四、链式调用

const result = arr1
  .map(x => x * 2)
  .filter(x => x > 4)
  .reduce((acc, x) => acc + x, 0);

---

五、注意事项

1. 避免修改原数组：优先使用 map, filter 等非破坏性方法。
2. 中断迭代：forEach 无法用 break，可用 some/every 模拟：

   arr1.some(item => {
     if (item === 2) return true; // 终止迭代
   });
   

3. 稀疏数组：new Array(3) 会创建空槽位，某些方法（如 map）会跳过空位。

---

六、ES6+ 特性

• 展开运算符：[...arr1, ...arr2]
• 生成器方法：keys(), values(), entries()

  for (const [index, value] of arr1.entries()) {
    console.log(index, value);
  }
  

---

掌握这些方法后，可以根据场景灵活选择，写出简洁高效的代码！

·······END·······

  喜欢的话可以点个赞关注博主哦！！！ 

免责声明：资料来源于网络，版权归原作者所有，转载或引用仅为传播更多信息，如原作者表明身份要求停止使用该素材的，请联系我们删除，谢谢！