JavaScript数组方法——梳理和考点
JavaScript数组方法——梳理和考点
数组是JavaScript中核心的数据结构，也是面试中的高频考点。最近在面试，开始补课梳理JavaScript数组方法，按功能分类并配以示例。
一、元素增删方法
可以直接修改原数组，适用于动态调整数据的场景。
| 方法 | 方向 | 改变原数组 | 返回值 | 示例 |
|---|---|---|---|---|
push(...items) | 尾部 | ✔️ | 新数组长度 | arr.push(8) → 尾部添加8 |
pop() | 尾部 | ✔️ | 删除的元素 | arr.pop() → 删除最后一个元素 |
unshift(...items) | 头部 | ✔️ | 新数组长度 | arr.unshift(0) → 头部添加0 |
shift() | 头部 | ✔️ | 删除的元素 | arr.shift() → 删除第一个元素 |
splice(start, deleteCount, ...items) | 任意位置 | ✔️ | 被删除元素组成的数组 | arr.splice(1, 2, 'a') → 从索引1开始删除2个元素并插入’a’ |
关键区别：
push/pop性能优于unshift/shift（无需移动索引）splice支持同时删除、插入、替换
二、查找与检测方法
不改变原数组，用于数据检索和条件验证。
1. 值存在性检查
// 检查存在性
['a', 'b'].includes('b') // true（找到返回布尔）
['a', 'b'].indexOf('b') // 1（找到返回索引）
['a', 'b'].lastIndexOf('b') // 1（找到返回索引，从尾查找）
2. 条件查找
// 条件查找
[1, 2, 3].find(v => v > 1) // 2（首个匹配值，返回item）
[1, 2, 3].findIndex(v => v > 1) // 1（首个匹配的索引，返回index）
[1, 2, 3].filter(v => v > 1) // [2, 3]（所有匹配值,返回新arr）
3. 批量验证
// 批量验证
[1, 2, 3].some(v => v > 1) // true（至少一个满足）
[1, 2, 3].every(v => v > 1) // false（全部满足）
实用技巧：
- 只需检查存在性时，更推荐用
includes（而不是indexOf）find找到即停止，比filter性能更优（尤其大数据量时）filter开发中运用场景更多
三、遍历与迭代方法
根据不同场景选择遍历方式。
| 方法 | 特点 | 示例 |
|---|---|---|
forEach() | 简单遍历，无返回值 | arr.forEach(v => console.log(v)) |
for...of | 支持 break 中断 | for(let v of arr) { ... } |
map() | 返回映射后的新数组 | arr.map(v => v * 2) |
reduce() | 累计计算结果 | arr.reduce((sum, v) => sum + v, 0) |
reduceRight() | 从右向左累计 | arr.reduceRight((acc, v) => acc + v) |
性能对比：
- 纯遍历：
for循环 >for...of>forEach（但差异在多数场景可忽略）- 需中断遍历时，优先选
for...of或for循环- 需返回新数组时，
map比forEach+push组合更简洁
四、数组转换方法
实现数组与其他数据结构间的转换，或重组数组结构。
1. 类型转换
// 数组 ↔ 字符串
['a', 'b'].join('-') // 'a-b'（自定义分隔符）
['a', 'b'].toString() // 'a,b'（固定逗号分隔）
'abc'.split('') // ['a', 'b', 'c']（字符串→数组）
2. 结构转换
// 多维数组扁平化
[1, [2, 3]].flat() // [1, 2, 3]（默认展开1层）
[1, [2, [3]]].flat(2) // [1, 2, 3]（指定展开深度）// 映射+扁平化
['hello', 'world'].flatMap(word => word.split(''))
// ['h','e','l','l','o','w','o','r','l','d']
3. 数组合并与切片
// 合并数组
[1, 2].concat([3, 4]) // [1, 2, 3, 4]（创建新数组）// 数组切片
[1, 2, 3, 4].slice(1, 3) // [2, 3]（索引1到3，不包含3）
注意事项：
concat可合并多个数组，比push(...arr)更高效（避免栈溢出）slice常用于数组浅拷贝（const copy = arr.slice()）
五、重排序与填充方法
直接修改原数组，用于数据重组和初始化。
// 排序（默认按字符串Unicode排序）
[3, 1, 2].sort() // [1, 2, 3]
[3, 1, 2].sort((a, b) => b - a) // [3, 2, 1]（自定义排序）// 反转
[1, 2, 3].reverse() // [3, 2, 1]// 填充
new Array(3).fill(0) // [0, 0, 0]（快速初始化）
[1, 2, 3].fill(0, 1) // [1, 0, 0]（从索引1开始填充0,(value 必填,startIndex 可选,endIndex 可选默认是arr.length)）
关键点：
sort必须传入比较函数（如(a, b) => a - b）才能正确排序数字，a - b 升序，b - a降序fill常用于初始化定长数组，比循环赋值更简洁
六、其他实用方法
满足特定场景的高级操作需求。
// 数组自复制
[1, 2, 3, 4].copyWithin(0, 2) // [3, 4, 3, 4]（从索引2复制到索引0）// 安全数组创建
Array.of(3) // [3]（避免 new Array(3) 创建空槽数组）
七、重要概念区分：面试常问
1. 是否改变原数组（important）
| 改变原数组 | 不改变原数组 |
|---|---|
push/pop | concat |
unshift/shift | slice |
splice | map |
sort/reverse | filter |
fill/copyWithin | find/findIndex |
2. ES5 vs ES6新增方法
- ES5：
indexOf、forEach、map、filter、reduce - ES6+：
find/findIndex、includes、flat、flatMap、Array.of
总结
- 高频使用的方法：
push/pop、map、filter、reduce - 需要明确：哪些数组方法会改变原数组，提问可能结合vue2的数组响应式操作方法
- 链式调用：如
filter().map().slice() - 性能敏感场景：大数据量时慎用
splice、shift（索引更新开销大）