es6相比es5增加的新特性 * 類 * 模塊化 * 箭頭函數 * 函數參數默認值 * 模板字符串 * 解構賦值 * 延展操作符(展開操作符) * 對象屬性簡寫 * Promise * Let與Const #### 1.類（class） 對熟悉Java，PHP等純面向對象語言的開發者來說，都會對class有一種特殊的情懷。ES6 引入了class（類），讓JavaScript的面向對象編程變得更加簡單和易于理解。 ``` <script type="text/javascript"> class user { constructor(name,age){ this.name = name this.age = age } getName(){ console.log(this.name) } getAge(){ console.log(this.age) } } </script> ``` #### 2.模塊化(Module) ES5不支持原生的模塊化，在ES6中模塊作為重要的組成部分被添加進來。模塊的功能主要由 export 和 import 組成。每一個模塊都有自己單獨的作用域，模塊之間的相互調用關系是通過 export 來規定模塊對外暴露的接口，通過import來引用其它模塊提供的接口。同時還為模塊創造了命名空間，防止函數的命名沖突. #### 3.箭頭（Arrow）函數 ()=>{} 如果只有一個參數，（）可以省略， 如果只有一個return，{}可以省略。 ``` <script type="text/javascript"> let show = function (){ alert(1111) } show() let show1 = ()=>{ alert(222) } show1() let show2 = function (b){ alert(b * 2); } let show3 = b =>{ alert(b*2) } let show4 = function(b){ return b *2; } let show5 = b=>b*2 </script> ``` ### 4.函數參數默認值 ``` function demo(arg1= 10, arg2 = 'red') { // TODO } ``` #### 5.模板字符串 `` 字符串模板,用反引號，這個可能被用在xss中。 let a=12 \`bbbb${a}ccccc` 在ES6中通過${}就可以完成字符串的拼接，只需要將變量放在大括號之中。 #### 6.解構賦值 很多語言都有這個特性，讓代碼更簡單。 ``` [a, b] = [1, 2]; console.log(a); // 1 console.log(b); // 2 ``` #### 7.延展操作符 參數的擴展，就是不定個數的形參 ,...args 收集剩下的所有參數，位置必須是最后一個 function demo(a,b,...args){.............} ``` function demo(a,b,c){} arr = [1,2,3] demo(...arr) var arr1 = [0, 1, 2]; var arr2 = [3, 4, 5]; var arr3 = [...arr1, ...arr2];// 將 arr2 中所有元素附加到 arr1 后面并返回 //等同于 var arr4 = arr1.concat(arr2); ``` ### 8.對象屬性簡寫 ~~~sh const name='zhangsan',age='18',city='beijing'; const student = { name, age, city }; console.log(student);//{name: "zhangsan", age: "18", city: "beijing"} ~~~ #### 9.Promise 優雅的異步解決方案 ~~~js // 來用偽代碼解釋一下用法 var promise = new Promise(function (resolve, reject) { // ... some code if ( /* 異步操作成功 */ ) { resolve(value); } else { reject(error); } }); promise().then(res=>{ /* resolve */ /* 成功回調 */ /* res為回調的參數 也就是value */ }).catch(err=>{ /* reject */ /* 失敗回調 */ /* err為回調的參數 也就是error*/ }) ~~~ **通俗的講** `resolve`會觸發`then`方法，`reject`會觸發`catch`方法 在執行`resolve`或者`reject`前，都叫做`Pending`狀態 #### 10.支持let與const var 聲明變量的問題 可以重復聲明 可以無限制修改 沒有塊級作用域 let 不能能重復聲明變量，可以修改，塊級作用域 const 聲明常量，不能重復聲明變量，也不能修改，塊級作用域