ES6語法的學習與實踐

　　ES6是JavaScript語言的新一代標准，是ECMAScript的第六個版本，加入了很多新的功能和語法，在很多框架，如在使用Vue,React等框架的項目中一般都采用ES6語法來編寫的，下面對經常用到的ES6語法做簡要的介紹。

　　1.let,const

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

// let示例
{
  var a=1;

  let b=2;
}
a;  // 1
b;  // ReferenceError:b is not undefined.

// const示例
const c=3;
c=4; //  Assignment to constant variable.

// var 示例
console.log(d); // undefined
var d=3;
console.log(d); //3
聲明提前后瀏覽器執行順序為：
var d;
console.log(d); // undefined
d=3;
console.log(d); // 3

　　2.箭頭函數

　　ES6允許使用“箭頭”（=>）定義函數。這種函數創建的函數不需要函數關鍵字，並且還可以省略return關鍵字。與此同時，箭頭函數內的this指向函數定義時所在的上下文對象。例如：

var foo1=(a,b)=>a+1;
// 等價於 
var foo1=function(a,b){
  return a+b;
}
// 在return只有一個表達式時，使用箭頭函數可以省略return和{}

var name='jhon';
var obj={
  name:"tom",
  sayName1:function(){
    setTimeout(function(){
      console.log(this.name)
    },500)
  },
 sayName2:function(){
    setTimeout(()=>{
      console.log(this.name)
    },500)
  },
}
obj.sayName1(); // jhon
obj.sayName2(); // tom
// 第一個this值window對象，第二個方法里面指向當前的obj對象，

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

　　3.模板字符串

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

// 普通字符串
`Hello World`

// 多行字符串
`Hello World，
  Hello JavaScript!
`
// 字符串內嵌入變量
let name='Peer';
`Hello,${name}`

　　4.解構賦值

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

　　

// 數組解構
var [a,b,c]=[1,2,3];
a //1
b //2
c //3

// 對象解構
let name='Peer';
let age=23;
let person={name,age};
person //{name:"Peer",age:23}

// 函數的參數也可以使用解構賦值，例如：
// 數組的參數解構
function sum([x,y]){
  return x+y;
}
sum([1,2]); // 3
// 對象的參數解構
function sum2({x,y}){
  return x+y;
}
sum2({x:5,y:6}); // 11

// 解構同樣適用於嵌套的數組與對象
// 嵌套數組解構
let [a,[b],c]=[1,[2],3]
a; //1
b; //2
c: //3
// 嵌套對象解構
let {person:{name,age},foo}={person:{name:"Peer",age:23},foo:"foo"}
name;  // "Peer"
age;  // 23
foo; // "foo"

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

5.rest參數

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

function printName(a,...names){
  console.log(a);
  console.log(names)
}
printName("Peer","jhon","toom")
// Peer
//["jhon", "toom"]

6.擴展運算符

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

function sum(a,b,c){
  return a+b+c;
}
sum(...[1,2,3])
// 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

// 定義一個類
class Person{
  constructor(name,age){
    this.name=name;
    this.age=age;
  }
  getName(){
    return this.name;
  }
}
var person=new Person("Peer",23);

// 通過extends 關鍵字實現繼承
class Man extends Person{
  constructor(anme,age){
    super(name,age)
  }
  getGender(){
    return 'male'
  }
}
var man=new Man("Peer",23)；
23 man.getName(); //Peer
console.dir(man);

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

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

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