本文實(shí)例講述了ES6新特性之解構(gòu)、參數(shù)、模塊和記號(hào)用法。分享給大家供大家參考，具體如下：

一、解構(gòu)

解構(gòu)提供了一個(gè)方便的地從對(duì)象或數(shù)組中提取數(shù)據(jù)的方法，請(qǐng)看下面的例子：

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

使用這個(gè)語(yǔ)法，可以一次性給多個(gè)變量賦值。一個(gè)很好的附加用處是可以很簡(jiǎn)單的交換變量值：

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

解構(gòu)也可以用于對(duì)象，注意對(duì)象中必須存在的對(duì)應(yīng)的鍵：

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

或者

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

另一個(gè)有趣的模式是模擬多個(gè)返回值：

function doSomething(){
   return [1,2];
}
let [x.y]=doSomething();//x=1.y=2

解構(gòu)可以用來(lái)為參數(shù)對(duì)象賦默認(rèn)值。通過(guò)對(duì)象字面量，可以模擬命名參數(shù)：

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

二、參數(shù)

1、默認(rèn)值

在ES6中，可以定義函數(shù)的參數(shù)默認(rèn)值。語(yǔ)法如下：

function doSomething(){
   return x*y;
}
doSomething(5);//10
doSomethinf(5,undefined);//10
doSomething(5,3);//15<br><br>//ES5中給參數(shù)賦默認(rèn)值<br>function doSomething(x,y){<br>y=y===undefined?2:y;<br>return x*y;<br>}

傳遞undefined或不傳參數(shù)時(shí)都會(huì)觸發(fā)參數(shù)使用默認(rèn)值。

2、REST參數(shù)

前面我們已經(jīng)學(xué)習(xí)了省略號(hào)操作符，剩余參數(shù)和它很類(lèi)似，它同樣是使用‘...'語(yǔ)法，允許你把末尾的參數(shù)保存在數(shù)組中：

funtion doSomething(x,...remaining){
  return x*rremaining.length;
}
dodSomething(5,0,0,0);//15

三、模塊

在ES6的模塊語(yǔ)法中，模塊設(shè)計(jì)圍繞export和import關(guān)鍵詞，現(xiàn)在讓我們看一個(gè)包含兩個(gè)模塊的例子：

//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);

正如你所見(jiàn)，可以存在多個(gè)export聲明，每個(gè)都要明確的指出輸出值得類(lèi)型。本例中的import聲明使用一種語(yǔ)法，來(lái)明確定義被導(dǎo)入的內(nèi)容，可以使用*通配符，結(jié)合as關(guān)鍵詞給模塊提供一個(gè)本地名稱(chēng)，把模塊當(dāng)成一個(gè)整體導(dǎo)入：

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

模塊系統(tǒng)有一個(gè)default輸出，它可以是一個(gè)函數(shù)，只需要提供一個(gè)本地名稱(chēng)就可以導(dǎo)入這個(gè)默認(rèn)值：

//lib/my-fn.js
export default function(){
  console.log('echo echo);
}
//app.js
import doSomething from 'lib/my-fn,js';
doSomething();

請(qǐng)注意import聲明是同步的，但是模塊代碼需在所有依賴(lài)加載完后才會(huì)運(yùn)行

四、類(lèi)

類(lèi)的創(chuàng)建圍繞calss和constructor關(guān)鍵詞，以下是個(gè)簡(jiǎn)短的示例：

class Vehicle{
   constructor(name){
     this.name=name;
     this.kind=''Vehicle";
   }
  getName(){
     return this.name;
  }
};
//Create an instance
let myVehicle=new Vehicle('rocky');

注意類(lèi)的定義不是一般的對(duì)象，因此，類(lèi)的成員間沒(méi)有逗號(hào)。創(chuàng)建一個(gè)類(lèi)的對(duì)象時(shí)，需要使用new關(guān)鍵詞，繼承一個(gè)基類(lèi)時(shí)，使用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

從衍生類(lèi)中，你可以使用從任何構(gòu)造函數(shù)或方法中使用super來(lái)獲取它的基類(lèi)：使用super()調(diào)用父類(lèi)構(gòu)造函數(shù)；調(diào)用其他成員。

五、記號(hào)

記號(hào)是一個(gè)新的原生數(shù)據(jù)的類(lèi)型，像Number和String一樣，你可以使用記號(hào)為對(duì)象屬性創(chuàng)建唯一標(biāo)示或創(chuàng)建唯一的常量。創(chuàng)建方法如下：

const MY_CONSTANT=Symbol();
let obj={};
obj[MY_CONSTANT]=1;

注意通過(guò)記號(hào)產(chǎn)生的鍵值對(duì)不能通過(guò)Object.getOwnPorpertyNames()獲得，在for...in遍歷、Object.key()、JSON.stringify()中均不可見(jiàn)，這是與基于字符串的鍵相反的，你可以通過(guò)Object.getOenPropertySymbols()獲取一個(gè)對(duì)象的記號(hào)數(shù)組。記號(hào)與const配合很合適，因?yàn)樗鼈兌加胁豢筛淖兊奶匦浴?/p>

轉(zhuǎn)譯

現(xiàn)在瀏覽器對(duì)ES6的支持還不廣泛，且個(gè)瀏覽器也各不相同，可能你寫(xiě)的代碼在用戶(hù)的瀏覽器中還不能完全解析，這就是我們?yōu)槭裁葱枰汛a轉(zhuǎn)換成能在當(dāng)前的任何瀏覽器中良好運(yùn)行的舊版本JavaScript（ES5），這種轉(zhuǎn)換通常稱(chēng)為轉(zhuǎn)譯，我們必須要這么做，知道所有我們想兼容的瀏覽器都能運(yùn)行ES6為止。轉(zhuǎn)譯的方法有很多種，包括Bable、Traceur、TypeScript等。

希望本文所述對(duì)大家ECMAScript程序設(shè)計(jì)有所幫助。

最新評(píng)論