ES6 核心知识点完全总结（变量 + 箭头函数 + 解构 + Promise + 模块化）

摘要：本文系统总结 ES6 核心知识点，涵盖 let/const 变量声明、箭头函数、解构赋值、模板字符串、Promise 异步处理、模块化系统、Class 类、Set/Map 数据结构等核心内容。每个知识点配有完整代码示例、对比表格、实战场景及常见问题解答，帮助前端开发者系统掌握 ES6 现代 JavaScript 编程。

关键词：ES6、JavaScript、箭头函数、Promise、模块化、解构赋值、Class类、前端开发

适合人群：JavaScript 基础开发者、Vue/React 学习者、准备面试的前端工程师、需要系统复习 ES6 的开发者

阅读时间：约 45 分钟

版本信息：ES6/ES2015+ | 兼容现代浏览器（IE11 需转译）

---

一、ES6 简介

1.1 ES6 概述

ES6 的全称为：ECMAScript 2015（简称 ES2015）。

ES6 是 JavaScript 语言的一次重大升级，由 ECMA 国际组织于 2015 年 6 月正式发布。

核心理解：ES6 让 JavaScript 更适合编写复杂的大型应用程序，成为企业级开发语言。

核心新特性：

特性类别	新增功能	应用场景
变量声明	let、const	块级作用域、常量声明
函数增强	箭头函数、默认参数	简化函数写法、this 绑定
解构赋值	数组解构、对象解构	数据提取、参数传递
字符串	模板字符串、新方法	字符串拼接、查找
异步处理	Promise、async/await	异步编程、网络请求
模块化	export、import	代码组织、依赖管理
类与继承	Class、extends	面向对象编程
数据结构	Set、Map、Symbol	唯一值、键值对存储

1.2 ES6 兼容性

查询 ES6 兼容性的网站 ：Can I Use

现代开发方案：

方案	说明	工具
Babel 转译	将 ES6 转为 ES5	@babel/core、@babel/preset-env
现代浏览器	直接使用 ES6	Chrome 60+、Firefox 54+、Safari 11+
TypeScript	超集语言，编译为 JS	tsc、ts-loader

💡 开发建议：现代前端开发中，我们通常使用 Babel 或 TypeScript 等工具将 ES6+ 代码转译为兼容老浏览器的 ES5 代码，所以不用过于担心兼容性问题。
📚 官方文档 ：ECMAScript 2015 规范

---

二、变量声明

2.1 let 声明

let 用于声明变量，与 var 相比，let 具有块级作用域。

基础用法：

// let 声明变量
let name = '张三';
let age = 25;

// 块级作用域
if (true) {
  let message = 'Hello';
  console.log(message);  // 'Hello'
}
console.log(message);  // ReferenceError: message is not defined

let 的特点：

特点	说明	示例
块级作用域	只在 {} 内有效	if、for、while 等
不存在变量提升	必须先声明后使用	console.log(a); let a = 1; 报错
暂时性死区	声明前访问会报错	同上
不允许重复声明	同一作用域内不能重复	let a = 1; let a = 2; 报错

实战场景：for 循环中的 let

// var 的问题
for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 100);  // 输出：3, 3, 3
}

// let 解决闭包问题
for (let i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 100);  // 输出：0, 1, 2
}

2.2 const 声明

const 用于声明常量，声明后不能重新赋值。

基础用法：

// const 声明常量
const PI = 3.14159;
const API_URL = 'https://api.example.com';

// 声明后不能重新赋值
PI = 3.14;  // TypeError: Assignment to constant variable

const 的特点：

特点	说明	示例
必须初始化	声明时必须赋值	const a; 报错
不能重新赋值	声明后不能修改	const a = 1; a = 2; 报错
块级作用域	同 let	只在 {} 内有效
对象属性可修改	引用不变，内容可变	const obj = {}; obj.name = '张三'; ✅

对象和数组的 const：

// 对象属性可以修改
const user = { name: '张三', age: 25 };
user.age = 26;  // ✅ 可以修改
user = {};      // ❌ 不能重新赋值

// 数组元素可以修改
const arr = [1, 2, 3];
arr.push(4);    // ✅ 可以修改
arr = [];       // ❌ 不能重新赋值

💡 最佳实践 ：优先使用 const，只有在需要重新赋值时才使用 let，避免使用 var。

2.3 var/let/const 对比

