摘要 ：ECMAScript 6（简称 ES6）是 JavaScript 语言的下一代标准，于 2015 年正式发布，彻底改变了 JavaScript 的编写方式，大幅提升了代码的简洁性、可读性和可维护性。本文将系统梳理 ES6 20 大核心新特性，包含语法示例 + 使用场景，从基础到进阶全覆盖，无论是日常开发还是前端面试，这篇文章都能直接拿来用！
一、ES6 功能概述
ES6（ECMAScript 2015）是 JavaScript 历史上最重要、改动最大的版本，新增了变量声明、解构赋值、箭头函数、Promise、类、模块化等核心功能，解决了 ES5 的诸多缺陷，让 JavaScript 真正具备了开发大型企业级应用的能力。
目前所有现代浏览器均已支持 ES6，是前端工程师必须掌握的核心基础。
二、ES6 20 大核心新特性详解
1. let 关键字：块级作用域局部变量
let 用于声明块级作用域变量 ，只在当前{}内有效，解决了 var 变量提升、全局污染问题。
核心特性：
- 不允许重复声明
- 不存在变量提升
- 拥有块级作用域
- 不会挂载到 window 对象
javascript
运行
// 块级作用域示例
if (true) {
let a = 10;
console.log(a); // 10
}
console.log(a); // 报错：a is not defined2. const 关键字：常量声明
const 用于声明只读常量，一旦声明必须赋值，且值不能修改（引用类型可修改内部属性）。
核心特性：
- 声明必须赋值
- 不能重新赋值
- 块级作用域
- 引用类型（对象 / 数组）可修改内部数据
javascript
运行
const PI = 3.14159;
// PI = 3.15; // 报错
const obj = { name: "ES6" };
obj.name = "ES6+"; // 允许修改内部属性3. 变量与对象解构赋值
ES6 允许按照一定模式，从数组 / 对象中提取值，对变量进行赋值，大幅简化变量声明代码。
javascript
运行
// 数组解构
const [a, b, c] = [1, 2, 3];
// 对象解构（最常用）
const person = { name: "张三", age: 20 };
const { name, age } = person;
console.log(name); // 张三4. 模板字符串：自带格式的字符串
使用反引号 ````` 声明字符串，支持换行、变量直接嵌入、表达式运算，告别繁琐的字符串拼接。
javascript
运行
const name = "ES6";
const str = `我是${name}
支持多行文本
1+1=${1+1}`;5. 简化对象与函数写法
- 对象简写：属性名与变量名一致可省略值
- 方法简写：去掉
:function
javascript
运行
const name = "张三";
// 简化前
const obj1 = { name: name, say: function(){} }
// 简化后
const obj2 = { name, say(){} }6. 箭头函数：最常用的函数简化语法
() => {} 是函数的简写形式，语法更简洁，且绑定外层 this，不绑定自己的 this、arguments、super。
javascript
运行
// 普通函数
function sum(a, b) { return a + b; }
// 箭头函数
const sum = (a, b) => a + b;注意：不能用作构造函数、没有 arguments、this 指向外层作用域。
7. 函数参数默认值
直接给函数参数设置默认值，不传参 / 传 undefined 时使用默认值，代码更健壮。
javascript
运行
function log(name = "游客") {
console.log(`欢迎：${name}`);
}
log(); // 欢迎：游客8. rest 参数：获取所有实参
...变量名 用于获取函数的所有剩余实参，替代 arguments，返回真数组。
javascript
运行
function fn(...args) {
console.log(args); // [1,2,3]
}
fn(1,2,3);9. 扩展运算符：数组 / 对象展开
... 将数组 / 对象转为逗号分隔的参数序列，常用于数组拷贝、合并、解构。
javascript
运行
// 数组合并
const arr1 = [1,2];
const arr2 = [3,4];
const newArr = [...arr1, ...arr2]; // [1,2,3,4]10. Symbol：独一无二的值
ES6 引入的原始数据类型，表示独一无二、不可修改的值，用于解决对象属性名冲突问题。
javascript
运行
let s = Symbol("唯一标识");
let obj = { [s]: "ES6" };11. Promise：异步编程终极解决方案
Promise 是 ES6 提供的异步处理对象，解决回调地狱问题，支持链式调用。
javascript
运行
const p = new Promise((resolve, reject) => {
setTimeout(() => resolve("成功"), 1000);
});
p.then(res => console.log(res));12. Set 集合：无重复元素的集合
类似数组，成员唯一不重复，常用于数组去重。
javascript
运行
const s = new Set([1,2,2,3]);
console.log(s); // Set(3) {1,2,3}
// 数组去重
const arr = [...new Set([1,2,2,3])];13. Map 集合：键值对集合
类似对象，但键可以是任意类型（对象 / 函数 / 基本类型），遍历有序。
javascript
运行
const map = new Map();
map.set("name", "ES6");
console.log(map.get("name")); // ES614. class 类：面向对象语法糖
ES6 使用class关键字声明类，语法更接近 Java 等面向对象语言，支持 constructor、extends 继承。
javascript
运行
class Person {
constructor(name) { this.name = name; }
say() { console.log(this.name); }
}
const p = new Person("张三");15. 数值扩展
新增Number.isFinite()、Number.isNaN()、Math.trunc()等方法，完善数值判断与计算。
javascript
运行
Number.isNaN(NaN); // true
Math.trunc(3.9); // 316. 对象扩展
新增Object.assign()、Object.keys()、Object.values()等方法，简化对象操作。
javascript
运行
// 对象合并
const obj1 = {a:1};
const obj2 = {b:2};
const obj = Object.assign({}, obj1, obj2);17. 模块化：代码拆分与复用
ES6 原生支持模块化，使用export导出、import导入，实现代码解耦。
javascript
运行
// 导出
export const name = "ES6";
// 导入
import { name } from "./test.js";18. Babel 转换 ES6 模块化
浏览器对 ES6 模块化支持有限，使用Babel将 ES6 代码转为 ES5，兼容所有浏览器。
19. ES6 模块化引入 NPM 包
像导入自定义模块一样，直接引入 npm 安装的第三方包。
javascript
运行
import $ from "jquery";
import axios from "axios";20. Proxy：对象代理
创建对象代理，拦截对象的读取、赋值、删除等操作，实现数据监听（Vue3 响应式核心）。
javascript
运行
const proxy = new Proxy({}, {
get(target, prop) { return target[prop]; },
set(target, prop, value) { target[prop] = value; }
});三、总结
ES6 20 大核心特性覆盖了变量声明、代码简化、异步编程、数据结构、面向对象、工程化全场景：
- 基础语法：let/const、解构、模板字符串、箭头函数
- 函数增强：默认值、rest 参数、扩展运算符
- 数据类型：Symbol、Set、Map
- 异步与代理：Promise、Proxy
- 工程化：class、模块化、Babel 转换
掌握 ES6 是前端开发的入门门槛，也是面试高频考点，建议结合示例多练习，熟练运用到实际项目中！
本文已同步收录前端面试手册，建议收藏 + 点赞，持续更新 ES6 + 高级特性！