网站

ES6 核心新特性 | MDN

ES6 入门教程 | 阮一峰

引入

ES6(ECMAScript 2015)是 JavaScript 最重要的一次版本更新。它引入了大量新语法,让代码写起来更简洁、更安全、更接近现代编程语言的写法。

之前很多写法需要靠约定和技巧来避免出错,ES6 从语言层面给出了更好的方案。

正文

定义

ES6 是 ECMAScript 第 6 版标准,新增了 letconst、箭头函数、模板字符串、解构赋值、模块等一系列语法特性。

letconst

let 声明可变的变量,const 声明不可变的常量,都有块级作用域

let count = 0;
count = 1;
 
const name = "Tom";
name = "Jack";

相比 varlet 不会变量提升,也不会跨块级泄漏。

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)

importexport 拆分代码文件,避免全局污染。

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 / exportJS 模块化
Promise异步操作处理JS Promise
Symbol唯一标识符
Map键值对集合
Set不重复值的集合

理解

可以把 ES6 理解为 JavaScript 的一次大升级包

之前的 JavaScript 像一套基础工具箱,能用但不够顺手。ES6 给这套工具箱换了一批更好用的工具:变量声明更安全了,函数写法更短了,字符串拼接更直观了,代码组织更清晰了。

不需要一次性全部掌握,先把 letconst、箭头函数、模板字符串用起来,其他的按需学习就行。

引出

ES6 里的解构赋值、展开语法、箭头函数、类和模块化都是独立的大知识点,可以逐个深入学习: