JavaScript ES6+ 速查表
把 JavaScript ES6+ 最常用的语法特性整理成速查表,写现代 JS 代码时对照查。
返回 编程语言变量与函数 Variables & Functions 6
const name = "value"声明常量,不可重新赋值
let count = 0声明块级作用域变量
const fn = (x) => x * 2箭头函数,单行省略 return
const fn = (x, y = 1) => {}默认参数
const fn = (...args) => {}剩余参数,收集所有参数为数组
function* generator() { yield 1; }生成器函数
解构赋值 Destructuring 5
const [a, b] = [1, 2]数组解构
const { name, age } = person对象解构
const { name: userName } = person解构并重命名
const [first, ...rest] = arr剩余元素
function 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) => {})创建 Promise
p.then(res => {}).catch(err => {})链式调用
async function fn() { await p; }async/await 语法
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 {}类继承
💡 提示
- 优先使用 const,只有需要重新赋值时才用 let,避免使用 var。
- 箭头函数没有自己的 this,会捕获上下文的 this,不适合做对象方法。
- async/await 是 Promise 的语法糖,让异步代码看起来像同步,更易读。