数组的常用方法有哪些?
导语:
JavaScript 数组方法是前端面试的高频题目,不仅考基础掌握,还考代码思维和函数式编程能力。从 map
到 reduce
,从原地修改到返回新数组,都是面试官评估你编程能力的关键点。本文带你全面掌握 JS 数组常用方法及其面试应用,助你技术面试更有底气!
一、面试主题概述
数组是 JavaScript 中最常用的数据结构之一,其内置方法种类繁多、功能丰富,既可以变更原数组,也可以返回处理后的新数组。面试官经常通过对数组方法的提问来考察候选人的:
- 基础功底(是否熟悉 API)
- 代码能力(能否灵活组合使用)
- 编程思想(是否理解函数式编程)
常考场景包括数据处理、数组扁平化、深拷贝、过滤、聚合等。
二、高频面试题汇总
- JS 中数组的常用方法有哪些?请分类说明。
- 使用数组方法实现一个去重函数。
- 如何用
reduce
实现数组求和? - 使用
map
和filter
实现链式调用的数据清洗。 - 如何用数组方法实现扁平化?(flat、递归、reduce 实现)
三、重点题目详解
题目一:
使用 reduce
实现数组求和?
const arr = [1, 2, 3, 4, 5];const sum = arr.reduce((acc, cur) => acc + cur, 0);console.log(sum); // 输出:15
解析:
reduce
是高阶函数,将数组元素依次“归并”成一个值。- 第一个参数是回调函数,包含累加器(
acc
)和当前项(cur
)。 - 第二个参数是初始值,设为 0 则从头开始加。
考察点:
- 对函数式编程的理解;
- 对 reduce 的入参和返回值掌握情况;
- 是否理解 accumulator 的演变过程。
加分回答:
可以进一步举例如何用 reduce
实现复杂对象合并或分类统计,体现“编程功力”。
题目二:
使用数组方法实现去重函数?
const arr = [1, 2, 2, 3, 4, 4, 5];const unique = [...new Set(arr)];console.log(unique); // [1, 2, 3, 4, 5]
拓展方案(面试加分):使用 reduce 实现:
const uniqueReduce = arr.reduce((acc, cur) => {return acc.includes(cur) ? acc : [...acc, cur];
}, []);console.log(uniqueReduce); // [1, 2, 3, 4, 5]
考察点:
- 是否理解
Set
的去重特性; - 是否能灵活运用
reduce
完成数组变形; - 是否考虑数组元素为对象时的处理。
提示: 对象数组去重需结合 map
和 JSON.stringify
或 id
唯一键处理,属于更进阶问题。
题目三:
如何用数组方法实现链式数据清洗?
const users = [{ name: "Tom", age: 25 },{ name: "Jerry", age: 17 },{ name: "Lucy", age: 30 }
];const adultNames = users.filter(user => user.age >= 18) // 过滤成年用户.map(user => user.name); // 提取姓名console.log(adultNames); // ["Tom", "Lucy"]
考察点:
- 是否理解 map/filter 的返回值和作用;
- 是否具备链式调用思维;
- 是否能快速进行数据“转换 + 筛选”组合操作。
延伸拓展:
若再加入 .sort()
排序逻辑,可考察对 sort()
的用法掌握是否到位。
四、面试官视角与加分项
-
为什么爱问这类题?
- 代码能力直接体现,适合笔试或手写题。
- 体现对 JavaScript 标准库掌握程度。
- 易出 follow-up 题,例如“改为不使用内置方法实现”、“用递归实现”等。
-
加分点包括:
- 回答不只停留在“会用”,还能讲清楚方法的副作用(是否修改原数组)。
- 熟悉分类:变异方法(如
push/pop/splice
) vs 非变异方法(如map/filter/reduce
)。 - 结合业务场景:如处理分页数据、格式转换、深拷贝时数组方法的使用。
五、总结与建议
- 熟练掌握数组常用方法是前端面试的必备项,
map
、filter
、reduce
、forEach
、some
、every
、find
、flat
、sort
都需做到“知其用,更知其理”。 - 面试中不仅要会写,还要讲出背后的机制和边界(如 sort 会修改原数组)。
- 平时刷题或开发时建议多用数组方法代替传统 for 循环,提升代码表达力与简洁度。
彩蛋:数组方法速记口诀(便于记忆)
增删改查:push/pop/shift/unshift/splice/slice/sort
变形清洗:map/filter/reduce/flat
查找判断:find/findIndex/some/every/includes
如果这篇文章帮你厘清了 JS 数组方法的使用逻辑,记得点赞、分享和“在看”支持我们!