文章目录
ES6新特性：JavaScript的"进化装备箱"🎁
引言：为什么需要ES6？
想象你是一位工匠，以前你只有锤子、锯子等基本工具(ES5)，虽然能完成工作，但效率不高。ES6就像给你送来了一整套电动工具：
- 更高效：用更少的代码做更多的事
- 更强大：解决以前难以处理的问题
- 更清晰：代码更易读易维护
ES6(ECMAScript 2015)是JavaScript语言的重大更新，带来了20+项新特性，彻底改变了JavaScript的编程方式。
ES6核心特性全景图
特性分类表
| 类别 | 主要特性 | 解决的问题 |
|---|---|---|
| 变量声明 | let/const | 变量提升、作用域问题 |
| 函数增强 | 箭头函数、参数默认值 | this指向、参数处理 |
| 数据处理 | 解构赋值、扩展运算符 | 数据提取与合并 |
| 代码组织 | 模块化(import/export) | 文件依赖管理 |
| 面向对象 | Class、继承 | 更好的OOP支持 |
| 异步编程 | Promise、async/await | 回调地狱问题 |
| 数据结构 | Set、Map、Symbol | 更丰富的数据结构 |
一、变量声明：let与const
对比表：var vs let/const
| 特性 | var | let | const |
|---|---|---|---|
| 作用域 | 函数级 | 块级 | 块级 |
| 变量提升 | 是 | 否(暂时性死区) | 否 |
| 重复声明 | 允许 | 不允许 | 不允许 |
| 值可变 | 是 | 是 | 否(基本类型) |
代码示例
// ES5的var问题演示
function varProblem() {
console.log(i); // 输出undefined，变量提升但未赋值
for (var i = 0; i < 3; i++) {
setTimeout(function() {
console.log(i); // 全部输出3，共享同一个i
}, 100);
}
}
// ES6的解决方案
function letSolution() {
// console.log(j); // 报错，暂时性死区
for (let j = 0; j < 3; j++) {
setTimeout(function() {
console.log(j); // 输出0,1,2，每个j独立
}, 100);
}
const PI = 3.1415;
// PI = 3; // 报错，常量不可重新赋值
const user = {
name: 'Alice' };
user.name = 'Bob'; // 允许，const只限制绑定不可变
}
二、箭头函数：=>的魅力
与传统函数对比
| 特性 | 传统函数 | 箭头函数 |
|---|---|---|
| this指向 | 调用时决定 | 定义时决定(词法作用域) |
| arguments | 有 | 无 |
| 构造函数 | 可以 | 不可以 |
| 简洁性 | 一般 | 更简洁 |
代码示例
// ES5函数
var add = function(a, b) {
return a + b;
};
// ES6箭头函数基础
const add = (a, b) => a + b;
// 上下文保持的典型场景
const team = {
members: ['Alice', 'Bob'],
teamName: 'Super Squad',
// ES5需要额外保存this
es5Method: function() {
var self = this;
return this.members.map(function(member) {
return member + ' is in ' + self.teamName;
});
},
// ES6直接使用箭头函数
es6Method: function() {
return this.members.map(member =>
`${
member} is in ${
this.teamName}`
);
}
};
// 注意事项
const badConstruct = () => ({
});
// new badConstruct(); // 报错，箭头函数不能作为构造函数
三、解构赋值：数据拆箱艺术
解构类型表
| 解构类型 | 示例 | 用途 |
|---|---|---|
| 数组解构 | const [a, b] = [1, 2] |
提取数组值 |
| 对象解构 | const {name, age} = user |
提取对象属性 |
| 嵌套解构 | const {a: {b}} = obj |
提取嵌套属性 |
| 默认值 | const {name='Anon'} = obj |
防止undefined |
| 参数解构 | function f({name}) {...} |
提取函数参数 |
代码示例
// 1. 数组解构
const rgb = [255, 128, 64];
const [red, green, blue] = rgb;
console.log(red); // 255
// 跳过某些元素
const [first, , third] = ['a', 'b', 'c'];
// 剩余运算符
const [head, ...tail] = [1, 2, 3, 4];
console.log(tail)转载自CSDN-专业IT技术社区
原文链接：https://blog.csdn.net/x15514104477/article/details/151071044
