素材阁

JavaScript 速查

共 50 条常用 JavaScript 写法,覆盖数组方法、对象与解构、函数与异步、字符串与数字、常用技巧五组场景, 逐条给出写法与说明。支持搜索与分类筛选,点击写法即可复制。

数组方法

多数方法返回新数组,不改动原数组;M 表示原地修改原数组。

写法说明
映射,逐项转换后返回同长度新数组
按条件过滤,返回子集
归约,聚合为单个值
返回首个满足条件的元素,否则 undefined
返回首个满足条件的下标,否则 -1
是否存在满足 / 是否全部满足
是否包含某值,能正确判断 NaN
按深度展平嵌套数组
map 后自动展平一层
截取子数组,原数组不变
删除/插入/替换,原地修改
排序,默认按字符串,数字需传比较函数
尾部增删 / 头部增删,原地修改
把类数组/可迭代对象转为数组

对象与解构

写法说明
解构取值并设默认值
解构时重命名
剩余(rest)属性
浅合并/覆盖,后者优先
取键 / 值 / [键,值] 数组
浅拷贝合并到目标对象
深拷贝(不支持函数/DOM)
可选链,中间为 null/undefined 时短路
空值合并:仅 null/undefined 时取 b

函数与异步

写法说明
箭头函数,自带参数默认值
剩余参数,收集为数组
可选调用,函数不存在时不报错
异步函数,返回 Promise
等待 Promise 完成,仅在 async 内可用
全部成功才成功,否则首个失败即拒绝
等全部结束,返回每项状态
首个完成(成功或失败)即决定
延时 / 周期任务

字符串与数字

写法说明
按分隔符切分为数组
用分隔符拼接
去掉首尾空白
前缀 / 后缀 / 包含判断
左填充,常用于补零
全局替换
重复 n 次
转数字,整数解析指定进制
保留小数位(返回字符串)
按地区格式化数字,如千分位

常用与技巧

写法说明
类型判断,数组需用后者
解析 / 格式化输出 JSON
去重,配合 [...new Set(arr)] 使用
键值对,键可为任意类型
异常捕获,finally 总会执行
按帧回调,适合动画
本地持久化存储(仅字符串)
生成随机 UUID v4

使用说明

数组、字符串、对象的方法名和参数最容易记混(splice 还是 slice?map 会不会改原数组?)。本速查按类型分组列出常用写法,随手查一眼就清楚。

  1. 搜索方法名或用途(如 去重、排序、格式化、深拷贝)。
  2. 按分组查看字符串、数组、对象、异步等类别。
  3. 点击复制按钮即可取走代码片段。

常见问题

slice 和 splice 有什么区别?
slice 返回新数组且不修改原数组;splice 会直接修改原数组并返回被删除的元素。
对象怎么深拷贝?
现代可用 structuredClone(obj);旧环境可用 JSON.parse(JSON.stringify(obj))(会丢函数与 undefined)。

延伸阅读

相关工具