[TOC] ## **es6新增了哪些特性** ### 1.運用let聲明變量 > 不能聲明提前，不能重復定義，具有塊級作用域 ### 2.箭頭函數，解決了this指向問題  ``` <div id = "div"> div </div> <script> var div = document.getElementById("div"); div.onclick = function(){ window.setTimeout (function(){ console.log(this);//this指向window this.innerHTML = "change" },100) } </script> ``` **bind解決方案：** ``` <div id = "div"> div </div> <script> var div = document.getElementById("div"); div.onclick = function(){ window.setTimeout (function(){ console.log(this) this.innerHTML = "change" }.bind(this),100) } </script> ``` **箭頭函數解決方案：** ~~~ <div id = "div"> ? ? ? div </div> <script> var div = document.getElementById("div"); div.onclick = function(){ window.setTimeout (()=>{ console.log(this) this.innerHTML = "change" },100) } </script> ~~~ #### 箭頭函數的寫法： ``` <script> var go =()=>10;//第一種 var test=()=>{ return 10; }//第二種 var demo=()=>(10);//第三種 console.log(demo()) </script> ``` ### 3.解構，展開，默認賦值 #### （1）解構 ``` <script> //解構 var obj={ name:"ccc", age:20 } var {name,age}=obj; console.log(name)//ccc </script> ``` #### （2）展開 ``` <script> var arr = [1,2,3]; var a = 4; var total=[...arr,a]; console.log(total);//[1, 2, 3, 4] </script> ``` #### （3）默認賦值 ``` <script> function go(a=10,b=20){ console.log(a+b); } go(); go(20,40) </script> //30 60 ``` ### 4.繼承語法 > react中基于組件，組件向外暴露 > 封裝HTTP ### 5.Promise > 新版的ajax就是一個promise ``` <script> var in_theaters = $.ajax({ url:"https://douban.uieee.com/v2/movie/in_theaters", dataType:"jsonp" }) var top250 = $.ajax({ url:"https://douban.uieee.com/v2/movie/top250", dataType:"jsonp" }) Promise.all([in_theaters,top250]).then(res=>{ console.log(res[0]); }) </script> ``` ### 6.Class ### 7.Generators（生成器） > generator（生成器）是ES6標準引入的新的數據類型。一個generator看上去像一個函數，但可以返回多次。 著名的斐波那契數列為例，它由`0`，`1`開頭： 要編寫一個產生斐波那契數列的函數，可以這么寫： ~~~ function fib(max) { var t, a = 0, b = 1, arr = [0, 1]; while (arr.length < max) { [a, b] = [b, a + b]; arr.push(b); } return arr; } // 測試: fib(5); // [0, 1, 1, 2, 3] fib(10); // [0, 1, 1, 2, 3, 5, 8, 13, 21, 34] ~~~ 函數只能返回一次，所以必須返回一個`Array`。但是，如果換成generator，就可以一次返回一個數，不斷返回多次。用generator改寫如下： ~~~ function* fib(max) { var t, a = 0, b = 1, n = 0; while (n < max) { yield a; [a, b] = [b, a + b]; n ++; } return; } ~~~ 直接調用試試： ~~~ fib(5); // fib {[[GeneratorStatus]]: "suspended", [[GeneratorReceiver]]: Window} ~~~ ### 8.async 函數：es6引入了 async 函數，使得異步操作變得更加方便。