1.變數宣告const和let 我們都是知道在ES6以前，var關鍵字宣告變數。無論宣告在何處，都會被視為宣告在函式的最頂部(不在函式內即在全域性作用域的最頂部)。這就是函式變數提升例如:

   function aa() {
     if(bool) {
        var test = 'hello man'
     } else {
        console.log(test)
     }
   } 

以上的程式碼實際上是：

function aa() {
    var test // 變數提升
    if(bool) {
        test = 'hello man'
 

    } else {
        //此處訪問test 值為undefined
        console.log(test)
    }
    //此處訪問test 值為undefined
  }

所以不用關心bool是否為true or false。實際上，無論如何test都會被建立宣告。 接下來ES6主角登場：我們通常用let和const來宣告，let表示變數、const表示常量。let和const都是塊級作用域。怎麼理解這個塊級作用域？ 1. 在一個函式內部 2. 在一個程式碼塊內部

說白了 {}大括號內的程式碼塊即為let 和 const的作用域。

看以下程式碼：

function aa() {
    if(bool) {
       let test = 'hello man'
    } else {
        //test 在此處訪問不到
        console.log(test)
    }
  }

let的作用域是在它所在當前程式碼塊，但不會被提升到當前函式的最頂部。 再來說說const；

const name = 'lux'
name = 'joe' //再次賦值此時會報錯

說一道面試題

var funcs = []
for (var i = 0; i < 10; i++) {
    funcs.push(function
 
() { console.log(i) })
}
funcs.forEach(function(func) {
    func()
})

這樣的面試題是大家常見，很多同學一看就知道輸出 10 十次但是如果我們想依次輸出0到9呢？兩種解決方法:

// ES5告訴我們可以利用閉包解決這個問題
  var funcs = []
  for (var i = 0; i < 10; i++) {
      func.push((function(value) {
          return function() {
              console.log(value)
          }
      }(i)))
  }
  // es6
  for (let i = 0; i < 10; i++) {
      func.push(function() {
          console.log(i)
      })
  }

2.模板字串 es6模板字元簡直是開發者的福音啊，解決了ES5在字串功能上的痛點。 第一個用途，基本的字串格式化。將表示式嵌入字串中進行拼接。用${}來界定;

//es5 
var name = 'lux'
console.log('hello' + name)
//es6
const name = 'lux'
console.log(`hello ${name}`) //hello lux

第二個用途，在ES5時我們通過反斜槓()來做多行字串或者字串一行行拼接。ES6反引號(“)直接搞定:

// es5
var msg = "Hi \
man!
"
// es6
const template = `<div>
  <span>hello world</span>
</div>`

對於字串es6當然也提供了很多厲害的方法。說幾個常用的:

