网站
引入
ES6(ECMAScript 2015)是 JavaScript 最重要的一次版本更新。它引入了大量新语法,让代码写起来更简洁、更安全、更接近现代编程语言的写法。
之前很多写法需要靠约定和技巧来避免出错,ES6 从语言层面给出了更好的方案。
正文
定义
ES6 是 ECMAScript 第 6 版标准,新增了
let、const、箭头函数、模板字符串、解构赋值、模块等一系列语法特性。
let 和 const
let 声明可变的变量,const 声明不可变的常量,都有块级作用域。
let count = 0;
count = 1;
const name = "Tom";
name = "Jack";相比 var,let 不会变量提升,也不会跨块级泄漏。
if (true) {
let x = 10;
}
console.log(x);箭头函数
箭头函数用 => 定义,写法更短,而且不绑定自己的 this。
const add = (a, b) => a + b;
const greet = () => {
console.log("你好");
};模板字符串
用反引号包裹字符串,可以直接嵌入变量和换行。
const name = "Tom";
const age = 18;
const msg = `我叫${name},今年${age}岁`;
const html = `
<div>
<p>${name}</p>
</div>
`;解构赋值
从数组或对象中直接取出值赋给变量。
const [a, b, c] = [1, 2, 3];
const { name, age } = user;详细学习见 JS 解构赋值。
展开语法
用 … 把数组或对象拆开,用在合并、传参等场景。
const arr = [...arr1, ...arr2];
const obj = { ...obj1, ...obj2 };详细学习见 JS 展开语法。
默认参数
给函数参数设置默认值,不传参时自动使用。
function greet(name = "访客") {
console.log(`你好,${name}`);
}
greet();
greet("Tom");类(Class)
class 提供了一种更清晰的方式来创建对象和处理继承。
class Person {
constructor(name) {
this.name = name;
}
sayHello() {
console.log(`你好,我是${this.name}`);
}
}详细学习见 JS 类。
模块(Module)
用 import 和 export 拆分代码文件,避免全局污染。
export function add(a, b) {
return a + b;
}
import { add } from "./math.js";详细学习见 JS 模块化。
Promise
Promise 用来处理异步操作,避免回调地狱。
const p = new Promise((resolve, reject) => {
setTimeout(() => {
resolve("完成");
}, 1000);
});
p.then(result => {
console.log(result);
});Symbol、Map、Set
Symbol 生成唯一标识符,Map 是键值对集合,Set 是不重复值的集合。
const id = Symbol("id");
const map = new Map();
map.set("name", "Tom");
const set = new Set([1, 2, 2, 3]);
console.log(set);特性总览
| 特性 | 说明 | 对应笔记 |
|---|---|---|
let / const | 块级作用域变量 | JS 变量、JS 常量 |
| 箭头函数 | 更短的函数写法 | JS 箭头函数 |
| 模板字符串 | 反引号字符串,嵌入变量 | JS 字符串 |
| 解构赋值 | 从数组/对象中提取值 | JS 解构赋值 |
| 展开语法 | 用 … 拆开数组或对象 | JS 展开语法 |
| 默认参数 | 函数参数默认值 | JS 函数 |
| 类 | 创建对象的新语法 | JS 类 |
| 模块 | import / export | JS 模块化 |
| Promise | 异步操作处理 | JS Promise |
| Symbol | 唯一标识符 | |
| Map | 键值对集合 | |
| Set | 不重复值的集合 |
理解
可以把 ES6 理解为 JavaScript 的一次大升级包。
之前的 JavaScript 像一套基础工具箱,能用但不够顺手。ES6 给这套工具箱换了一批更好用的工具:变量声明更安全了,函数写法更短了,字符串拼接更直观了,代码组织更清晰了。
不需要一次性全部掌握,先把 let、const、箭头函数、模板字符串用起来,其他的按需学习就行。
引出
ES6 里的解构赋值、展开语法、箭头函数、类和模块化都是独立的大知识点,可以逐个深入学习: