[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 函数，使得异步操作变得更加方便。