JavaScript 速查表
最后更新
变量(let、const、var)
声明值时优先用 const,其次用 let,避免使用 var。
| 操作 | 语法 |
|---|---|
| 块级作用域,可重新赋值 | let count = 0; |
| 块级作用域,不可重新赋值 | const name = "Ada"; |
| 函数作用域(旧写法) | var x = 1; |
| 只声明不赋值 | let result; |
| 一次声明多个 | let a = 1, b = 2; |
| 常量对象(内容可修改) | const user = {}; user.id = 1; |
数据类型
基本类型和引用类型,以及如何检查类型。
| 类型 | 示例 |
|---|---|
| 数字(Number) | let n = 42; |
| 字符串(String) | let s = "hi"; |
| 布尔值(Boolean) | let ok = true; |
| 数组(Array) | let arr = [1, 2, 3]; |
| 对象(Object) | let obj = { id: 1 }; |
| Null / undefined | let a = null;, let b; |
| 检查类型 | typeof n |
| 类型转换 | Number("7"), String(42), Boolean(0) |
字符串与模板字符串
拼接和处理文本。
| 操作 | 语法 |
|---|---|
| 模板字符串 | Hi ${name}, age ${age}(用反引号包起来) |
| 长度 | text.length |
| 转大写 / 小写 | text.toUpperCase(), text.toLowerCase() |
| 去掉首尾空白 | text.trim() |
| 全部替换 | text.replaceAll("a", "b") |
| 拆分成数组 | text.split(",") |
| 是否包含 | text.includes("js") |
| 截取 | text.slice(0, 3) |
数组与数组方法
有序集合,以及遍历它们的各种方法。
| 操作 | 语法 |
|---|---|
| 在末尾添加 / 删除 | arr.push(4), arr.pop() |
| 在开头添加 / 删除 | arr.unshift(0), arr.shift() |
| 转换每一项 | arr.map(x => x * 2) |
| 保留符合条件的项 | arr.filter(x => x > 0) |
| 归约为单个值 | arr.reduce((sum, x) => sum + x, 0) |
| 查找某一项 | arr.find(x => x.id === 1) |
| 检查部分 / 全部 | arr.some(f), arr.every(f) |
| 查找值的索引 | arr.indexOf(3), arr.includes(3) |
| 连接成字符串 | arr.join(", ") |
对象
键值对集合。
| 操作 | 语法 |
|---|---|
| 创建 | const user = { id: 1, name: "Ada" }; |
| 访问属性 | user.name, user["name"] |
| 添加 / 修改属性 | user.age = 25; |
| 删除属性 | delete user.age; |
| 获取所有键 / 值 | Object.keys(user), Object.values(user) |
| 获取键值对 | Object.entries(user) |
| 合并对象 | Object.assign({}, a, b) |
| 浅拷贝 | const copy = { ...user }; |
流程控制
条件语句和循环。
| 操作 | 语法 |
|---|---|
| If / else if / else | if (x > 0) { … } else { … } |
| 三元运算符 | const y = x > 0 ? 1 : 0; |
| Switch | switch (x) { case 1: … break; } |
| for 循环 | for (let i = 0; i < 5; i++) { … } |
| for-of(遍历值) | for (const item of arr) { … } |
| for-in(遍历键) | for (const key in obj) { … } |
| while 循环 | while (x < 10) { … } |
函数与箭头函数
定义可复用、可调用的代码块。
| 操作 | 语法 |
|---|---|
| 函数声明 | function add(a, b) { return a + b; } |
| 箭头函数 | const add = (a, b) => a + b; |
| 单个参数的箭头函数 | const sq = x => x * x; |
| 无参数的箭头函数 | const now = () => Date.now(); |
| 默认参数 | function f(x = 0) { … } |
| 剩余参数 | function f(...args) { … } |
| 立即执行函数(IIFE) | (() => { … })(); |
解构与展开
拆出值,复制或合并数据结构。
| 操作 | 语法 |
|---|---|
| 数组解构 | const [a, b] = arr; |
| 对象解构 | const { id, name } = user; |
| 解构时重命名 | const { id: userId } = user; |
| 默认值 | const { age = 0 } = user; |
| 展开数组 | const all = [...a, ...b]; |
| 展开对象 | const next = { ...user, age: 25 }; |
| 解构中的剩余元素 | const [first, ...rest] = arr; |
Promise 与 async/await
处理网络请求这类异步任务。
| 操作 | 语法 |
|---|---|
| 异步函数 | async function load() { … } |
| 等待 Promise | const data = await fetch(url); |
| Then / catch | promise.then(res => …).catch(err => …) |
| 配合 await 使用 try / catch | try { await f(); } catch (e) { … } |
| Resolve / reject | Promise.resolve(1), Promise.reject(err) |
| 等待全部完成 | await Promise.all([a, b]) |
| 取最先完成的一个 | await Promise.race([a, b]) |
最常用的现代 JavaScript 语法,全都在这一页。这份 JavaScript 速查表是日常 ES6+ 的快速参考:声明变量、字符串和数组方法、对象、箭头函数、解构,还有 async/await。
这里的内容都是标准 JavaScript,可以在现代浏览器和 Node.js 中运行。需要什么就复制什么,也可以在 JS 在线编辑器里直接运行每个代码片段,无需安装。刚入门?Coddy 的免费交互式 JavaScript 课程会带你动手学会这些语法。
JavaScript 速查表常见问题
这份 JavaScript 速查表免费吗?
免费。这份 JavaScript 速查表完全免费,也不用注册。把它加入书签,需要查语法、数组方法或异步写法时随时回来看。
JavaScript 中 == 和 === 有什么区别?
== 是宽松相等:比较前会先把两边转换成同一类型,所以 0 == "0" 是 true。=== 是严格相等:同时比较值和类型,不做任何转换,所以 0 === "0" 是 false。几乎所有情况下都应该优先用 ===(和 !==),结果可预测,也能避免意外的类型转换。let、const 和 var 有什么区别?
const 和 let 是 ES6 新增的,属于块级作用域;var 是更早的写法,属于函数作用域。不会重新赋值的值用 const,会重新赋值的用 let,尽量不要用 var,以免出现变量提升和作用域相关的 bug。注意,const 声明的对象或数组,内容仍然可以修改,不可变的只是这个绑定本身。可以在线练习 JavaScript 吗?
可以。打开 JS 在线编辑器,就能在浏览器里运行这份速查表中的任何代码片段,无需安装。想系统地学,Coddy 的免费交互式 JavaScript 课程会带你从变量和循环一步步学到数组方法和 async/await。
这份速查表适合初学者吗?
适合。内容从基础(变量、数据类型、字符串)一直排到解构和 async/await,第一天就能用上前面几部分,再慢慢掌握 ES6+ 的现代特性。