ES6+ 常用特性

ES6（ES2015）是 JavaScript 历史上最大的一次更新，之后每年都有新特性加入。本章汇总前面已介绍和尚未覆盖的常用 ES6+ 特性。

已学特性的回顾

前面的章节中已经覆盖了许多 ES6+ 特性：

特性章节
let / const变量
模板字面量字符串
箭头函数函数
for...of循环
解构赋值对象基础
展开运算符 ...数组、对象基础
classList元素选择与操作
Promise / async/await异步编程入门

class — 类语法

ES6 的 class 是原型继承的语法糖，让面向对象编程更直观：

javascript 
class User {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  greet() {
    return `你好，我是${this.name}`;
  }

  get isAdult() {
    return this.age >= 18;
  }

  static create(name) {
    return new User(name, 0);
  }
}

const user = new User('张三', 25);
console.log(user.greet());    // "你好，我是张三"
console.log(user.isAdult);    // true

const anonymous = User.create('匿名');
console.log(anonymous.name); // "匿名"

extends — 类继承

javascript 
class Admin extends User {
  constructor(name, age, permissions) {
    super(name, age); // 调用父类构造函数
    this.permissions = permissions;
  }

  greet() {
    return `${super.greet()}，管理员权限：${this.permissions.join(', ')}`;
  }
}

const admin = new Admin('管理员', 30, ['read', 'write', 'delete']);
console.log(admin.greet()); // "你好，我是管理员，管理员权限：read, write, delete"

可选链 ?.

安全地访问深层嵌套的属性，遇到 null/undefined 时不报错而是返回 undefined：

javascript 
const user = { profile: null };

// ❌ 会报错
console.log(user.profile.name); // TypeError

// ✅ 安全访问
console.log(user?.profile?.name); // undefined

// 也可用于方法调用
user.getName?.(); // 如果 getName 不是函数，不报错

// 也可用于数组索引
const arr = null;
console.log(arr?.[0]); // undefined

空值合并 ??

只在值为 null 或 undefined 时使用默认值（不像 || 会把 0、''、false 也当作假值）：

javascript 
const count = 0;

count || 10;  // 10（0 是假值）
count ?? 10;  // 0（0 不是 null 或 undefined）

const name = '';
name || '匿名';  // "匿名"（空字符串是假值）
name ?? '匿名';  // ""（空字符串不是 null）

数组与对象的更多改进

Array.from() — 类数组转数组

javascript 
// 将 NodeList / arguments / Set / Map 等转为真正的数组
const lis = document.querySelectorAll('li'); // NodeList
const arr = Array.from(lis);
arr.map(li => li.textContent);

Object.assign() — 合并对象

javascript 
const defaults = { theme: 'light', fontSize: 16 };
const overrides = { theme: 'dark' };
const merged = Object.assign({}, defaults, overrides);
// { theme: 'dark', fontSize: 16 }
// 不过 {...defaults, ...overrides} 是更简洁的替代

Set 和 Map

Set — 唯一值集合

javascript 
const set = new Set([1, 2, 2, 3, 3]);
console.log(set); // Set {1, 2, 3}（重复值自动去重）

set.add(4);
set.has(2); // true
set.delete(3);
set.size;   // 3

// 数组去重
const unique = [...new Set([1, 2, 2, 3])]; // [1, 2, 3]

Map — 键值对集合

javascript 
const map = new Map();
map.set('name', '张三');
map.set(42, '数字键');
map.set({ id: 1 }, '对象键');

map.get('name'); // "张三"
map.has(42);     // true
map.size;        // 3

// Map 的键可以是任意类型，不像对象的键只能是字符串/Symbol

import / export — 模块化

已在 模块化 章节单独讲解。

ES6+ 特性远不止这些，但以上是最常用的核心集合。随着你写更多 JavaScript 项目，会自然地遇到并使用其他特性（如 Proxy、Reflect、Generator、BigInt 等）。按需查阅 MDN 文档是最有效的学习方式。