当前位置: 首页 > news >正文

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...offor 循环
  • 需返回新数组时,mapforEach + 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/popconcat
unshift/shiftslice
splicemap
sort/reversefilter
fill/copyWithinfind/findIndex
2. ES5 vs ES6新增方法
  • ES5indexOfforEachmapfilterreduce
  • ES6+find/findIndexincludesflatflatMapArray.of

总结

  1. 高频使用的方法push/popmapfilterreduce
  2. 需要明确:哪些数组方法会改变原数组,提问可能结合vue2的数组响应式操作方法
  3. 链式调用:如 filter().map().slice()
  4. 性能敏感场景:大数据量时慎用 spliceshift(索引更新开销大)
http://www.lryc.cn/news/583136.html

相关文章:

  • SpringBoot实现动态Job实战
  • DRT-Net: Dual-Branch Rectangular Transformer with Contrastive Learning
  • 离线二维码生成器,无需网络快速制作
  • springBoot使用XWPFDocument 和 LoopRowTableRenderPolicy 两种方式填充数据到word模版中
  • Android-重学kotlin(协程源码第一阶段)新学习总结
  • npm init vue@latestnpm error code ETIMEDOUT
  • 网络请求与现实生活:用办理业务类比理解HTTP通信
  • kotlin学习,val使用get()的问题
  • AI 知识库 2.0 时代!2025 设备管理系统如何实现 “智慧运维”?
  • Docker完全指南:从入门到生产环境实战
  • 将.net应用部署到Linux服务器
  • 深入解析 .NET 泛型:从原理到实战优化
  • Docker 搭建 Harbor 私有仓库
  • 使用 Docker 搭建 Go Web 应用开发环境——AI教你学Docker
  • mac m1安装大模型工具vllm
  • Vue的watch和React的useEffect
  • “AI 曼哈顿计划”:科技竞赛还是人类挑战?
  • 电商销量第一,贝锐向日葵智能远控硬件背后的软硬结合战略
  • Mac mini 高性价比扩容 + Crossover 游戏实测 全流程手册
  • Python-FAQ-单例模式
  • 深入理解图像二值化:从静态图像到视频流实时处理
  • 一天两道力扣(3)
  • 计蒜客T3473丑数、Leetcode2401最长优雅子数组、Leetcode167两数之和、Leetcode581最短无序连续子数组
  • 开源链动2+1模式与AI智能名片融合下的S2B2C商城小程序源码:重构大零售时代新生态
  • 【工具】Pycharm隐藏文件类型或目录
  • Hive MetaStore的实现和优化
  • AI+智慧园区 | 事件处置自动化——大模型重构园区治理逻辑
  • 向量空间 线性代数
  • 两张图片对比clip功能
  • 在 PyCharm 中安装并配置 Node.js 的指南