ES6 新特性从入门到精通：100 + 代码示例带你轻松掌握（附图解教程）

本文针对 JavaScript 新手系统讲解 ES6 核心语法，涵盖变量声明、箭头函数、解构赋值、类与继承、Promise 等核心模块。通过150 + 行带注释代码，结合「传统写法对比」和「新手避坑指南」，帮助读者 3 小时掌握 ES6 关键特性，快速应用于项目开发。

一、ES6 入门：为什么必须学习 ES6？

1.1 ES6 的革命性升级

• 代码简洁性：箭头函数、模板字符串等语法减少冗余代码
• 逻辑清晰性：class 类、模块化语法让代码结构更易维护
• 性能优化：Promise 解决异步回调地狱，提升代码执行效率

1.2 浏览器兼容性与开发工具

• 主流支持：Chrome、Firefox 等现代浏览器支持 95% 以上 ES6 特性
• 兼容旧浏览器：通过 Babel 工具将 ES6 代码转译为 ES5
• 推荐工具：VS Code（ES6 语法高亮）、Babel（代码转换）

二、ES6 核心语法详解

2.1 变量声明：let 与 const（取代 var 的最佳实践）

传统 var 的痛点

// var的变量提升与重复声明问题  
console.log(num); // 输出undefined（变量提升）  
var num = 10;  

if (true) {  
  var name = '小明'; // 全局作用域  
}  
console.log(name); // 输出'小明'  

ES6 解决方案：let/const

特性	作用	示例代码	内存管理
let	块级作用域变量	let age = 18;	可重新赋值
const	块级作用域常量	const PI = 3.14;	不可重新赋值

// let的块级作用域示例  
if (true) {  
  let msg = 'Hello ES6';  
}  
console.log(msg); // 报错：msg未定义  

示意图：let 与 var 作用域对比

2.2 箭头函数：更简洁的函数写法

传统函数的缺陷

// 传统函数的this指向问题  
const obj = {  
  name: '张三',  
  sayHi: function() {  
    setTimeout(function() {  
      console.log(this.name); // 输出undefined（this指向window）  
    }, 1000);  
  }  
};  

ES6 箭头函数

// 箭头函数自动绑定外层this  
const obj = {  
  name: '张三',  
  sayHi: () => {  
    setTimeout(() => {  
      console.log(this.name); // 输出'张三'（this指向obj）  
    }, 1000);  
  }  
};  

语法糖对比表

场景	传统函数写法	箭头函数写法
简单函数	function(a,b){ return a+b; }	(a,b) => a+b
单参数函数	function(a){ return a*2; }	a => a*2
无参数函数	function(){ return 'hi'; }	() => 'hi'

2.3 解构赋值：快速提取数据

数组解构：按位置提取值

// 传统写法：手动赋值  
const arr = [1, 2, 3];  
const first = arr[0];  
const second = arr[1];  

// ES6解构写法  
const [first, second] = arr; // first=1, second=2  

对象解构：按属性名提取值

const user = { id: 1, name: '李四' };  
const { id, name } = user; // id=1, name='李四'  

实战案例：解构函数参数

// 传统写法：对象属性访问  
function renderUser(user) {  
  console.log(user.name, user.age);  
}  

// ES6解构写法  
function renderUser({ name, age }) {  
  console.log(name, age); // 直接获取属性  
}  
renderUser({ name: '王五', age: 25 }); // 输出：王五 25  

2.4 模板字符串：动态拼接字符串神器

传统字符串拼接痛点

const name = '张三';  
const age = 18;  
console.log('姓名：' + name + '，年龄：' + age); // 繁琐易错  

ES6 模板字符串

console.log(`姓名：${name}，年龄：${age}`); // 输出：姓名：张三，年龄：18  

高级用法：多行字符串与表达式

const html = `
  
  
${title}
  
  
内容：${content}
  
`;  

2.5 类与继承：面向对象编程简化

传统构造函数写法

// 构造函数  
function Animal(name) {  
  this.name = name;  
}  
Animal.prototype.speak = function() {  
  console.log(`${this.name}叫`);  
};  

// 继承  
function Dog(name) {  
  Animal.call(this, name);  
}  
Dog.prototype = Object.create(Animal.prototype);  

ES6 class 语法

// 定义类  
class Animal {  
  constructor(name) {  
    this.name = name;  
  }  
  speak() {  
    console.log(`${this.name}叫`);  
  }  
}  

// 继承  
class Dog extends Animal {  
  speak() {  
    super.speak(); // 调用父类方法  
    console.log('汪汪汪');  
  }  
}  

2.6 Promise 与异步编程：告别回调地狱

传统回调地狱案例

// 多层嵌套的回调函数  
getData((data1) => {  
  processData(data1, (data2) => {  
    saveData(data2, (result) => {  
      console.log(result);  
    });  
  });  
});  

ES6 Promise 链式调用

getData()  
  .then(processData)  
  .then(saveData)  
  .then((result) => console.log(result))  
  .catch((error) => console.error(error));  

三、实战案例：用 ES6 重构传统代码

案例 1：数组过滤与映射

需求：从用户列表中筛选年龄 > 18 岁的用户，并返回姓名数组

传统写法

const users = [{ id: 1, name: '张三', age: 20 }, { id: 2, name: '李四', age: 17 }];  
const filtered = users.filter(function(user) {  
  return user.age > 18;  
});  
const names = filtered.map(function(user) {  
  return user.name;  
});  

ES6 写法

const names = users  
  .filter(user => user.age > 18)  
  .map(user => user.name);  

案例 2：对象属性合并

需求：合并两个用户对象，后者覆盖前者属性

传统写法

const user1 = { name: '张三', age: 18 };  
const user2 = { age: 20, gender: '男' };  
const merged = Object.assign({}, user1, user2); // { name: '张三', age: 20, gender: '男' }  

ES6 扩展运算符

const merged = { ...user1, ...user2 }; // 等价于Object.assign  

四、新手常见错误与避坑指南

4.1 变量作用域错误

错误代码：

for (var i = 0; i < 5; i++) {  
  // ...  
}  
console.log(i); // 输出5（var的全局作用域）  

正确写法：

for (let i = 0; i < 5; i++) {  
  // ...  
}  
console.log(i); // 报错（let的块级作用域）  

4.2 箭头函数滥用

错误场景：需要动态绑定 this 的构造函数中使用箭头函数

class Counter {  
  constructor() {  
    this.count = 0;  
    this.timer = setInterval(() => {  
      this.count++; // 正确：箭头函数继承外层this  
    }, 1000);  
  }  
}  

注意：箭头函数适合回调函数，不适合作为构造函数或需要动态 this 的场景

五、ES6 速查表：核心语法一图掌握

特性	传统语法	ES6 语法	适用场景
变量声明	var x = 1;	let x = 1; const y = 2;	块级作用域变量 / 常量
函数定义	function add() {}	(a,b) => a+b	简单函数、回调函数
字符串拼接	'a' + 'b'	`a${b}`	动态字符串、多行文本
数组解构	var a = arr[0];	const [a, b] = arr;	快速提取数组元素
对象继承	原型链继承	class Child extends Parent	面向对象编程
异步操作	回调函数嵌套	Promise.then()	网络请求、定时任务