六十天前端强化训练之第九天之数组操作方法

=====欢迎来到编程星辰海的博客讲解======

目录

一、数组操作方法知识讲解

1. 基础操作方法

2. 遍历与转换方法

3. 查找与判断方法

4. 其他实用方法

二、核心代码示例

三、实现效果说明

四、学习要点总结

五、扩展阅读推荐

六、案例：使用 map/filter 实现数据筛选转换

---

一、数组操作方法知识讲解

在 JavaScript 中，数组是开发中最常用的数据结构之一。数组提供了一系列内置方法，用于操作和转换数据。以下是核心方法的分类和详解：

---

1. 基础操作方法

a. 增删元素

• push()
  向数组末尾添加一个或多个元素，返回新长度。

  JS

  const arr = [1, 2];
  arr.push(3); // arr变为[1,2,3]
  

• pop()
  删除并返回数组最后一个元素。

  JS

  const last = arr.pop(); // last=3，arr变为[1,2]
  

• unshift()
  向数组头部添加一个或多个元素，返回新长度。

  JS

  arr.unshift(0); // arr变为[0,1,2]
  

• shift()
  删除并返回数组第一个元素。

  JS

  const first = arr.shift(); // first=0, arr变为[1,2]
  

---

b. 截取与拼接

• slice(start, end)
  返回从 start 到 end（不含）的新数组，原数组不变。

  JS

  const sub = [1,2,3].slice(1,3); // sub=[2,3]
  

• splice(start, deleteCount, ...items)
  从 start 开始删除 deleteCount 个元素，并插入新元素。

  JS

  const arr = [1,2,3];
  arr.splice(1,1,'a'); // arr变为[1,'a',3]
  

---

2. 遍历与转换方法

a. 遍历

• forEach(callback)
  对每个元素执行回调函数，无返回值。

  JS

  [1,2,3].forEach((num) => console.log(num));
  

• map(callback)
  返回新数组，由回调函数返回值组成。

  JS

  const doubled = [1,2,3].map(n => n*2); // [2,4,6]
  

• filter(callback)
  返回满足条件（回调返回true）的元素组成的新数组。

  JS

  const evens = [1,2,3].filter(n => n%2 === 0); // [2]

b. 归并

• reduce(callback, initialValue)
  从左到右将数组归并为单个值。

  JS

  const sum = [1,2,3].reduce((acc, n) => acc + n, 0); // 6
  

• reduceRight()
  类似 reduce，但从右到左执行。

---

3. 查找与判断方法

• find(callback)
  返回第一个满足条件的元素，否则返回 undefined。

  JS

  const firstEven = [1,3,4,5].find(n => n%2===0); // 4
  

• some(callback)
  判断至少有一个元素满足条件。

  JS

  const hasNegative = [1, -2, 3].some(n => n < 0); // true
  

• every(callback)
  判断所有元素是否满足条件。

  JS

  const allPositive = [1,2,3].every(n => n > 0); // true
  

---

4. 其他实用方法

• concat(arr2)
  合并数组，返回新数组。

  JS

  const merged = [1,2].concat([3,4]); // [1,2,3,4]
  

• flat(depth)
  将嵌套数组“扁平化”到指定深度。

  JS

  [1, [2, [3]]].flat(2); // [1,2,3]
  

• sort(compareFunction)
  原地排序数组（默认按字符串Unicode排序）。

  JS

  [3,1,2].sort((a,b) => a - b); // [1,2,3]
  

---

二、核心代码示例

JAVASCRIPT

// 示例1: map转换数据
const users = [
  { id: 1, name: 'Alice', age: 25 },
  { id: 2, name: 'Bob', age: 30 }
];
const names = users.map(user => user.name); // ['Alice', 'Bob']

// 示例2: filter筛选数据
const adults = users.filter(user => user.age >= 18);

// 示例3: map + filter链式调用
const adultNames = users
  .filter(user => user.age >= 18)
  .map(user => user.name);

// 示例4: reduce计算总和
const totalAge = users.reduce((sum, user) => sum + user.age, 0); // 55

---

三、实现效果说明

• JSFiddle：JSFiddle - Code Playground我使用的这个

1. map 转换：将对象数组提取为名称数组。
2. filter 筛选：保留年龄≥18的用户。
3. 链式调用：先筛选后转换，结果更高效。
4. reduce 汇总：快速计算年龄总和。

---

四、学习要点总结

1. 方法特性

   • 区分是否修改原数组（如 push vs concat）。
   • 回调函数参数通常为 (元素, 索引, 原数组)。

2. 链式调用优化
   优先使用 map/filter 等方法代替 forEach，以支持链式操作。

3. 性能注意
   避免在 map/filter 中执行副作用操作，保持函数纯净。

---

五、扩展阅读推荐

1. 官方文档

   • MDN Array

2. 实战文章

   • JavaScript 数组方法全解析
   • Mastering Arrays in JavaScript

---

六、案例：使用 map/filter 实现数据筛选转换

目标：从用户列表中筛选出年龄≥25的用户，并将其格式化为 { name: 'Alice (25)' }。

JAVASCRIPT

const users = [
  { id: 1, name: 'Alice', age: 25 },
  { id: 2, name: 'Bob', age: 30 },
  { id: 3, name: 'Charlie', age: 20 }
];

const formattedUsers = users
  .filter(user => user.age >= 25)
  .map(user => ({
    name: `${user.name} (${user.age})`
  }));

console.log(formattedUsers);
// 输出:
// [
//   { name: 'Alice (25)' },
//   { name: 'Bob (30)' }
// ]

代码解析：

1. 筛选阶段：filter 保留年龄≥25的用户。
2. 转换阶段：map 重构对象，合并名称和年龄字段。