Menu
CoddyTech

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 / undefinedlet 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 / elseif (x > 0) { … } else { … }
三元运算符const y = x > 0 ? 1 : 0;
Switchswitch (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() { … }
等待 Promiseconst data = await fetch(url);
Then / catchpromise.then(res => …).catch(err => …)
配合 await 使用 try / catchtry { await f(); } catch (e) { … }
Resolve / rejectPromise.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+ 的现代特性。

Coddy 编程语言插图

在 Coddy 学习 JavaScript

开始