面试必备--js数组操作大全_前端面试js 数组方法-优快云博客

快秋招了，总结一些了数组方法，对面试很有帮助

以下是一个相对详细的总结，分为「变异方法」（会改原数组）和「非变异方法」（不会改原数组）

🟣 1️⃣ 变异方法（会修改原数组）

① push

✅ 作用：在数组尾部添加一个或多个元素
✅ 适用场景：需要在末尾插入数据
✅ 参数：要添加的元素（可以是多个）
✅ 返回值：新数组长度

let arr = [1, 2]; arr.push(3, 4); // arr = [1, 2, 3, 4], 返回 4

② pop

✅ 作用：移除并返回最后一个元素
✅ 适用场景：实现栈结构（后进先出）
✅ 参数：无
✅ 返回值：被移除的元素

let arr = [1, 2, 3]; let last = arr.pop(); // arr = [1, 2], last = 3

③ unshift

✅ 作用：在数组头部添加一个或多个元素
✅ 适用场景：需要在开头插入数据
✅ 参数：要添加的元素
✅ 返回值：新数组长度

let arr = [2, 3]; arr.unshift(0, 1); // arr = [0, 1, 2, 3], 返回 4

④ shift

✅ 作用：移除并返回第一个元素
✅ 适用场景：实现队列结构（先进先出）
✅ 参数：无
✅ 返回值：被移除的元素

let arr = [1, 2, 3]; let first = arr.shift(); // arr = [2, 3], first = 1

⑤ splice

✅ 作用：从数组中增删改元素
✅ 适用场景：需要在中间插入、替换或删除
✅ 参数：
- start（起始索引）
- deleteCount（要删除的数量）
- ...items（要添加的元素）
✅ 返回值：被删除的元素数组

let arr = [1, 2, 3, 4]; arr.splice(1, 2, 'a', 'b'); // arr = [1, 'a', 'b', 4]

⑥ reverse

✅ 作用：反转数组
✅ 适用场景：顺序翻转
✅ 参数：无
✅ 返回值：原数组（已反转）

let arr = [1, 2, 3]; arr.reverse(); // arr = [3, 2, 1]

⑦ sort

✅ 作用：对数组元素排序
✅ 适用场景：需要排序
✅ 参数：可选比较函数 (a, b) => number
✅ 返回值：原数组（已排序）

let arr = [3, 1, 2]; arr.sort(); // 默认字符串比较 => [1, 2, 3] arr.sort((a, b) => b - a); // 数字降序

⑧ fill

✅ 作用：用指定值填充数组
✅ 适用场景：初始化或重置
✅ 参数：
- value
- start（默认 0）
- end（默认 length）
✅ 返回值：原数组

let arr = [1, 2, 3]; arr.fill(0); // arr = [0, 0, 0]

⑨ copyWithin

✅ 作用：在数组内部复制元素到其他位置
✅ 适用场景：快速局部复制
✅ 参数：
- target（目标起始索引）
- start（复制起始）
- end（复制结束，不含）
✅ 返回值：原数组

let arr = [1, 2, 3, 4]; arr.copyWithin(1, 2); // arr = [1, 3, 4, 4]

相当于：

target = 1

start = 2

end = 默认 arr.length = 4

要 复制的部分 是：

arr.slice(2, 4) → [3, 4]

然后把 [3, 4] 写到索引 1 起始处：

arr[1] = 3

arr[2] = 4

所以得到的新数组是：

[1, 3, 4, 4]

🟣 2️⃣ 非变异方法（返回新数组，不改原数组）

① concat

✅ 作用：连接多个数组或值
✅ 适用场景：合并
✅ 参数：要连接的值或数组
✅ 返回值：新数组

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

② slice

✅ 作用：截取子数组
✅ 适用场景：获取片段
✅ 参数：
- start
- end（不含）
✅ 返回值：新数组

[1, 2, 3, 4].slice(1, 3); // [2, 3]

③ map

✅ 作用：对每个元素应用函数并生成新数组
✅ 适用场景：转换
✅ 参数：回调 (value, index, array)
✅ 返回值：新数组

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

④ filter

✅ 作用：筛选元素
✅ 适用场景：保留满足条件的项
✅ 参数：回调
✅ 返回值：新数组

