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

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

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

1. 基础操作方法

2. 遍历与转换方法

3. 查找与判断方法

4. 其他实用方法

二、核心代码示例

三、实现效果说明

四、学习要点总结

五、扩展阅读推荐

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

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

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

1. 基础操作方法

a. 增删元素

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

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

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

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

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

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

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

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)
判断至少有一个元素满足条件。

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

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

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

4. 其他实用方法

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

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我使用的这个

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

四、学习要点总结

方法特性
- 区分是否修改原数组（如 push vs concat）。
- 回调函数参数通常为 (元素, 索引, 原数组)。
链式调用优化
优先使用 map/filter 等方法代替 forEach，以支持链式操作。
性能注意
避免在 map/filter 中执行副作用操作，保持函数纯净。

五、扩展阅读推荐

官方文档
- MDN Array
实战文章
- 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)' }
// ]

代码解析：