聊一聊es6的内容

研☆香

347人浏览 · 2026-05-14 08:12:20

研☆香 · 2026-05-14 08:12:20 发布

【保姆级教程】ES6全套核心知识点详解（通俗易懂+实战代码，面试必背）

📖 文章前言

ECMAScript 6（简称ES6，也叫ES2015）是JavaScript发展史上最重要的一次版本更新。本次更新彻底重构了JS的语法体系，解决了ES5时代变量污染、this指向混乱、异步代码臃肿、没有原生模块化等痛点。

目前主流前端框架Vue、React、uniapp全部基于ES6语法开发，同时ES6也是前端面试的高频考点。本文整理ES6高频必用、面试必考核心特性，搭配通俗易懂讲解+可直接运行的实战代码，零基础也能看懂，建议收藏反复学习。

适用人群：前端初学者、面试刷题人员、想要夯实JS基础的开发者

文章特点：无废话干货、代码极简易懂、标注易错点、附带使用场景

一、变量声明：let & const（告别var乱象）

1.1 痛点分析（ES5 var缺陷）

没有块级作用域：for循环、if语句内声明的变量可以穿透作用域

变量提升：变量声明前可访问，值为undefined，代码逻辑混乱

允许重复声明：同一作用域可重复定义同名变量，污染全局变量

1.2 let / const 核心特性

关键字	作用域	是否可修改	是否变量提升	重复声明
var	函数/全局作用域	可修改	是	允许
let	块级作用域	可修改	否（暂时性死区）	不允许
const	块级作用域	不可修改（常量）	否（暂时性死区）	不允许

1.3 代码实战

javascript
// 1. 块级作用域验证
if(true){
let a = 10;
const b = 20;
var c = 30;
}
console.log(c); // 30（var穿透块级作用域）
console.log(a); // 报错：a未定义
console.log(b); // 报错：b未定义

// 2. const注意点：引用类型可修改内部属性
const obj = {name:"张三"};
obj.name = "李四"; // 正常修改
console.log(obj); // {name: '李四'}
obj = {}; // 报错：常量不可修改引用地址

1.4 开发规范（面试必问）

✅ 优先使用 const，其次使用 let，禁止使用var；常量、固定数据全部用const，动态变化数据用let。

二、解构赋值：优雅提取数据

解构赋值是ES6简化数据提取的语法，无需遍历、无需点语法，一行代码快速提取数组、对象中的数据，是项目开发高频用法。

2.1 数组解构

javascript
// 基础解构
let [a,b,c] = [1,2,3];
// 解构默认值
let [x,y=10] = [5];
console.log(y); // 10
// 剩余运算符解构
let [m,...n] = [1,2,3,4];
console.log(n); // [2,3,4]

2.2 对象解构（工作最常用）

javascript
// 原生写法
const user = {name:"小明",age:20};
let name = user.name;
let age = user.age;

// ES6解构写法
const {name,age,gender="男"} = user;
// 重命名解构
const {name:username} = user;
console.log(username); // 小明

2.3 应用场景

接口返回数据快速提取

函数参数解构传参

数组、对象快速赋值，简化代码

三、字符串增强：模板字符串

3.1 ES5字符串痛点

拼接繁琐、换行复杂、嵌套引号容易报错、可读性极差。

3.2 模板字符串 ``（反引号）

javascript
const name = "前端开发者";
// 变量插值 ${变量}
const str = `我是${name}，专注ES6学习`;
// 支持直接换行
const html = `
<div>
<p>多行文本无需拼接</p>
</div>
`;

3.3 新增字符串方法

includes()：判断是否包含字符，返回布尔值

startsWith()：判断是否以指定字符开头

endsWith()：判断是否以指定字符结尾

repeat(n)：字符串重复n次

四、函数优化：箭头函数

箭头函数是ES6最标志性语法之一，简化匿名函数写法，彻底解决this指向难题。

4.1 基础语法

javascript
// 普通函数
function sum(a,b){return a+b}
// 箭头函数完整版
const sum = (a,b) => {return a+b};
// 精简写法：单行返回可省略{}和return
const sum = (a,b) => a+b;
// 单个参数可省略括号
const fn = x => x*2;

4.2 核心特性（面试高频）

没有自身this：箭头函数this指向外层作用域this（词法this）

不能作为构造函数，不能使用new

没有arguments对象，可用剩余运算符替代

不可使用yield，不能作为生成器函数

4.3 易错对比代码

javascript
var num = 10;
const obj = {
num:20,
// 普通函数：this指向调用者obj
fn1:function(){console.log(this.num)},
// 箭头函数：this指向外层window
fn2:()=>{console.log(this.num)}
}
obj.fn1(); // 20
obj.fn2(); // 10

五、拓展运算符 & 剩余运算符 ...

统一使用三个点...，用法不同，用途广泛，常用于数组、对象拷贝、合并。

5.1 拓展运算符（展开数据）

javascript
// 数组展开
const arr1 = [1,2,3];
const arr2 = [...arr1,4,5]; // [1,2,3,4,5]
// 对象合并（后端配置、表单常用）
const defaultObj = {type:1,status:0};
const userObj = {name:"张三",...defaultObj};

5.2 剩余运算符（收拢数据）

javascript
// 函数剩余参数
function fn(a,...rest){
console.log(rest); // [2,3,4]
}
fn(1,2,3,4);

六、数据结构：Set & Map

6.1 Set（无序、不可重复集合）

核心作用：数组去重，存储唯一数据。

javascript
const arr = [1,2,2,3,3,4];
// 一行去重
const newArr = [...new Set(arr)];
console.log(newArr); // [1,2,3,4]

6.2 Map（键值对集合）

对比Object：Map的键可以是任意类型（字符串、数字、对象），遍历更方便，适合存储复杂数据。

七、Class类：面向对象编程

ES6引入class语法，本质是构造函数的语法糖，简化原型继承写法，贴合后端编程语言逻辑，Vue组件、类组件均基于class思想。

7.1 基础语法

javascript
class Person{
// 构造函数：初始化属性
constructor(name,age){
    this.name = name;
    this.age = age;
}
// 实例方法
sayHello(){
    console.log(`我是${this.name}`);
}
}
const p = new Person("李四",22);
p.sayHello();

7.2 继承 extends

javascript
class Student extends Person{
constructor(name,age,score){
super(name,age); // 调用父类构造方法
this.score = score;
}
}

八、模块化：import / export

ES6实现原生模块化，告别CommonJS、AMD第三方模块方案，是前端工程化的核心基础。

8.1 导出方式

javascript
// 1. 按需导出
export const PI = 3.1415;
export function add(a,b){return a+b}
// 2. 默认导出（一个文件只能一个）
export default function multiply(a,b){return a*b}

8.2 导入方式

javascript
// 按需导入
import {PI,add} from "./math.js";
// 导入默认导出
import multiply from "./math.js";
// 全部导入
import * as math from "./math.js";

九、异步编程：Promise

ES6新增Promise，彻底解决回调地狱问题，优雅处理异步请求（接口请求、定时器、文件读取），是async/await的底层基础。

9.1 三种状态

pending：进行中

fulfilled：成功（resolve）

rejected：失败（reject）

9.2 基础代码

javascript
new Promise((resolve,reject)=>{
// 模拟异步请求
setTimeout(()=>{
    let flag = true;
    if(flag) resolve("请求成功");
    else reject("请求失败");
},1000)
}).then(res=>{
console.log(res); // 成功回调
}).catch(err=>{
console.log(err); // 失败回调
})