【高频考点精讲】前端工程师必会的10种数组操作方法，你掌握了几个？

前端工程师必会的10种数组操作方法，你掌握了几个？

🧑‍🏫 作者：全栈老李

📅 更新时间：2025 年 6 月

🧑‍💻 适合人群：前端初学者、进阶开发者

🚀 版权：本文由全栈老李原创，转载请注明出处。

大家好，我是全栈老李。今天咱们聊聊前端开发中最常用的数组操作方法，这些方法就像厨师的刀具，用对了能让代码烹饪出美味佳肴，用错了…那就只能吃”bug”了。

1. map() – 数组变形金刚

map()方法就像个变形金刚，能把数组中的每个元素都变形一遍，然后返回一个新数组。全栈老李提醒：它不会改变原数组哦！

// 全栈老李示例：把数字数组变成字符串数组
const numbers = [1, 2, 3];
const strings = numbers.map(num => `数字${
              num}`);
console.log(strings); // ["数字1", "数字2", "数字3"]

使用场景：当你需要把数组中的每个元素都转换格式时，比如从API获取的数据需要格式化显示。

2. filter() – 数组筛子

filter()就像个筛子，能把符合条件的数据筛出来。全栈老李小技巧：回调函数返回true的元素会被保留。

// 全栈老李示例：筛选出偶数
const nums = [1, 2, 3, 4, 5];
const evens = nums.filter(n => n % 2 === 0);
console.log(evens); // [2, 4]

使用场景：商品列表筛选、表单验证过滤无效数据等。

3. reduce() – 数组压缩器

reduce()是个”压缩器”，能把数组压缩成一个值。全栈老李提示：初学者常觉得它难，但掌握后真香！

// 全栈老李示例：计算数组总和
const prices = [10, 20, 30];
const total = prices.reduce((sum, price) => sum + price, 0);
console.log(total); // 60

使用场景：求和、求平均值、数组扁平化等需要累积计算的场景。

4. forEach() – 数组遍历器

forEach()是最简单的遍历方法，全栈老李建议：当不需要返回值时用它比map更合适。

// 全栈老李示例：打印每个元素
const fruits = ['苹果', '香蕉', '橙子'];
fruits.forEach(fruit => console.log(`我爱吃${
              fruit}`));
// 我爱吃苹果
// 我爱吃香蕉
// 我爱吃橙子

使用场景：单纯遍历数组执行操作，比如渲染DOM元素。

5. find() & findIndex() – 数组侦探

这对”侦探组合”能帮你找到符合条件的第一个元素或其索引。全栈老李提示：找不到时find返回undefined，findIndex返回-1。

// 全栈老李示例：找第一个大于10的数字
const nums = [5, 12, 8, 130, 44];
const found = nums.find(num => num > 10);
console.log(found); // 12

使用场景：在用户列表中查找特定用户、检查数组中是否存在某条件元素。

6. some() & every() – 数组检察官

some()检查是否有元素满足条件，every()检查是否所有元素都满足。全栈老李比喻：就像班级里”有人及格”和”所有人都及格”的区别。

// 全栈老李示例：检查数组
const ages = [15, 18, 20, 25];
const hasAdult = ages.some(age => age >= 18); // true
const allAdult = ages.every(age => age >= 18); // false

使用场景：表单验证、权限检查等需要判断数组中元素是否满足条件的场景。

7. slice() – 数组切片刀

slice()像把切片刀，能切出数组的一部分。全栈老李提醒：它不改变原数组，返回的是新数组。

// 全栈老李示例：获取数组片段
const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];
console.log(animals.slice(2)); // ["camel", "duck", "elephant"]
console.log(animals.slice(2, 4)); // ["camel", "duck"]

使用场景：分页显示数据、获取数组的子集等。

8. splice() – 数组手术刀

splice()功能强大但危险，能添加、删除或替换数组元素。全栈老李警告：它会直接修改原数组！

// 全栈老李示例：删除并添加元素
const months = ['Jan', 'March', 'April', 'June'];
months.splice(1, 0, 'Feb'); // 在索引1处添加'Feb'
console.log(months); // ["Jan", "Feb", "March", "April", "June"]

使用场景：需要直接修改数组的场景，如表单动态增减项。

9. sort() – 数组排序大师

sort()能对数组进行排序，全栈老李提示：默认是按字符串Unicode码点排序，数字排序需要自定义比较函数。

// 全栈老李示例：数字排序
const nums = [1, 30, 4, 21, 100000];
nums.sort((a, b) => a - b); // 升序
console.log(nums); // [1, 4, 21, 30, 100000]

使用场景：任何需要排序的场景，如价格从低到高、日期从近到远等。

10. flat() & flatMap() – 数组压路机

flat()能”压平”嵌套数组，flatMap()是map()和flat()的组合。全栈老李比喻：就像把多层汉堡压成单层。

// 全栈老李示例：扁平化数组
const arr = [1, 2, [3, 4, [5]]];
console.log(arr.flat(2)); // [1, 2, 3, 4, 5]

使用场景：处理API返回的嵌套数据、展开多维数组等。

课后作业（面试题）

// 全栈老李出题：以下代码输出什么？
const data = [
  {
             id: 1, name: 'Alice', age: 25 },
  {
             id: 2, name: 'Bob', age: 30 },
  {
             id: 3, name: 'Charlie', age: 35 }
];

const result = data
  .filter(person => person.age > 28)
  .map(person => ({
             ...person, status: 'active' }))
  .reduce((acc, curr) => {
            
    acc[curr.id] = curr;
    return acc;
  }, {
            });

console.log(result);

把你的答案写在评论区吧！我会随机抽几位同学的答案进行点评哦～全栈老李期待看到你的思考过程！

以上就是前端工程师必须掌握的10种数组操作方法。记住，全栈老李常说：”数组方法用得好，加班时间少不了(少)”。在实际开发中灵活组合这些方法，能让你的代码更简洁高效。下期我们聊聊对象操作技巧，敬请期待！