ES6语法和功能概述

ECMAScript 2015, 也称 ES6, 在JavaScript中引入了很多改动. 以下是与ES5相比一些常见的功能和语法的差异。

注意: 普遍被接受的最佳实践是尽量使用const关键词，在循环和需要重新赋值的场景下使用let，下面文章所有ES6的例子中我将用let替换var。

目录

• 变量声明
• 常量声明
• 箭头函数语法
• 模板字符串
• 隐式返回
• 键/值简写
• 方法定义简写
• 解构 (对相匹配)
• 数组迭代 (循环)
• 默认参数
• 展开语法
• 类/构造 函数
• 继承
• 模板- 导出/导入
• 承诺/回调

变量和常量的特征比较

下面表格提供简要概述。

关键词	作用域	提升	可以被重新赋值	可以被重新声明
var	函数作用域	Yes	Yes	Yes
let	块作用域	No	Yes	No
const	块作用域	No	No	No

变量声明

ES6引入了let关键字，该关键字声明了无法提升或重新声明的块范围变量。

ES5

var x = 0

ES6

let x = 0

• MDN Reference: let

常量声明

ES6引入了const关键词，它不可以被重新声明和重新赋值，但是它不是不变的。

ES6

const CONST_IDENTIFIER = 0 // constants are uppercase by convention

• MDN Reference: const

箭头函数

箭头函数表达式语法是创建函数表达式的简洁方法。箭头函数没有自己函数的this，没有原型，不能用于构造函数，也不应该被用于对象方法。

ES5

function func(a, b, c) {} // function declaration
var func = function(a, b, c) {} // function expression

ES6

let func = a => {} // 一个参数
let func = (a, b, c) => {} // 多个参数

• MDN Reference: Arrow functions

模板字符串

字符串插值

表达式可以嵌入模板文字字符串中。

ES5

var str = 'Release date: ' + date

ES6

let str = `Release Date: ${date}`

• MDN Reference: Expression interpolation

多行字符串

使用模板文字语法，JavaScript字符串可以跨越多行而无需串联。

ES5

var str = 'This text ' + 'is on ' + 'multiple lines'

ES6

let str = `This text
            is on
            multiple lines`

注意: 空白保留在多行模板文字中。请参阅删除ES6模板字符串中的前导空白。

• MDN Reference: 多行字符串

隐式返回

如果使用不带块体的箭头功能，则暗指return关键字，可以将return省略。

ES5

function func(a, b, c) {
  return a + b + c
}

ES6

let func = (a, b, c) => a + b + c // curly brackets must be omitted

• MDN Reference: 函数体

键/值 简写

ES6引入了一种较短的表示法，当键值名称相同，简写如下。

ES5

var obj = {
  a: a,
  b: b,
}

ES6

let obj = {
  a,
  b,
}

注意: 这个vue中经常看到components中组件定义，等等。

• MDN Reference: 属性定义

方法定义简写

当给一个对象分配一个方法时，function关键词可以被忽略。

ES5

var obj = {
  a: function(c, d) {},
  b: function(e, f) {},
}

ES6

let obj = {
  a(c, d) {},
  b(e, f) {},
}

obj.a() // call method a

• MDN Reference: 方法定义

解构(object matching)

使用大括号将对象的属性分配给它们自己的变量。

var obj = { a: 1, b: 2, c: 3 }

ES5

var a = obj.a
var b = obj.b
var c = obj.c

ES6

let { a, b, c } = obj

• MDN Reference: 对象初始化器r

数组迭代 (循环)

为了通过数组和其他可迭代对象进行迭代，引入了更简洁的语法。

var arr = ['a', 'b', 'c']

ES5

for (var i = 0; i < arr.length; i++) {
  console.log(arr[i])
}

ES6

for (let i of arr) {
  console.log(i)
}

• MDN Reference: for...of

默认参数

可以使用默认参数初始化函数。

ES5

var func = function(a, b) {
  b = b === undefined ? 2 : b
  return a + b
}

ES6

let func = (a, b = 2) => {
  return a + b
}

func(10) // returns 12
func(10, 5) // returns 15

• MDN Reference: 默认参数

展开语法

展开语法可用于扩展数组。

ES6

let arr1 = [1, 2, 3]
let arr2 = ['a', 'b', 'c']
let arr3 = [...arr1, ...arr2]

console.log(arr3) // [1, 2, 3, "a", "b", "c"]

展开语法可用于扩展函数参数。

ES6

let arr1 = [1, 2, 3]
let func = (a, b, c) => a + b + c

console.log(func(...arr1)) // 6

• MDN Reference:展开语法

类/构造函数

ES6 class在基于原型的构造函数之上引入了语法

ES5

function Func(a, b) {
  this.a = a
  this.b = b
}

Func.prototype.getSum = function() {
  return this.a + this.b
}

var x = new Func(3, 4)

ES6

class Func {
  constructor(a, b) {
    this.a = a
    this.b = b
  }

  getSum() {
    return this.a + this.b
  }
}

let x = new Func(3, 4)

x.getSum() // returns 7

• MDN Reference: 类

继承

extends关键词创建一个子类。

ES5

function Inheritance(a, b, c) {
  Func.call(this, a, b)

  this.c = c
}

Inheritance.prototype = Object.create(Func.prototype)
Inheritance.prototype.getProduct = function() {
  return this.a * this.b * this.c
}

var y = new Inheritance(3, 4, 5)

ES6

class Inheritance extends Func {
  constructor(a, b, c) {
    super(a, b)

    this.c = c
  }

  getProduct() {
    return this.a * this.b * this.c
  }
}

let y = new Inheritance(3, 4, 5)

y.getProduct() // 60

• MDN Reference: 子类

模块-导出/导入

模块可以通过导出和导入符号在文件间传递代码

index.html

export.js

let func = a => a + a
let obj = {}
let x = 0

export { func, obj, x }

import.js

import { func, obj, x } from './export.js'

console.log(func(3), obj, x)

• MDN Reference: 导出
• MDN Reference: 导入

承诺/回调

承诺表示异步功能的完成。它们是链接功能的替代方法。

ES5 callback

function doSecond() {
  console.log('Do second.')
}

function doFirst(callback) {
  setTimeout(function() {
    console.log('Do first.')

    callback()
  }, 500)
}

doFirst(doSecond)

ES6 Promise

let doSecond = () => {
  console.log('Do second.')
}

let doFirst = new Promise((resolve, reject) => {
  setTimeout(() => {
    console.log('Do first.')

    resolve()
  }, 500)
})

doFirst.then(doSecond)

• MDN Reference