// 1.includes：判斷是否包含然後直接返回布林值
let str = 'hahay'
console.log(str.includes('y') // true
// 2.repeat: 獲取字串重複n次
let s = 'hh'
console.log(s.repeat(3)) // 'hehehe'
//如果你帶入小數, Math.floor(num) 來處理

3.函式 函式預設引數 在ES5我們給函式定義引數預設值是怎麼樣？

function action(num) {
   num = num || 200
    //當傳入num時，num為傳入的值
    //當沒傳入引數時，num即有了預設值200
    return num
}

但細心觀察的同學們肯定會發現，num傳入為0的時候就是false， 此時num = 200 與我們的實際要的效果明顯不一樣。 ES6為引數提供了預設值。在定義函式時便初始化了這個引數，以便在引數沒有被傳遞進去時使用。

 function action(num = 200) {
     console.log(num)
 }
 action() //200
 action(300) //300

箭頭函式 ES6很有意思的一部分就是函式的快捷寫法，也就是箭頭函式： 箭頭函式最直觀的三個特點： 1. 不需要function關鍵字來建立函式 2. 省略return關鍵字 3. 繼承當前上下文的 this 關鍵字

//例如：
    [1,2,3].map( x => x + 1 )

//等同於：
    [1,2,3].map((function(x){
        return x + 1
    }).bind(this))

小細節： 當你的函式有且僅有一個引數的時候，是可以省略掉括號的。當你函式返回有且僅有一個表示式的時候可以省略{}；例如:

var people = name => 'hello' + name
//引數name就沒有括號

作為參考

var people = (name, age) => {
    const fullName = 'h' + name
    return fullName
} 
//如果缺少()或者{}就會報錯

4.拓展的物件功能

物件初始化簡寫 ES5我們對於物件都是以鍵值對的形式書寫，是有可能出現價值對重名的。例如：

function people(name, age) {
     return {
         name: name,
         age: age
     };
 }

鍵值對重名，ES6可以簡寫如下：

function people(name, age) {
    return {
        name,
        age
    };
}

ES6 同樣改進了為物件字面量方法賦值的語法。ES5為物件新增方法：

 const people = {
     name: 'lux',
     getName: function() {
         console.log(this.name)
     }
 }

ES6通過省略冒號與 function 關鍵字，將這個語法變得更簡潔

  const people = {
      name: 'lux',
      getName () {
          console.log(this.name)
      }
  }

ES6 物件提供了Object.assign()這個方法來實現淺複製。Object.assign()可以把任意多個源物件自身可列舉的屬性拷貝給目標物件，然後返回目標物件。第一引數即為目標物件。在實際專案中，我們為了不改變源物件。一般會把目標物件傳為{}

    const obj = Object.assign({}, objA, objB)

5.更方便的資料訪問–解構

陣列和物件是JS中最常用也是最重要表示形式。為了簡化提取資訊，ES6新增瞭解構，這是將一個數據結構分解為更小的部分的過程

ES5我們提取物件中的資訊形式如下：

 const people = {
      name: 'lux',
      age: 20
  }
  const name = people.name
  const age = people.age
  console.log(name + ' --- ' + age)

是不是覺得很熟悉，沒錯，在ES6之前我們就是這樣獲取物件資訊的，一個一個獲取。現在，解構能讓我們從物件或者數組裡取出資料存為變數，例如

  //物件
  const people = {
      name: 'lux',
      age: 20
  }
  const { name, age } = people
  console.log(`${name} --- ${age}`)
  //陣列
  const color = ['red', 'blue']
  const [first, second] = color
  console.log(first) //'red'
  console.log(second) //'blue'

6.Spread Operator 展開運算子

ES6中另外一個好玩的特性就是Spread Operator 也是三個點兒…接下來就展示一下它的用途。

組裝物件或者陣列

 //陣列
 const color = ['red', 'yellow']
 const colorful = [...color, 'green', 'pink']
 console.log(colorful) //[red, yellow, green, pink]

 //物件
 const alp = { fist: 'a', second: 'b'}
 const alphabets = { ...alp, third: 'c' }
 console.log(alphabets) //{ "fist": "a", "second": "b", "third": "c"}

有時候我們想獲取陣列或者物件除了前幾項或者除了某幾項的其他項

 //陣列
 const number = [1,2,3,4,5]
 const [first, ...rest] = number
 console.log(rest) //2,3,4,5
 //物件
 const user = {
     username: 'lux',
     gender: 'female',
     age: 19,
     address: 'peking'
 }
 const { username, ...rest } = user
 console.log(rest) //{"address": "peking", "age": 19, "gender": "female"}

對於 Object 而言，還可以用於組合成新的 Object 。(ES2017 stage-2 proposal) 當然如果有重複的屬性名，右邊覆蓋左邊

const first = {
   a: 1,
   b: 2,
   c: 6,
}
const second = {
   c: 3,
   d: 4
}
const total = { ...first, ...second }
console.log(total) // { a: 1, b: 2, c: 3, d: 4 }

7.import 和 export

import匯入模組、export匯出模組

//全部匯入

import people from './example'

//有一種特殊情況，即允許你將整個模組當作單一物件進行匯入 //該模組的所有匯出都會作為物件的屬性存在

import * as example from "./example.js"
console.log(example.name)
console.log(example.age)
console.log(example.getName())

//匯入部分

import {name, age} from './example'

// 匯出預設, 有且只有一個預設

export default App

// 部分匯出

export class App extend Component {};

以前有人問我，匯入的時候有沒有大括號的區別是什麼。下面是我在工作中的總結：

1.當用export default people匯出時，就用 import people 匯入（不帶大括號）

2.一個檔案裡，有且只能有一個export default。但可以有多個export。

3.當用export name 時，就用import { name }匯入（記得帶上大括號）

4.當一個檔案裡，既有一個export default people, 又有多個export name 或者 export age時，匯入就用 import people, { name, age } 

5.當一個檔案裡出現n多個 export 匯出很多模組，匯入時除了一個一個匯入，也可以用import * as example

8. Promise

在promise之前程式碼過多的回撥或者巢狀，可讀性差、耦合度高、擴充套件性低。通過Promise機制，扁平化的程式碼機構，大大提高了程式碼可讀性；用同步程式設計的方式來編寫非同步程式碼，儲存線性的程式碼邏輯，極大的降低了程式碼耦合性而提高了程式的可擴充套件性。

說白了就是用同步的方式去寫非同步程式碼。

發起非同步請求

 fetch('/api/todos')
      .then(res => res.json())
      .then(data => ({ data }))
      .catch(err => ({ err }));

今天看到一篇關於面試題的很有意思。

 setTimeout(function() {
      console.log(1)
    }, 0);
    new Promise(function executor(resolve) {
      console.log(2);
      for( var i=0 ; i<10000 ; i++ ) {
        i == 9999 && resolve();
      }
      console.log(3);
    }).then(function() {
      console.log(4);
    });
    console.log(5);

當然以上promise的知識點，這個只是冰山一角。需要更多地去學習應用。

9.Generators

生成器（ generator）是能返回一個迭代器的函式。生成器函式也是一種函式，最直觀的表現就是比普通的function多了個星號*，在其函式體內可以使用yield關鍵字,有意思的是函式會在每個yield後暫停。

這裡生活中有一個比較形象的例子。咱們到銀行辦理業務時候都得向大廳的機器取一張排隊號。你拿到你的排隊號，機器並不會自動為你再出下一張票。也就是說取票機“暫停”住了，直到下一個人再次喚起才會繼續吐票。

OK。說說迭代器。當你呼叫一個generator時，它將返回一個迭代器物件。這個迭代器物件擁有一個叫做next的方法來幫助你重啟generator函式並得到下一個值。next方法不僅返回值，它返回的物件具有兩個屬性：done和value。value是你獲得的值，done用來表明你的generator是否已經停止提供值。繼續用剛剛取票的例子，每張排隊號就是這裡的value，列印票的紙是否用完就這是這裡的done。

// 生成器
function *createIterator() {
    yield 1;
    yield 2;
    yield 3;
}

// 生成器能像正規函式那樣被呼叫，但會返回一個迭代器
let iterator = createIterator();

console.log(iterator.next().value); // 1
console.log(iterator.next().value); // 2
console.log(iterator.next().value); // 3

那生成器和迭代器又有什麼用處呢？

圍繞著生成器的許多興奮點都與非同步程式設計直接相關。非同步呼叫對於我們來說是很困難的事，我們的函式並不會等待非同步呼叫完再執行，你可能會想到用回撥函式，（當然還有其他方案比如Promise比如Async/await）。

生成器可以讓我們的程式碼進行等待。就不用巢狀的回撥函式。使用generator可以確保當非同步呼叫在我們的generator函式執行一下行程式碼之前完成時暫停函式的執行。

那麼問題來了，咱們也不能手動一直呼叫next()方法，你需要一個能夠呼叫生成器並啟動迭代器的方法。就像這樣子的

function run(taskDef) { //taskDef即一個生成器函式

      // 建立迭代器，讓它在別處可用
      let task = taskDef();

      // 啟動任務
      let result = task.next();

      // 遞迴使用函式來保持對 next() 的呼叫
      function step() {

          // 如果還有更多要做的
          if (!result.done) {
              result = task.next();
              step();
          }
      }

      // 開始處理過程
      step();

  }

生成器與迭代器最有趣、最令人激動的方面，或許就是可建立外觀清晰的非同步操作程式碼。你不必到處使用回撥函式，而是可以建立貌似同步的程式碼，但實際上卻使用 yield 來等待非同步操作結束。