ES6新特性-------解構、參數、模塊和記號(續)

6、解構javascript

  解構提供了一個方便的地從對象或數組中提取數據的方法,請看下面的例子:java

//ES6
let [x,y]=[1,2];//x=1,y=2

//ES5
var arr=[1,2];
var x=arr[0];
var y=arr[1];

  使用這個語法,能夠一次性給多個變量賦值。一個很好的附加用處是能夠很簡單的交換變量值:數組

let x=1,y=2;

[x,y]=[y,x];x=2 y=1

  解構也能夠用於對象,注意對象中必須存在的對應的鍵:瀏覽器

let obj={x:1,y:2};

let {x,y}=obj;//a=1,b=1
或者
let {x:a,y:b}=obj;//a=1,b=2

  另外一個有趣的模式是模擬多個返回值:app

function doSomething(){
     return [1,2];
}

let [x.y]=doSomething();//x=1.y=2

  解構能夠用來爲參數對象賦默認值。經過對象字面量,能夠模擬命名參數:函數

function doSomething({y:1,z:0}){
      console.log(y,z);
}
doSomething({y:2})

7、參數學習

一、默認值this

  在ES6中,能夠定義函數的參數默認值。語法以下:設計

function doSomething(){
      return x*y;
}

doSomething(5);//10
doSomethinf(5,undefined);//10
doSomething(5,3);//15

//ES5中給參數賦默認值
function doSomething(x,y){
  y=y===undefined?2:y;
  return x*y;
}

   傳遞undefined或不傳參數時都會觸發參數使用默認值。orm

二、REST參數

  前面咱們已經學習了省略號操做符,剩餘參數和它很相似,它一樣是使用‘...’語法,容許你把末尾的參數保存在數組中:

funtion doSomething(x,...remaining){
    return x*rremaining.length;
}

dodSomething(5,0,0,0);//15

 

8、模塊

  在ES6的模塊語法中,模塊設計圍繞export和import關鍵詞,如今讓咱們看一個包含兩個模塊的例子:

//lib/ath.js

export function sum(x,y){
    return x+y
};

export var pi=3.14;

//app.js

import {sum,pi}form"lib/math.js";
console.log(sum(pi,pi);

  正如你所見,能夠存在多個export聲明,每一個都要明確的指出輸出值得類型。本例中的import聲明使用一種語法,來明肯定義被導入的內容,可使用*通配符,結合as關鍵詞給模塊提供一個本地名稱,把模塊當成一個總體導入:

//app.js

import*as math form"lib/math.js";
console.lgo(math.sum(math.pi,math.pi));

  模塊系統有一個default輸出,它能夠是一個函數,只須要提供一個本地名稱就能夠導入這個默認值:

//lib/my-fn.js

export default function(){
    console.log('echo echo);
}

//app.js

import doSomething from 'lib/my-fn,js';
doSomething();

  請注意import聲明是同步的,可是模塊代碼需在全部依賴加載完後纔會運行

9、類  

  類的建立圍繞calss和constructor關鍵詞,如下是個簡短的示例:

 class Vehicle{
     constructor(name){
         this.name=name;
         this.kind=''Vehicle";
     }
     
    getName(){
         return this.name;
    }
};


//Create an instance

let myVehicle=new Vehicle('rocky');

  注意類的定義不是通常的對象,所以,類的成員間沒有逗號。建立一個類的對象時,須要使用new關鍵詞,繼承一個基類時,使用extends:

class Car extends Vehicle{
     constructor(name){
            super(name);
            this.kind='car';
     }
}

let myCar=new Car('bumpy');

myCar.getName();//'bumpy';
myCar instanceof Car;//true
myCar instanceof Vehicle;//true

  從衍生類中,你可使用從任何構造函數或方法中使用super來獲取它的基類:使用super()調用父類構造函數;調用其餘成員。

10、記號

  記號是一個新的原生數據的類型,像Number和String同樣,你可使用記號爲對象屬性建立惟一標示或建立惟一的常量。建立方法以下:

const MY_CONSTANT=Symbol();

let obj={};
obj[MY_CONSTANT]=1;

  注意經過記號產生的鍵值對不能經過Object.getOwnPorpertyNames()得到,在for...in遍歷、Object.key()、JSON.stringify()中均不可見,這是與基於字符串的鍵相反的,你能夠經過Object.getOenPropertySymbols()獲取一個對象的記號數組。記號與const配合很合適,由於它們都有不可改變的特性。

 

轉譯

  如今瀏覽器對ES6的支持還不普遍,且個瀏覽器也各不相同,可能你寫的代碼在用戶的瀏覽器中還不能徹底解析,這就是咱們爲何須要把代碼轉換成能在當前的任何瀏覽器中良好運行的舊版本JavaScript(ES5),這種轉換一般稱爲轉譯,咱們必需要這麼作,知道全部咱們想兼容的瀏覽器都能運行ES6爲止。轉譯的方法有不少種,包括Bable、Traceur、TypeScript等。

相關文章
相關標籤/搜索