記錄整理平常開發中所使用的ES6語法/API，及其遇到的各類難點及教程（不定時更新）

---

一、變量聲明let和const
在ES6以前的ES5時代，聲明變量用var，可是不管聲明在何處，都會被變量提高在最頂部(函數內會被提高到函數最頂部，不在函數內即在全局做用域的最頂部)。
而let和const，其中最重要的兩個特性就是提供了塊級做用域和再也不具有變量提高。
怎麼理解塊級做用域呢？？

在一個函數內部，在一個代碼塊內部
說白了只要在{}大括號內的代碼塊便可以認爲 let 和 const 的做用域。

例如：

// let聲明變量
for(let i=0; i<10; i++) {
    console.log(i);
}
console.log(i); // 塊外調用會報錯：Uncaught ReferenceError: i is not defined

// const聲明常量
const id = 123;
id = 456; // 再次修改會報錯：Uncaught TypeError: Assignment to constant variable.

二、箭頭函數=>

var f = v => v;

上面的箭頭函數等同於：

var f = function(v) {
  return v;
};

三、解構賦值
解析結構是一種全新的寫法，咱們只須要使用一個例子，你們就可以明白解析結構究竟是怎麼一回事兒。

首先有這麼一個對象

const props = {
    className: 'tiger-button',
    loading: false,
    clicked: true,
    disabled: 'disabled'
}

當咱們想要取得其中的2個值：loading與clicked時：

// es5
var loading = props.loading;
var clicked = props.clicked;

// es6
const { loading, clicked } = props;

給一個默認值，當props對象中找不到loading時，loading就等於該默認值

const { loading = false, clicked } = props;

是否是簡單了許多？正是因爲解析結構大大減小了代碼量，所以它大受歡迎，在不少代碼中它的影子隨處可見。

好比

// section1 
import React, { Component } from 'react';

// section2
export { default } from './Button';

// section3
const { click, loading } = this.props;
const { isCheck } = this.state;

more 任何獲取對象屬性值的場景均可以使用解析結構來減小咱們的代碼量
另外，數組也有屬於本身的解析結構。

// es6
const arr = [1, 2, 3];
const [a, b, c] = arr;

// es5
var arr = [1, 2, 3];
var a = arr[0];
var b = arr[1];
var c = arr[2];

數組以序列號一一對應，這是一個有序的對應關係。
而對象根據屬性名一一對應，這是一個無序的對應關係。
根據這個特性，使用解析結構從對象中獲取屬性值更加具備可用性。

十、await 多個 async 函數
在使用 async/await 的時候，可使用 Promise.all 來 await 多個 async 函數

await Promise.all([anAsyncCall(), thisIsAlsoAsync(), oneMore()])