JavaScript ES6 语法特性介绍（javascript的基本语法遵循的标准是____。）

变量定义特征比较

ES5

var x = 0

ES6

let x = 0

常量定义- const

ES6 引入了 const 关键字，该关键字无法重新声明或重新分配，但不是不可变的。

ES6

const CONST_IDENTIFIER = 0 // constants are uppercase by convention

箭头函数-Arrow functions

箭头函数表达式语法是创建函数表达式的较短方法。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

模板字符串-Template literals

串联/字符串内插表达式可以嵌入到模板文本字符串中。

ES5

var str = 'Release date: ' + date

ES6

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

多行字符串-Multi-line strings

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

注意：空格保留在多行模板文本中

ES5

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

ES6

let str = `This text
            is on
            multiple lines`

隐式返回-Implicit returns

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

键/属性简略写法-Key/property shorthand

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

ES5

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

ES6

let obj = {
  a,
  b,
}

函数定义简洁写法-Method definition shorthand

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

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

解析赋值-Destructuring (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

遍历数组-Array iteration (looping)

引入了一种更简洁的语法，用于通过数组和其他可迭代对象的迭代。

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)
}

默认参数-Default parameters

函数可以使用默认参数进行初始化，仅当未通过函数调用参数时，才会使用这些参数。

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

扩展语法-Spread syntax

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

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

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

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

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

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

类/构造函数-Classes/constructor functions

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

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

继承-Inheritance

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

模块包的导出/引入-Modules - export/import

可以创建模块在文件之间导出和导入代码。

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)

承诺/回调-Promises/Callbacks

承诺表示异步函数的完成。它们可以用作链接函数的替代方法。

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)

下面一个使用 XMLHttp 请求的示例，仅用于演示目的（获取 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)
  })