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
(索引更新开销大)