你不知道的JavaScript：ES6与Beyond

简介

《ES6 & Beyond》覆盖 ECMAScript 2015 及后续版本的重要新特性。

let 和 const

// const - 常量
const PI = 3.14159;
// PI = 3; // TypeError

// const 对象
const obj = { name: "Lily" };
obj.name = "Rose"; // OK - 可以修改属性

// let - 块级作用域
if (true) {
  let blockVar = "block";
}
// console.log(blockVar); // ReferenceError

箭头函数

// 基本语法
const add = (a, b) => a + b;

// 单参数可以省略括号
const double = x => x * 2;

// 多行函数体需要 return
const getUser = id => {
  return fetch(`/users/${id}`);
};

// 立即执行函数
((name) => console.log(name))("Lily");

特点：

• 不绑定自己的 this
• 不绑定 arguments
• 不能用作构造函数

模板字符串

const name = "Lily";
const age = 25;

// 字符串插值
const msg = `Hello, ${name}! You are ${age} years old.`;

// 多行字符串
const html = `
  <div>
    <h1>${name}</h1>
  </div>
`;

解构赋值

数组解构

const [a, b, c] = [1, 2, 3];
const [first, , third] = [1, 2, 3];

// 剩余参数
const [head, ...tail] = [1, 2, 3, 4];

// 默认值
const [x = 1] = [];

对象解构

const { name, age } = { name: "Lily", age: 25 };

// 重命名
const { name: userName } = { name: "Lily" };

// 默认值
const { name = "Guest" } = {};

// 嵌套解构
const { user: { name } } = { user: { name: "Lily" } };

扩展运算符

// 数组展开
const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5]; // [1, 2, 3, 4, 5]

// 对象展开
const obj1 = { a: 1, b: 2 };
const obj2 = { ...obj1, c: 3 }; // { a: 1, b: 2, c: 3 }

// 函数参数
function sum(...numbers) {
  return numbers.reduce((a, b) => a + b, 0);
}

类 (Class)

class Animal {
  constructor(name) {
    this.name = name;
  }
  
  speak() {
    console.log(`${this.name} makes a sound.`);
  }
}

class Dog extends Animal {
  constructor(name, breed) {
    super(name); // 调用父类构造函数
    this.breed = breed;
  }
  
  speak() {
    console.log(`${this.name} barks.`);
  }
}

const dog = new Dog("Buddy", "Golden Retriever");
dog.speak();

模块 (Module)

export

// 命名导出
export const PI = 3.14159;
export function add(a, b) { return a + b; }

// 默认导出
export default class Foo { }

import

// 命名导入
import { PI, add } from "./math.js";

// 默认导入
import MyClass from "./MyClass.js";

// 全部导入
import * as Math from "./math.js";

// 组合导入
import MyClass, { PI } from "./module.js";

Promise

const promise = new Promise((resolve, reject) => {
  const success = true;
  if (success) {
    resolve("Done!");
  } else {
    reject("Error!");
  }
});

promise
  .then(result => console.log(result))
  .catch(err => console.error(err))
  .finally(() => console.log("Complete"));

Symbol

const sym = Symbol("description");
const obj = {
  [sym]: "value"
};

console.log(obj[sym]); // "value"

// 常用内置 Symbol
Symbol.iterator; // 可迭代
Symbol.toStringTag; // toString 标签

代理 (Proxy)

const handler = {
  get(target, prop) {
    console.log(`Getting ${prop}`);
    return target[prop];
  },
  set(target, prop, value) {
    console.log(`Setting ${prop} = ${value}`);
    target[prop] = value;
  }
};

const proxy = new Proxy({}, handler);
proxy.name = "Lily"; // Setting name = Lily
console.log(proxy.name); // Getting name

生成器 (Generator)

function* numberGenerator() {
  yield 1;
  yield 2;
  yield 3;
}

const gen = numberGenerator();
console.log(gen.next().value); // 1
console.log(gen.next().value); // 2
console.log(gen.next().value); // 3
console.log(gen.next().done);  // true

Async/Await

async function fetchData() {
  try {
    const response = await fetch("/api/data");
    const data = await response.json();
    return data;
  } catch (err) {
    console.error(err);
  }
}

修饰器 (Decorator) - 实验性

function logged(target, name, descriptor) {
  const original = descriptor.value;
  descriptor.value = function(...args) {
    console.log(`Calling ${name} with`, args);
    return original.apply(this, args);
  };
  return descriptor;
}

class Calculator {
  @logged
  add(a, b) {
    return a + b;
  }
}

小结

• ✅ 掌握 let/const 和块级作用域
• ✅ 熟练使用箭头函数和模板字符串
• ✅ 掌握解构赋值和扩展运算符
• ✅ 理解 ES6 模块系统
• ✅ 了解 Proxy 和 Generator 等高级特性

相关阅读：

• YDKJS: ES6 & Beyond