ES6语法和特性概述（ES5和ES6特性的清晰描述和对比）

ECMAScript 2015，也被称为ES6，对JavaScript进行了许多修改。下面是一些最常见的特性和语法差异的概述，并在适用的情况下与ES5进行比较

注意:
一个普遍接受的做法是使用const，除非在循环和重赋值的情况下。然而，在此资源中，我将使用let代替所有ES6示例中的var

变量和常量特性比较， 该表提供了一个简要概述。

	区别
var	var声明的变量全局有效；var有变量提升，在声明之前也可以使用；var可以重复声明变量；var声明的变量可改。
let	let只在声明的作用域内有效 ；let不可以在声明之前使用，有暂时性死区；let不可以重复声明变量；let声明的变量可改
const	const只在声明的作用域内有效；const不可以在声明之前使用，有暂时性死区；const不可以重复声明变量；const声明的是只读的常量（变量指向的内存地址不变）

这里不一一对比举例 主要针对语法相比ES5对比下

① 箭头功能

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

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关键字是隐含的，如果使用不带块体的箭头函数，可以省略。

ES5

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

ES6

let func = (a, b, c) => a + b + c // 必须省略花括号

⑤ 属性简写（Key/property shorthand）

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() // call method a（调用方法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

⑪（class） 类构造函数/函数

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

⑫ 继承

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)

⑬ 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(回调）

promise表示异步函数的完成。它们可以作为链接函数的替代。

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)

下面是一个使用xMIHttpRequest的示例，仅用于演示目的(Fetch APl将是合适的现代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)
  })

以上若有帮到您 点个赞哦~