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);
document.write(user.greet() + '<br>');    // "你好，我是张三"
document.write(user.isAdult + '<br>');    // true

const anonymous = User.create('匿名');
document.write(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']);
document.write(admin.greet()); // "你好，我是管理员，管理员权限：read, write, delete"

可选链 ?.

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

javascript 
const user = { profile: null };

// ❌ 会报错
try { document.write(user.profile.name); } catch (e) { document.write('Error: ' + e.message); }
document.write('<br>');

// ✅ 安全访问
document.write(user?.profile?.name + '<br>'); // undefined

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

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

空值合并 ??

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

javascript 
const count = 0;

document.write('count || 10 = ' + (count || 10) + '<br>');  // 10（0 是假值）
document.write('count ?? 10 = ' + (count ?? 10) + '<br>');  // 0（0 不是 null 或 undefined）

const name = '';
document.write("name || '匿名' = " + (name || '匿名') + '<br>');  // "匿名"（空字符串是假值）
document.write("name ?? '匿名' = " + (name ?? '匿名') + '<br>');  // ""（空字符串不是 null）

数组与对象的更多改进

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

javascript 
// 将类数组（字符串、Set、Map 等）转为真正的数组
const str = 'hello';
const arr = Array.from(str);
document.write(JSON.stringify(arr) + '<br>'); // ["h","e","l","l","o"]

// Array.from 支持 map 回调
const doubled = Array.from([1, 2, 3], x => x * 2);
document.write(JSON.stringify(doubled)); // [2, 4, 6]

Object.assign() — 合并对象

javascript 
const defaults = { theme: 'light', fontSize: 16 };
const overrides = { theme: 'dark' };
const merged = Object.assign({}, defaults, overrides);
document.write(JSON.stringify(merged) + '<br>'); // {"theme":"dark","fontSize":16}
// 不过 {...defaults, ...overrides} 是更简洁的替代
document.write(JSON.stringify({...defaults, ...overrides}));

Set 和 Map

Set — 唯一值集合

javascript 
const set = new Set([1, 2, 2, 3, 3]);
document.write(JSON.stringify([...set]) + '<br>'); // [1,2,3]（重复值自动去重）

set.add(4);
document.write('has(2): ' + set.has(2) + '<br>'); // true
set.delete(3);
document.write('size: ' + set.size + '<br>'); // 3

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

Map — 键值对集合

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

document.write('get("name"): ' + map.get('name') + '<br>'); // "张三"
document.write('has(42): ' + map.has(42) + '<br>');     // true
document.write('size: ' + map.size + '<br>');        // 3

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

import / export — 模块化

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

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