[1, 2, 3].filter(x => x > 1); // [2, 3]

⑤ reduce

✅ 作用：累计归纳
✅ 适用场景：汇总、聚合
✅ 参数：
- 回调 (acc, value, index, array)
- 初始值
✅ 返回值：累计结果

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

⑥ reduceRight

✅ 作用：从右到左归纳
✅ 适用场景：方向敏感的累计
✅ 参数同 reduce
✅ 返回值：累计结果

⑦ flat

✅ 作用：扁平化嵌套数组
✅ 适用场景：减少嵌套层级
✅ 参数：深度（默认 1）
✅ 返回值：新数组

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

⑧ flatMap

✅ 作用：先 map 后 flat（深度为 1）
✅ 适用场景：映射 + 扁平
✅ 参数：回调
✅ 返回值：新数组

[1, 2].flatMap(x => [x, x * 2]); // [1, 2, 2, 4]

⑨ includes

✅ 作用：判断是否含有元素
✅ 适用场景：简单存在性检测
✅ 参数：值、起始索引
✅ 返回值：布尔

[1, 2, 3].includes(2); // true

⑩ indexOf

✅ 作用：返回首次出现索引
✅ 适用场景：找位置
✅ 参数：值、起始索引
✅ 返回值：索引 / -1

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

⑪ lastIndexOf

✅ 作用：返回最后一次出现的索引
✅ 适用场景：找最后一次位置
✅ 参数同上

⑫ find

✅ 作用：返回第一个满足条件的元素
✅ 适用场景：找元素
✅ 参数：回调
✅ 返回值：元素或 undefined

[1, 2, 3].find(x => x > 1); // 2

⑬ findIndex

✅ 作用：返回第一个满足条件的索引
✅ 适用场景：找索引
✅ 参数：回调
✅ 返回值：索引 / -1

⑭ findLast / findLastIndex (ES2023)

✅ 作用：从右向左找
✅ 参数：回调
✅ 返回值：元素 / 索引 / undefined / -1

⑮ every

✅ 作用：所有元素是否都满足条件
✅ 适用场景：全量验证
✅ 参数：回调
✅ 返回值：布尔

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

⑯ some

✅ 作用：是否有至少一个元素满足条件
✅ 适用场景：部分验证
✅ 参数同上
✅ 返回值：布尔

⑰ join

✅ 作用：拼接成字符串
✅ 适用场景：格式化
✅ 参数：分隔符（默认,)
✅ 返回值：字符串

[1, 2, 3].join('-'); // "1-2-3"

⑱ toString

✅ 作用：转换为字符串
✅ 适用场景：简单打印
✅ 参数：无
✅ 返回值：字符串

[1, 2, 3].toString(); // "1,2,3"

⑲ entries / keys / values

✅ 作用：
- entries：索引-值对迭代器
- keys：索引迭代器
- values：值迭代器
✅ 适用场景：迭代
✅ 返回值：迭代器

for (const [i, v] of [1, 2].entries()) { console.log(i, v); }

⑳ Array.isArray

✅ 作用：判断是否为数组
✅ 适用场景：类型安全
✅ 参数：任意值
✅ 返回值：布尔

Array.isArray([1, 2]); // true

🟣 3️⃣ ES6+ 工具方法

Array.from

✅ 作用：类数组 / 可迭代转数组
✅ 适用场景：转换、生成
✅ 参数：
- 类数组 / 可迭代对象
- 可选 map 回调
✅ 返回值：新数组

Array.from('abc'); // ['a', 'b', 'c']

Array.of

✅ 作用：根据参数生成数组
✅ 适用场景：避免 new Array(1) 的歧义
✅ 参数：所有元素
✅ 返回值：新数组

Array.of(1, 2, 3); // [1, 2, 3]

Array.at

✅ 作用：按索引取值，支持负数
✅ 适用场景：从尾部取
✅ 参数：索引
✅ 返回值：元素或 undefined

[1, 2, 3].at(-1); // 3

✅ 总结

变异方法会改原数组（push、pop、splice、sort、reverse、fill、copyWithin...）
非变异方法返回新数组或值（map、filter、slice、concat、flat、includes、find...）
常用场景：增删改查、转换、过滤、搜索、归纳