ES6語法的學習與實踐

　　ES6是JavaScript語言的新一代標準，是ECMAScript的第六個版本，加入了不少新的功能和語法，在不少框架，如在使用Vue,React等框架的項目中通常都採用ES6語法來編寫的，下面對常常用到的ES6語法作簡要的介紹。

　　1.let,const

　　let和const是ES6中新增的兩個關鍵字，用來生命變量，let和const都是塊級做用域。let聲明的變量只在let命令所在的代碼塊內有效。const聲明一個只讀變量，一旦聲明，常量的值就不可更改。與var聲明的變量不一樣，var聲明的是函數做用域，且存在變量提高。例如：　

 1 // let示例
 2 {
 3   var a=1;
 4 
 5   let b=2;
 6 }
 7 a;  // 1
 8 b;  // ReferenceError:b is not undefined.
 9 
10 // const示例
11 const c=3;
12 c=4; //  Assignment to constant variable.
13 
14 // var 示例
15 console.log(d); // undefined
16 var d=3;
17 console.log(d); //3
18 聲明提早後瀏覽器執行順序爲：
19 var d;
20 console.log(d); // undefined
21 d=3;
22 console.log(d); // 3

　　2.箭頭函數

　　ES6容許使用「箭頭」（=>）定義函數。這種函數建立的函數不須要函數關鍵字，而且還能夠省略return關鍵字。與此同時，箭頭函數內的this指向函數定義時所在的上下文對象。例如：

 1 var foo1=(a,b)=>a+1;
 2 // 等價於 
 3 var foo1=function(a,b){
 4   return a+b;
 5 }
 6 // 在return只有一個表達式時，使用箭頭函數能夠省略return和{}
 7 
 8 var name='jhon';
 9 var obj={
10   name:"tom",
11   sayName1:function(){
12     setTimeout(function(){
13       console.log(this.name)
14     },500)
15   },
16  sayName2:function(){
17     setTimeout(()=>{
18       console.log(this.name)
19     },500)
20   },
21 }
22 obj.sayName1(); // jhon
23 obj.sayName2(); // tom
24 // 第一個this值window對象，第二個方法裏面指向當前的obj對象，

　　小結：1.使用箭頭函數能夠簡寫代碼量；2.能夠改變this的指向，能夠替代apply,call,bind一些方法。

　　3.模板字符串

　　相信許多小夥伴在js裏面用‘’，+拼接字符串很讓人頭疼了，若是字符串量比較少還好，一旦比較多，最後拼的本身都不認識了，並且嚴重影響代碼的整潔優雅度。ES6的反引號（``）標識字符串，除了能夠當作普通字符串使用外，還能夠用來定義多行字符串，以及在字符串內嵌入變零，功能很強大。例如：

 1 // 普通字符串
 2 `Hello World`
 3 
 4 // 多行字符串
 5 `Hello World，
 6   Hello JavaScript!
 7 `
 8 // 字符串內嵌入變量
 9 let name='Peer';
10 `Hello,${name}`

　　4.解構賦值

　　ES6容許按照必定模式從數組和對象中提取值，對變量進行賦值，這被稱爲解構。例如：

　　

 1 // 數組解構
 2 var [a,b,c]=[1,2,3];
 3 a //1
 4 b //2
 5 c //3
 6 
 7 // 對象解構
 8 let name='Peer';
 9 let age=23;
10 let person={name,age};
11 person //{name:"Peer",age:23}
12 
13 // 函數的參數也能夠使用解構賦值，例如：
14 // 數組的參數解構
15 function sum([x,y]){
16   return x+y;
17 }
18 sum([1,2]); // 3
19 // 對象的參數解構
20 function sum2({x,y}){
21   return x+y;
22 }
23 sum2({x:5,y:6}); // 11
24 
25 // 解構一樣適用於嵌套的數組與對象
26 // 嵌套數組解構
27 let [a,[b],c]=[1,[2],3]
28 a; //1
29 b; //2
30 c: //3
31 // 嵌套對象解構
32 let {person:{name,age},foo}={person:{name:"Peer",age:23},foo:"foo"}
33 name;  // "Peer"
34 age;  // 23
35 foo; // "foo"

　　小結：對象和數組的解構只需和聲明好的對象數組形式保持一致便可，在獲取對象裏面的屬性值仍是很方便的，在Vue，React等框架的開發中也用的比較多，如:import { a , b , c } from 'component',因此不難理解這段代碼，就是把component這個模塊裏面的啊，a,b,c屬性對應的值取出來再分別賦值給a,b,c變量，確實大大簡化了代碼，提升了開發效率。

5.rest參數

　　rest打開軟件翻譯爲：休息; 剩餘部分; 支持物; 寧靜，安寧。ES6引入rest參數（形式爲...變零名）用於獲取多數的多餘參數，以替代arguments對象的使用。rest參數是一個數組，數組中的元素是多餘的參數。例如：

1 function printName(a,...names){
2   console.log(a);
3   console.log(names)
4 }
5 printName("Peer","jhon","toom")
6 // Peer
7 //["jhon", "toom"]

6.擴展運算符

　　擴展運算符是三個點（...）,它將一個數組轉爲用逗號分隔的參數序列，相似於rest參數的逆運算。例如：

1 function sum(a,b,c){
2   return a+b+c;
3 }
4 sum(...[1,2,3])
5 // 6

7.import ,export

　　ES6實現了本身的模塊化表標準，在語言層面上實現了模塊化，它逐漸取代了CommonJS和AMD規範。ES6的模塊功能主要有兩個關鍵字構成：export和import。export用於規定模塊對外暴露的接口，import用於引入其餘模塊提供的接口。例如：

// a.js
const a=function(){
  return 'this is a.js'
}
export default a;
// b.js
const b=function(){
  return 'this is b.js'
}
export {b}
// c.js
import a from './a';
import {b} from './b';
console.log(a,b); // 'this is a.js', 'this is b.js'

　小結：ES6的模塊化解決了JavaScript沒有模塊化系統的缺陷，同時也使得各個模塊相互獨立，有獨立的做用域。

8.Class

 1 // 定義一個類
 2 class Person{
 3   constructor(name,age){
 4     this.name=name;
 5     this.age=age;
 6   }
 7   getName(){
 8     return this.name;
 9   }
10 }
11 var person=new Person("Peer",23);
12 
13 // 經過extends 關鍵字實現繼承
14 class Man extends Person{
15   constructor(anme,age){
16     super(name,age)
17   }
18   getGender(){
19     return 'male'
20   }
21 }
22 var man=new Man("Peer",23)；
23 man.getName(); //Peer
23 console.dir(man);

　　從打印man對象的結構來看，getGender是Man原型的方法，getName是Man繼承Person的構造方法，man.getName()方法首先再man.__proto__的原型上查找，若是沒有就在man.__proto__.proto__上查找，因而一級一級就構成了做用域鏈。

　　話說好記性不如爛筆頭，書寫文章也是自我反思與總結的過程。以上就是我的在項目開發中用的比較多的地方分享給你們，不足之處，多多指正。

參考書籍：《React進階之路》，《深刻淺出Webpack》