对比项	var	let	const
作用域	函数作用域	块级作用域	块级作用域
变量提升	✅ 存在	❌ 不存在	❌ 不存在
重复声明	✅ 允许	❌ 不允许	❌ 不允许
暂时性死区	❌ 无	✅ 有	✅ 有
必须初始化	❌ 不需要	❌ 不需要	✅ 需要
重新赋值	✅ 允许	✅ 允许	❌ 不允许
使用建议	❌ 避免使用	✅ 需要重新赋值时	✅ 优先使用

// 推荐写法
const API_URL = 'https://api.example.com';  // 常量
let count = 0;  // 会变化的变量

// 不推荐写法
var name = '张三';  // 避免使用 var

📚 官方文档 ：let 声明 - MDN | const 声明 - MDN

---

三、箭头函数

3.1 基础语法

箭头函数是 ES6 新增的函数写法，语法更简洁。

基础语法：

// 传统函数
function add(a, b) {
  return a + b;
}

// 箭头函数
const add = (a, b) => {
  return a + b;
};

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

// 简写：单行 return 可省略大括号和 return
const square = x => x * x;

// 无参数
const sayHello = () => console.log('Hello');

箭头函数的简写规则：

情况	简写方式	示例
单参数	省略 ()	x => x * 2
单行 return	省略 {} 和 return	x => x * x
无参数	必须写 ()	() => console.log('Hi')
多参数	不能省略 ()	(a, b) => a + b
返回对象	用 () 包裹	x => ({ name: x })

3.2 this 指向

箭头函数没有自己的 this，它会捕获定义时所在上下文的 this 值。

// 传统函数的 this
const obj1 = {
  name: '张三',
  sayName: function() {
    console.log(this.name);  // '张三'
  }
};

// 箭头函数的 this
const obj2 = {
  name: '李四',
  sayName: () => {
    console.log(this.name);  // undefined（this 指向全局对象）
  }
};

实战场景：定时器中的 this

// 传统函数需要保存 this
const counter1 = {
  count: 0,
  start() {
    const self = this;  // 保存 this
    setInterval(function() {
      self.count++;
      console.log(self.count);
    }, 1000);
  }
};

// 箭头函数自动绑定 this
const counter2 = {
  count: 0,
  start() {
    setInterval(() => {
      this.count++;  // this 指向 counter2
      console.log(this.count);
    }, 1000);
  }
};

3.3 使用场景

适合使用箭头函数的场景：

场景	说明	示例
回调函数	定时器、事件监听	setTimeout(() => {}, 1000)
数组方法	map、filter、reduce	arr.map(x => x * 2)
Promise 链	then、catch	promise.then(res => {})

不适合使用箭头函数的场景：

场景	说明	原因
对象方法	obj.method = () => {}	this 不指向对象
构造函数	new ArrowFunc()	箭头函数不能 new
原型方法	Class.prototype.method = () => {}	this 指向错误
事件监听	element.addEventListener('click', () => {})	this 不指向元素
需要 arguments	() => arguments	箭头函数没有 arguments

📚 官方文档 ：箭头函数 - MDN

---

四、解构赋值

4.1 数组解构

按照对应位置，从数组中提取值赋值给变量。

基础用法：

// 基础解构
const arr = [1, 2, 3];
const [a, b, c] = arr;
console.log(a, b, c);  // 1, 2, 3

// 跳过某些值
const [x, , z] = [1, 2, 3];
console.log(x, z);  // 1, 3

// 默认值
const [m, n = 10] = [5];
console.log(m, n);  // 5, 10

// 剩余运算符
const [first, ...rest] = [1, 2, 3, 4, 5];
console.log(first);  // 1
console.log(rest);   // [2, 3, 4, 5]

实战场景：变量交换

// ES5 写法
let a = 1, b = 2;
let temp = a;
a = b;
b = temp;

// ES6 解构写法
let a = 1, b = 2;
[a, b] = [b, a];  // 简洁优雅

4.2 对象解构

从对象中提取属性赋值给变量。

基础用法：

// 基础解构
const user = { name: '张三', age: 25, email: 'zhangsan@example.com' };
const { name, age } = user;
console.log(name, age);  // '张三', 25

// 重命名
const { name: userName, age: userAge } = user;
console.log(userName, userAge);  // '张三', 25

// 默认值
const { name, city = '北京' } = user;
console.log(city);  // '北京'

// 剩余运算符
const { name, ...rest } = user;
console.log(rest);  // { age: 25, email: 'zhangsan@example.com' }

