ES6语法与ES5语法最常见差异比较

箭头功能

箭头函数表达式语法是创建函数表达式的一种较短方法。Arrow函数没有自己的函数this，没有原型，不能用于构造函数，也不应用作对象方法。

ES5
function func(a, b, c) {} // function declaration
var func = function(a, b, c) {} // function expression
ES6
let func = a => {} // parentheses optional with one parameter
let func = (a, b, c) => {} // parentheses required with multiple parameters

模板文字

串联/字符串插值

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

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`

隐式返回

return关键字是隐含的，如果使用没有块体的箭头函数，可以省略它。

ES5
function func(a, b, c) {
  return a + b + c
}
ES6
let func = (a, b, c) => a + b + c // 必须省略大括号

键/属性简写

ES6引入了一种较短的表示法，用于将属性分配给相同名称的变量。

ES5
var obj = {
  a: a,
  b: b,
}
ES6
let obj = {
  a,
  b,
}

 方法定义简写

在对象上分配方法时，可以省略function关键字。

ES5
var obj = {
  a: function(c, d) {},
  b: function(e, f) {},
}
ES6
let obj = {
  a(c, d) {},
  b(e, f) {},
}
obj.a() // 调用方法

 解构（对象匹配）

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

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回调Callbacks
function doSecond() {
  console.log('Do second.')
}

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

    callback()
  }, 500)
}

doFirst(doSecond)
ES6承诺Promises
let doSecond = () => {
  console.log('Do second.')
}

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

    resolve()
  }, 500)
})

doFirst.then(doSecond)

下面的示例使用XMLHttpRequest，仅用于说明目的（Fetch API将是使用的正确的现代API）。

ES5 callback
function makeRequest(method, url, callback) {
  var request = new XMLHttpRequest()

  request.open(method, url)
  request.onload = function() {
    callback(null, request.response)
  }
  request.onerror = function() {
    callback(request.response)
  }
  request.send()
}

makeRequest('GET', 'https://url.json', function(err, data) {
  if (err) {
    throw new Error(err)
  } else {
    console.log(data)
  }
})
ES6 Promise
function makeRequest(method, url) {
  return new Promise((resolve, reject) => {
    let request = new XMLHttpRequest()

    request.open(method, url)
    request.onload = resolve
    request.onerror = reject
    request.send()
  })
}

makeRequest('GET', 'https://url.json')
  .then(event => {
    console.log(event.target.response)
  })
  .catch(err => {
    throw new Error(err)
  })

如果您发现此文章有用，请分享！