基础使用

let 块级作用域，也就是在同一个作用域内，不能够重复声明同一个变量。

ES6

let name = 'xiaoming'

ES5

var name = 'xiaoming'

const

在 let 的基础上，声明的变量不能够被重新赋值。

ES6

const name = 'xiaoming'

ES5

var name = 'xiaoming'

解构赋值

简化对象获取属性、简化数组获取元素的写法。

ES6

// 解构数组
const [a, b, c] = [1, 2, 3]

// 解构对象
const { name, age } = { name: 'xiaoming', age: 18 }

ES5

// 解构数组
var arr = [1, 2, 3]
var a = arr[0]
var b = arr[1]
var c = arr[2]

// 解构对象
var obj = { name: 'xiaoming', age: 18 }
var name = obj.name
var age = obj.age

扩展运算符

把对象的属性、数组的元素拆散成单个。

ES6

// 数组扩展
const arr = [1, 2, 3]
const arr2 = [...arr]

// 对象扩展
const obj = { name: 'xiaoming', age: 18 }
const obj2 = { ...obj }

ES5

// 数组扩展
var arr = [1, 2, 3]
var arr2 = [arr[0], arr[1], arr[2]]

// 对象扩展
var obj = { name: 'xiaoming', age: 18 }
var obj2 = { name: obj.name, age: obj.age }

模板字符串

简化字符串拼接 + 写法。

ES6

const name = 'xiaoming'
const age = 18
const res = `i am ${name}, age is ${age}`

ES5

var name = 'xiaoming'
var age = 18
var res = 'i am ' + name + ', age is ' + age

箭头函数

注意，箭头函数中没有 this

ES6

// 创建函数
const fn = () => {}

// 函数接收参数并返回值
const fn = (num1) => {
    return num1
}

// 函数接收参数并返回值（简写）
const fn = (num1) => num1

// 函数运算
const fn = (num1, num2) => num1 + num2

ES5

// 创建函数
function fn() {}

// 函数接收参数并返回值
function fn(num1) {
    return num1
}

// 函数运算
function fn(num1, num2) {
    return num1 + num2
}

for...of

循环语句（只能遍历数组），与 for...in 类似， for...in 是返回 key ，而 for...of 是返回 value 。

for (const value of arr) {
    console.log(value)
}

Promise

异步函数，延迟返回函数结果。

const score = 80

const p1 = new Promise((resolve, reject) => {
    if (score > 60) {
        resolve('考试通过了')
    } else {
        reject('考试不通过')
    }
})

// 成功
p1.then((res) => {
    console.log(res) // 考试通过了
})

// 失败
p1.then((res) => {
    console.log(res) // 考试不通过
})

Async、Await

异步函数，暂时可以理解为是 Promise 的语法糖（但实际不是），语法糖就理解是简化代码的意思。主要是让异步的代码写起来更像同步代码。

async function fn() {
    const res = await p1
}

Class

简化使用 function 实现类（构造函数）的写法。

class Person {
    constructor() {}
    myName() {}
}

ESM 模块化（import、export）

导出（a.js）。

const name = 'xiaoming'

export { name }

导入（b.js）。

import { name } from './a.js'

Map

数据结构字典，是一种无序且唯一的数据结构。

const map = new Map()

map.set('name', 'xiaoming')

Set

数据结构集合，是一种无序且唯一的数据结构。

const set = new Set()

set.add(1)