嵌套解构：

const user = {
  name: '张三',
  address: {
    city: '北京',
    district: '朝阳区'
  }
};

const { address: { city, district } } = user;
console.log(city, district);  // '北京', '朝阳区'

4.3 函数参数解构

基础用法：

// 对象参数解构
function printUser({ name, age }) {
  console.log(`姓名：${name}，年龄：${age}`);
}

printUser({ name: '张三', age: 25 });

// 默认值
function createUser({ name = '匿名用户', age = 0 } = {}) {
  return { name, age };
}

// 数组参数解构
function getFirstAndLast([first, , last]) {
  return { first, last };
}

getFirstAndLast([1, 2, 3, 4, 5]);  // { first: 1, last: 5 }

📚 官方文档 ：解构赋值 - MDN

---

五、字符串与模板

5.1 模板字符串

使用反引号 ````` 包裹的字符串，支持变量插值和多行字符串。

基础用法：

const name = '张三';
const age = 25;

// ES5 拼接
const es5Str = '姓名：' + name + '，年龄：' + age;

// ES6 模板字符串
const es6Str = `姓名：${name}，年龄：${age}`;

// 多行字符串
const multiLine = `
  第一行
  第二行
  第三行
`;

// 表达式计算
const result = `2 + 3 = ${2 + 3}`;  // '2 + 3 = 5'

5.2 字符串新方法

方法	说明	示例
includes()	是否包含某字符串	'hello'.includes('ell') → true
startsWith()	是否以某字符串开头	'hello'.startsWith('he') → true
endsWith()	是否以某字符串结尾	'hello'.endsWith('lo') → true
repeat()	重复字符串	'ha'.repeat(3) → 'hahaha'
padStart()	头部补全	'5'.padStart(3, '0') → '005'
padEnd()	尾部补全	'5'.padEnd(3, '0') → '500'

// 实际应用场景
const phone = '13812345678';
const masked = phone.slice(-4).padStart(phone.length, '*');
console.log(masked);  // '*******5678'

// 版本号补全
const version = '1.2'.padEnd(5, '.0');
console.log(version);  // '1.2.0'

📚 官方文档 ：模板字符串 - MDN

---

六、数组与对象扩展

6.1 数组扩展方法

方法	说明	示例
Array.from()	将类数组转为数组	Array.from('hello') → ['h','e','l','l','o']
Array.of()	创建数组	Array.of(1, 2, 3) → [1, 2, 3]
find()	查找第一个匹配元素	[1, 2, 3].find(x => x > 1) → 2
findIndex()	查找第一个匹配索引	[1, 2, 3].findIndex(x => x > 1) → 1
includes()	是否包含某值	[1, 2, 3].includes(2) → true
flat()	数组扁平化	[1, [2, [3]]].flat(2) → [1, 2, 3]

// find 实战
const users = [
  { id: 1, name: '张三', age: 25 },
  { id: 2, name: '李四', age: 30 }
];

const user = users.find(u => u.id === 2);
console.log(user);  // { id: 2, name: '李四', age: 30 }

// flat 实战
const nested = [1, [2, 3], [4, [5, 6]]];
console.log(nested.flat());      // [1, 2, 3, 4, [5, 6]]
console.log(nested.flat(2));     // [1, 2, 3, 4, 5, 6]

6.2 对象扩展方法

方法	说明	示例
Object.assign()	对象合并	Object.assign({}, obj1, obj2)
Object.keys()	获取所有键	Object.keys({a:1, b:2}) → ['a','b']
Object.values()	获取所有值	Object.values({a:1, b:2}) → [1,2]
Object.entries()	获取键值对	Object.entries({a:1}) → [['a',1]]

// 对象合并
const defaults = { theme: 'light', lang: 'zh' };
const userPrefs = { theme: 'dark' };
const config = Object.assign({}, defaults, userPrefs);
console.log(config);  // { theme: 'dark', lang: 'zh' }

// 对象遍历
const user = { name: '张三', age: 25 };
for (const [key, value] of Object.entries(user)) {
  console.log(`${key}: ${value}`);
}

6.3 展开运算符

展开运算符 ... 用于展开数组或对象。

数组展开：

// 数组合并
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const merged = [...arr1, ...arr2];  // [1, 2, 3, 4, 5, 6]

// 数组拷贝
const original = [1, 2, 3];
const copy = [...original];

// 数组添加元素
const newArr = [...arr1, 4, 5];  // [1, 2, 3, 4, 5]

对象展开：

// 对象合并
const obj1 = { a: 1, b: 2 };
const obj2 = { b: 3, c: 4 };
const merged = { ...obj1, ...obj2 };  // { a: 1, b: 3, c: 4 }

// 对象拷贝
const original = { name: '张三', age: 25 };
const copy = { ...original };

// 对象添加属性
const newUser = { ...user, city: '北京' };

📚 官方文档 ：展开语法 - MDN

---

七、Promise 异步处理

7.1 Promise 基础

Promise 是 ES6 引入的异步编程解决方案，用于解决回调地狱问题。

基础语法：

const promise = new Promise((resolve, reject) => {
  // 异步操作
  setTimeout(() => {
    const success = true;
    if (success) {
      resolve('操作成功');
    } else {
      reject('操作失败');
    }
  }, 1000);
});

promise
  .then(result => console.log(result))
  .catch(error => console.error(error));

Promise 的三种状态：

状态	说明	转换
pending	进行中	初始状态
fulfilled	已成功	resolve() 触发
rejected	已失败	reject() 触发

7.2 Promise 链式调用

// 链式调用
fetchUser()
  .then(user => fetchPosts(user.id))
  .then(posts => fetchComments(posts[0].id))
  .then(comments => console.log(comments))
  .catch(error => console.error(error));

// Promise.all - 所有成功才成功
Promise.all([promise1, promise2, promise3])
  .then(results => console.log(results))
  .catch(error => console.error(error));

// Promise.race - 谁快用谁
Promise.race([promise1, promise2])
  .then(result => console.log(result))
  .catch(error => console.error(error));

7.3 async/await

async/await 是 Promise 的语法糖，让异步代码看起来像同步代码。

基础用法：

// Promise 写法
fetchUser()
  .then(user => fetchPosts(user.id))
  .then(posts => console.log(posts))
  .catch(error => console.error(error));

// async/await 写法
async function getUserPosts() {
  try {
    const user = await fetchUser();
    const posts = await fetchPosts(user.id);
    console.log(posts);
  } catch (error) {
    console.error(error);
  }
}

实战场景：并发请求

// 串行请求（慢）
async function getSerialData() {
  const user = await fetchUser();
  const posts = await fetchPosts(user.id);
  const comments = await fetchComments(posts[0].id);
  return { user, posts, comments };
}

// 并发请求（快）
async function getConcurrentData() {
  const user = await fetchUser();
  const [posts, comments] = await Promise.all([
    fetchPosts(user.id),
    fetchComments(user.id)
  ]);
  return { user, posts, comments };
}

📚 官方文档 ：Promise - MDN | async/await - MDN

---

八、模块化系统

8.1 export 导出

ES6 模块化是前端代码组织的标准方式。

命名导出：

// utils.js
export const PI = 3.14159;

export function add(a, b) {
  return a + b;
}

export class Calculator {
  static multiply(a, b) {
    return a * b;
  }
}

8.2 import 导入

// 导入单个
import { add } from './utils.js';

// 导入多个
import { add, subtract } from './math.js';

// 重命名导入
import { add as sum } from './utils.js';

// 全部导入
import * as MathUtils from './math.js';
console.log(MathUtils.add(1, 2));

// 仅执行模块
import './setup.js';

8.3 默认导出

// 默认导出
// App.js
export default class App {
  constructor() {
    console.log('App initialized');
  }
}

// 导入默认导出（可自定义名称）
import App from './App.js';
import MyAppComponent from './App.js';

// 混合导出
export const VERSION = '1.0.0';
export default App;

// 导入混合
import App, { VERSION } from './App.js';

📚 官方文档 ：import - MDN | export - MDN

---

九、Class 类

9.1 基础语法

ES6 的 class 是 JavaScript 原型继承的语法糖，让面向对象编程更清晰。

基础用法：

class Person {
  // 构造函数
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  // 实例方法
  sayHello() {
    console.log(`Hello, I'm ${this.name}`);
  }

  // getter
  get info() {
    return `${this.name}, ${this.age}岁`;
  }

  // setter
  set age(value) {
    if (value < 0) {
      throw new Error('年龄不能为负数');
    }
    this._age = value;
  }
}

// 使用
const person = new Person('张三', 25);
person.sayHello();  // "Hello, I'm 张三"
console.log(person.info);  // "张三, 25岁"

9.2 继承

class Student extends Person {
  constructor(name, age, grade) {
    super(name, age);  // 调用父类构造函数
    this.grade = grade;
  }

  // 重写父类方法
  sayHello() {
    super.sayHello();
    console.log(`我是${this.grade}年级的学生`);
  }

  // 子类特有方法
  study() {
    console.log(`${this.name}正在学习`);
  }
}

const student = new Student('李四', 18, '高三');
student.sayHello();
student.study();

9.3 静态方法

class MathUtils {
  // 静态方法（直接通过类调用）
  static add(a, b) {
    return a + b;
  }

  static subtract(a, b) {
    return a - b;
  }
}

// 使用
console.log(MathUtils.add(1, 2));  // 3
console.log(MathUtils.subtract(5, 3));  // 2

📚 官方文档 ：Class - MDN

---

十、Set 与 Map

10.1 Set 集合

Set 是 ES6 新增的数据结构，成员值唯一。

基础用法：

// 创建 Set
const set = new Set([1, 2, 3, 3, 4, 4]);
console.log(set);  // Set(4) {1, 2, 3, 4}

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

// 常用方法
set.add(5);           // 添加
set.delete(1);        // 删除
set.has(2);           // 判断是否存在 → true
set.size;             // 获取大小 → 4
set.clear();          // 清空

Set 遍历：

const set = new Set(['a', 'b', 'c']);

// for...of
for (const item of set) {
  console.log(item);
}

// forEach
set.forEach(item => console.log(item));

// 转换为数组
const arr = [...set];
const arr2 = Array.from(set);

10.2 Map 映射

Map 是 ES6 新增的键值对数据结构，键可以是任意类型。

基础用法：

// 创建 Map
const map = new Map();

// 设置键值对
map.set('name', '张三');
map.set('age', 25);
map.set({ id: 1 }, '用户数据');  // 对象作为键

// 获取值
console.log(map.get('name'));  // '张三'

// 常用方法
map.has('name');        // 判断是否存在 → true
map.delete('age');      // 删除
map.size;               // 获取大小 → 2
map.clear();            // 清空

Map 遍历：

const map = new Map([
  ['name', '张三'],
  ['age', 25]
]);

// for...of
for (const [key, value] of map) {
  console.log(`${key}: ${value}`);
}

// forEach
map.forEach((value, key) => {
  console.log(`${key}: ${value}`);
});

Map vs Object 对比：

对比项	Object	Map
键类型	字符串/Symbol	任意类型
键顺序	不保证顺序	插入顺序
大小获取	手动计算	size 属性
遍历	for...in	for...of、forEach
性能	频繁增删较慢	频繁增删较快

📚 官方文档 ：Set - MDN | Map - MDN

---

💡 综合实战案例

用户管理系统

结合 ES6 核心特性，实现完整的用户管理系统。

// 用户管理类
class UserManager {
  #users = new Map();  // 私有属性

  constructor() {
    this.#initializeData();
  }

  #initializeData() {
    const initialUsers = [
      { id: 1, name: '张三', age: 25, role: 'admin' },
      { id: 2, name: '李四', age: 30, role: 'user' },
      { id: 3, name: '王五', age: 28, role: 'user' }
    ];

