JavaScript 语法速查表 - JavaScript 常用方法与技巧大全
这套速查给写 React/Vue、Node 脚本或任何前端项目的开发者，聚焦每天都要用的 ES6+ 语法：变量与函数、解构、模板字符串、数组高阶方法、异步与模块。与把 API 照名罗列的文档不同，这里按"这句代码解决什么问题"组织，可边看边抄。读完你应能写出不靠 var 的块级变量、用解构抽取值、用 map/filter 取代手写 for，并用 async/await 把回调整理清楚。
变量与函数 Variables & Functions 6
const name = "value"let count = 0const fn = (x) => x * 2const fn = (x, y = 1) => {}const fn = (...args) => {}function* generator() { yield 1; }解构赋值 Destructuring 5
const [a, b] = [1, 2]const { name, age } = personconst { name: userName } = personconst [first, ...rest] = arrfunction fn({ name, age = 18 }) {}字符串与模板 String & Template 6
`Hello ${name}`str.includes("text")str.startsWith("prefix")str.endsWith("suffix")str.padStart(10, "0")str.trim() / trimStart() / trimEnd()数组方法 Array Methods 8
arr.map(x => x * 2)arr.filter(x => x > 0)arr.reduce((acc, x) => acc + x, 0)arr.find(x => x.id === 1)arr.findIndex(x => x > 0)arr.some(x => x > 0) / every(x => x > 0)arr.flat() / flatMap()Array.from(iterable) / Array.of(1,2,3)异步编程 Async/Await 6
const p = new Promise((resolve, reject) => {})p.then(res => {}).catch(err => {})async function fn() { await p; }Promise.all([p1, p2])Promise.race([p1, p2])Promise.allSettled([p1, p2])模块 Modules 6
import { name } from "./module.js"import * as utils from "./utils.js"import defaultExport from "./module.js"export const name = "value"export default function() {}export { name, age }对象与类 Object & Class 6
const obj = { name, age }const obj = { fn() {} }const obj = { [`key${i}`]: value }Object.keys(obj) / values(obj) / entries(obj)class MyClass { constructor() {} }class Child extends Parent {}典型使用场景
写 React/Vue 组件时用解构从 props/state 抽取值、用模板字符串拼渲染文本；在 Node 或 SSR 里用 async/await 串起文件读写与第三方接口请求；做前端数据处理时用 map/filter/reduce 一行把数组转成视图所需的结构。无论改一个弹窗、写一段接口聚合，还是排查异步竞态，入口最深、被用得最多的就是数组高阶方法与异步那一组。
命令示例
用 map 一次性转换数组
[1, 2, 3].map((x) => x * 2)map 返回一个长度相同的新数组，不改动原数组，适合派生视图数据。
输出
[2, 4, 6]
用解构给字段赋默认值
const user = { name: "alice" }
const { name, age = 18 } = user
console.log(name, age)解构默认值只在属性值严格等于 undefined 时才生效，null 或空字符串不会被替换。
输出
alice 18
async/await 串行读取再处理
async function load() {
const res = await fetch("/api/user")
const data = await res.json()
return data
}await 会把后续逻辑暂挂到 Promise 落定后再继续，外层要用 try/catch 拦下 reject 的错误。
Promise.all 并行等待
const [a, b] = await Promise.all([p1, p2])Promise.all 有一个 reject 就整体 reject；想互不拖累地拿到各自结果用 Promise.allSettled。
常见坑与注意事项
- 箭头函数不绑定自己的 this，若在对象方法或事件回调里需要动态 this 就用 function；否则 this 会泄露到外层作用域。
- const 只禁止重新绑定变量本身，数组 push、对象属性赋值都照常可行，别误以为整个值被冻结不变量。
- 避免使用 var：它有函数作用域与变量提升，容易踩到声明顺序和闭包捕获的坑，一律用 const/let。
- 用 == 会做隐式类型转换（0 == false 相等），判断相等一律用 ===；断言 async 抛错要放在 try/catch 里，别让 reject 变成 unhandledrejection。
提示
- 优先使用 const，只有需要重新赋值时才用 let，避免使用 var。
- 箭头函数没有自己的 this，会捕获上下文的 this，不适合做对象方法。
- async/await 是 Promise 的语法糖，让异步代码看起来像同步，更易读。
常见问题
javascript 的 == 与 === 到底有什么区别?
== 会先做类型转换再比较，比如 '1' == 1 成立、null == undefined 成立，容易产生难以察觉的 bug；=== 要求类型和值都相等，不做隐式转换。业务代码里应一律用 ===，判断空值用 x === null 或 typeof 判断。
var、let、const 该什么时候用?
var 有函数作用域、可重复声明且有变量提升，易致意外；let 和 const 都是块级作用域。默认用 const 声明不重新赋值的变量，确实要改变量值再用 let，尽量不用 var。注意 const 只是禁止重新赋值，对象的属性仍可修改。
javascript 数组的 map 和 forEach 有什么区别?
关键区别是返回值：map 返回一个新数组（结果由每个元素执行回调后的返回值组成），适合做变换；forEach 只执行回调、返回 undefined，适合做打印、计数、修改外部状态这类副作用。需要产出新数组时用 map，仅想遍历时用 forEach。
javascript 里怎么安全地深拷贝一个对象?
浅拷贝（展开运算符 {...obj}、Object.assign）只复制顶层，嵌套对象仍是引用，改动会相互影响。JSON.parse(JSON.stringify(obj)) 能做深拷贝但会丢弃函数、undefined、Date、正则并支持不了循环引用；要保留这些或含循环结构时用 structuredClone(obj)。
async/await 里的错误该怎么捕获?
await 会把 Promise 的 rejection 当作同步异常抛出，因此用 try/catch 包住 await 即可捕获；在顶层（如模块作用域）可加 .catch()。注意一个 await 失败不会自动跳过后续语句，需要决定是让整个函数失败还是捕获后继续执行。
由 巧匠 维护
公开更新于 2026年7月21日，内容持续校对官方文档。