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
常量声明
ES6引入了const关键词，它不可以被重新声明和重新赋值，但是它不是不变的。
ES6
const CONST_IDENTIFIER = 0 // constants are uppercase by convention
箭头函数
箭头函数表达式语法是创建函数表达式的简洁方法。箭头函数没有自己函数的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) => {} // 多个参数
模板字符串
字符串插值
表达式可以嵌入模板文字字符串中。
ES5
var str = 'Release date: ' + date
ES6
let str = `Release Date: ${date}`
多行字符串
使用模板文字语法，JavaScript字符串可以跨越多行而无需串联。
ES5
var str = 'This text ' + 'is on ' + 'multiple lines'
ES6
let str = `This text
is on
multiple lines`
注意: 空白保留在多行模板文字中。请参阅删除ES6模板字符串中的前导空白。
隐式返回
如果使用不带块体的箭头功能，则暗指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
键/值 简写
ES6引入了一种较短的表示法，当键值名称相同，简写如下。
ES5
var obj = {
a: a,
b: b,
}
ES6
let obj = {
a,
b,
}
注意: 这个vue中经常看到components中组件定义，等等。
方法定义简写
当给一个对象分配一个方法时，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
解构(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
数组迭代 (循环)
为了通过数组和其他可迭代对象进行迭代，引入了更简洁的语法。
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)
}
默认参数
可以使用默认参数初始化函数。
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
展开语法
展开语法可用于扩展数组。
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
类/构造函数
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
继承
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
模块-导出/导入
模块可以通过导出和导入符号在文件间传递代码
index.html
<script src="export.js"></script>
<script type="module" src="import.js"></script>
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)
承诺/回调
承诺表示异步功能的完成。它们是链接功能的替代方法。
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)
