ES6常用功能和语法

翻译自ES6 Syntax and Feature Overview

一、变量声明

ES6引入let 语句声明一个块级作用域的本地变量 ，该关键字声明的变量不会被提升，并且不可以被重新声明

var x = 'global';
let y = 'global';
console.log(this.x); // "global"
console.log(this.y); // undefined

MDN: let

二、常量声明

ES6引入const关键字声明一个常量，该关键字不能重新声明或重新分配，但不是不变的。它需要一个常数的初始化器；也就是说，您必须在声明的同一语句中指定它的值。

const MY_FAV = 7;

MDN: const

三、箭头函数

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

//ES5
function func(a, b, c) {} // 函数声明
var func = function(a, b, c) {} // 函数表达式

//ES6
let func = a => {} // 当只有一个参数时，圆括号是可选的
let func = (a, b, c) => {} // 有多个参数时，圆括号是必须的

箭头函数可以有一个“简写体”，return使用不带块体的箭头功能，则暗指该关键字，可以将其省略。

// 简写函数 省略return
var func = x => x * x;       
           
//常规编写 明确的返回值
var func = (x, y) => { return x + y; }; 

MDN: 箭头函数

四、模板字符串（Template literals）

1. 插入表达式(Expression interpolation)

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

let date = new Date().toLocaleDateString()
let str = `Release Date: ${date}`

2.多行字符串

使用模板文字语法，JavaScript字符串可以跨越多行进行声明。

let str = `This text
            is on
            multiple lines`

MDN: 模板字符串

五、属性定义

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

var a = 'foo', 
    b = 42, 

//ES5
var obj = {
  a: a,
  b: b,
}
//ES6
let obj = {
  a,
  b,
}  //a, b必须是已经声明的变量，否则会报undefined

MDN：对象属性定义

六、方法定义简写

当为一个对象分配方法时，可省略关键字function

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

方法定义

七、解构

ES6可以使用大括号将对象的属性分配给本地的变量。

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

八、数组迭代

ES6为了让数组和其他可迭代对象进行迭代，引入了更简洁的语法for...of

var arr = ['a', 'b', 'c']
for (let i of arr) {
  console.log(i)
}

MDN: for...of

九、默认参数

函数默认参数允许在undefined被传入或没有值的时候使用默认形参。

let func = (a, b = 2) => {
  return a + b
}
func(10) // returns 12
func(10, 5) // returns 15

MDN: 默认参数值

十、展开语法（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 func = (a, b, c) => a + b + c
console.log('func(...arr1) :', func(...arr1)) //6

MDN: 展开语法

十一、Classes/构造方法

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：构造方法

十二、extends

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: extends

十三、模块-导出/导入

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

//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: export
MDN: import

十四、Promise

Promise表示异步操作的最终完成或者失败，可以作为链式函数的替代。
本质上，Promise 是一个被某些函数传出的对象，我们附加回调函数（callback）使用它，而不是将回调函数传入那些函数内部。

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

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

    callback()
  }, 500)
}

doFirst(doSecond)

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

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

    resolve()
  }, 500)
})

doFirst.then(doSecond)

下面的示例使用XMLHttpRequest

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

MND: promises