    initialUsers.forEach(user => {
      this.#users.set(user.id, user);
    });
  }

  // 获取所有用户
  getAllUsers() {
    return [...this.#users.values()];
  }

  // 根据 ID 获取用户
  getUserById(id) {
    return this.#users.get(id) || null;
  }

  // 添加用户
  addUser(userData) {
    const id = Math.max(...this.#users.keys(), 0) + 1;
    const newUser = { id, ...userData };
    this.#users.set(id, newUser);
    return newUser;
  }

  // 删除用户
  deleteUser(id) {
    return this.#users.delete(id);
  }

  // 查找用户（支持条件）
  findUsers({ name, role, minAge, maxAge } = {}) {
    return this.getAllUsers().filter(user => {
      const matchName = !name || user.name.includes(name);
      const matchRole = !role || user.role === role;
      const matchAge = (!minAge || user.age >= minAge) && 
                       (!maxAge || user.age <= maxAge);
      return matchName && matchRole && matchAge;
    });
  }

  // 获取用户统计
  getStats() {
    const users = this.getAllUsers();
    return {
      total: users.length,
      roles: [...new Set(users.map(u => u.role))],
      avgAge: users.reduce((sum, u) => sum + u.age, 0) / users.length
    };
  }
}

// 使用示例
const userManager = new UserManager();

// 获取所有用户
console.log(userManager.getAllUsers());

// 添加用户
const newUser = userManager.addUser({
  name: '赵六',
  age: 35,
  role: 'admin'
});

// 查找用户
const admins = userManager.findUsers({ role: 'admin' });
const youngUsers = userManager.findUsers({ maxAge: 30 });

// 获取统计
const stats = userManager.getStats();
console.log(stats);

---

❓ 常见问题 FAQ

1. let、const 和 var 应该如何选择？

解答：

场景	推荐	说明
常量	const	不会重新赋值的值
变量	let	需要重新赋值的值
避免	var	有变量提升、作用域问题

// 推荐
const API_URL = 'https://api.example.com';
let count = 0;

// 不推荐
var name = '张三';

2. 箭头函数和普通函数有什么区别？

解答：

对比项	普通函数	箭头函数
this 指向	动态绑定	词法绑定（定义时确定）
arguments	✅ 有	❌ 无
new 调用	✅ 可以	❌ 不可以
prototype	✅ 有	❌ 无
语法	冗长	简洁

3. Promise 和 async/await 应该如何选择？

解答：

对比项	Promise	async/await
语法	链式调用	同步风格
错误处理	.catch()	try...catch
并发请求	Promise.all()	await Promise.all()
调试	较难	更容易
兼容性	ES6+	ES2017+

推荐 ：优先使用 async/await，复杂并发场景配合 Promise.all()。

4. Set 和 Map 的使用场景是什么？

解答：

数据结构	使用场景	示例
Set	数组去重、唯一值集合	[...new Set(arr)]
Map	键值对存储、对象键	map.set(obj, value)
Object	简单键值对、JSON	{ name: '张三' }

5. 模块化开发需要注意什么？

解答：

注意事项	说明
避免循环依赖	A 依赖 B，B 依赖 A
按需导入	只导入需要的模块
默认导出	一个模块一个默认导出
命名导出	多个工具函数用命名导出
类型安全	使用 TypeScript 增强类型检查

---

📝 总结

本文系统总结了 ES6 的核心知识点，涵盖：

知识体系

模块	核心内容	重要程度
变量声明	let、const、作用域	⭐⭐⭐⭐⭐
箭头函数	语法、this 指向、使用场景	⭐⭐⭐⭐⭐
解构赋值	数组解构、对象解构	⭐⭐⭐⭐⭐
模板字符串	变量插值、多行字符串	⭐⭐⭐⭐
数组对象扩展	新方法、展开运算符	⭐⭐⭐⭐⭐
Promise	异步处理、链式调用	⭐⭐⭐⭐⭐
async/await	异步编程语法糖	⭐⭐⭐⭐⭐
模块化	export、import	⭐⭐⭐⭐⭐
Class 类	类、继承、静态方法	⭐⭐⭐⭐
Set/Map	数据结构	⭐⭐⭐⭐

学习建议

1. 优先掌握 ：let/const、箭头函数、解构赋值、模板字符串、Promise
2. 重点练习：异步编程、模块化开发、数组对象操作
3. 实战应用：结合 Vue/React 项目练习 ES6 特性
4. 扩展学习 ：建议学习 ES7+ 新特性（Object.values、async 等）

ES6 特性使用频率排行

特性	使用频率	推荐指数
let/const	⭐⭐⭐⭐⭐	必学
箭头函数	⭐⭐⭐⭐⭐	必学
解构赋值	⭐⭐⭐⭐⭐	必学
模板字符串	⭐⭐⭐⭐⭐	必学
Promise/async	⭐⭐⭐⭐⭐	必学
展开运算符	⭐⭐⭐⭐⭐	必学
模块化	⭐⭐⭐⭐⭐	必学
Class	⭐⭐⭐⭐	高频
Set/Map	⭐⭐⭐⭐	高频
数组新方法	⭐⭐⭐⭐	高频

---

📚 参考资料

官方文档

• ECMAScript 2015 规范
• let 声明 - MDN
• const 声明 - MDN
• 箭头函数 - MDN
• 解构赋值 - MDN
• 模板字符串 - MDN
• Promise - MDN
• async/await - MDN
• import - MDN
• Class - MDN
• Set - MDN
• Map - MDN

实用工具

• Can I Use - ES6 兼容性查询
• Babel - JavaScript 编译器
• TypeScript - JavaScript 超集