ES6新特性之解構(gòu)、參數(shù)、模塊和記號用法示例
本文實(shí)例講述了ES6新特性之解構(gòu)、參數(shù)、模塊和記號用法。分享給大家供大家參考,具體如下:
一、解構(gòu)
解構(gòu)提供了一個方便的地從對象或數(shù)組中提取數(shù)據(jù)的方法,請看下面的例子:
//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
解構(gòu)也可以用于對象,注意對象中必須存在的對應(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
另一個有趣的模式是模擬多個返回值:
function doSomething(){
return [1,2];
}
let [x.y]=doSomething();//x=1.y=2
解構(gòu)可以用來為參數(shù)對象賦默認(rèn)值。通過對象字面量,可以模擬命名參數(shù):
function doSomething({y:1,z:0}){
console.log(y,z);
}
doSomething({y:2})
二、參數(shù)
1、默認(rèn)值
在ES6中,可以定義函數(shù)的參數(shù)默認(rèn)值。語法如下:
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í)都會觸發(fā)參數(shù)使用默認(rèn)值。
2、REST參數(shù)
前面我們已經(jīng)學(xué)習(xí)了省略號操作符,剩余參數(shù)和它很類似,它同樣是使用‘...'語法,允許你把末尾的參數(shù)保存在數(shù)組中:
funtion doSomething(x,...remaining){
return x*rremaining.length;
}
dodSomething(5,0,0,0);//15
三、模塊
在ES6的模塊語法中,模塊設(shè)計(jì)圍繞export和import關(guān)鍵詞,現(xiàn)在讓我們看一個包含兩個模塊的例子:
//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聲明使用一種語法,來明確定義被導(dǎo)入的內(nèi)容,可以使用*通配符,結(jié)合as關(guān)鍵詞給模塊提供一個本地名稱,把模塊當(dāng)成一個整體導(dǎo)入:
//app.js import*as math form"lib/math.js"; console.lgo(math.sum(math.pi,math.pi));
模塊系統(tǒng)有一個default輸出,它可以是一個函數(shù),只需要提供一個本地名稱就可以導(dǎo)入這個默認(rèn)值:
//lib/my-fn.js
export default function(){
console.log('echo echo);
}
//app.js
import doSomething from 'lib/my-fn,js';
doSomething();
請注意import聲明是同步的,但是模塊代碼需在所有依賴加載完后才會運(yùn)行
四、類
類的創(chuàng)建圍繞calss和constructor關(guān)鍵詞,以下是個簡短的示例:
class Vehicle{
constructor(name){
this.name=name;
this.kind=''Vehicle";
}
getName(){
return this.name;
}
};
//Create an instance
let myVehicle=new Vehicle('rocky');
注意類的定義不是一般的對象,因此,類的成員間沒有逗號。創(chuàng)建一個類的對象時(shí),需要使用new關(guān)鍵詞,繼承一個基類時(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
從衍生類中,你可以使用從任何構(gòu)造函數(shù)或方法中使用super來獲取它的基類:使用super()調(diào)用父類構(gòu)造函數(shù);調(diào)用其他成員。
五、記號
記號是一個新的原生數(shù)據(jù)的類型,像Number和String一樣,你可以使用記號為對象屬性創(chuàng)建唯一標(biāo)示或創(chuàng)建唯一的常量。創(chuàng)建方法如下:
const MY_CONSTANT=Symbol();
let obj={};
obj[MY_CONSTANT]=1;
注意通過記號產(chǎn)生的鍵值對不能通過Object.getOwnPorpertyNames()獲得,在for...in遍歷、Object.key()、JSON.stringify()中均不可見,這是與基于字符串的鍵相反的,你可以通過Object.getOenPropertySymbols()獲取一個對象的記號數(shù)組。記號與const配合很合適,因?yàn)樗鼈兌加胁豢筛淖兊奶匦浴?/p>
轉(zhuǎn)譯
現(xiàn)在瀏覽器對ES6的支持還不廣泛,且個瀏覽器也各不相同,可能你寫的代碼在用戶的瀏覽器中還不能完全解析,這就是我們?yōu)槭裁葱枰汛a轉(zhuǎn)換成能在當(dāng)前的任何瀏覽器中良好運(yùn)行的舊版本JavaScript(ES5),這種轉(zhuǎn)換通常稱為轉(zhuǎn)譯,我們必須要這么做,知道所有我們想兼容的瀏覽器都能運(yùn)行ES6為止。轉(zhuǎn)譯的方法有很多種,包括Bable、Traceur、TypeScript等。
希望本文所述對大家ECMAScript程序設(shè)計(jì)有所幫助。
- ES6知識點(diǎn)整理之函數(shù)數(shù)組參數(shù)的默認(rèn)值及其解構(gòu)應(yīng)用示例
- 解析JavaScript的ES6版本中的解構(gòu)賦值
- 深入淺出講解ES6的解構(gòu)
- ES6解構(gòu)賦值實(shí)例詳解
- 深入理解ES6之?dāng)?shù)據(jù)解構(gòu)的用法
- ES6解構(gòu)賦值的功能與用途實(shí)例分析
- ES6學(xué)習(xí)之變量的解構(gòu)賦值
- es6學(xué)習(xí)之解構(gòu)時(shí)應(yīng)該注意的點(diǎn)
- 基于ES6作用域和解構(gòu)賦值詳解
- ES6 對象的新功能與解構(gòu)賦值介紹
- ES6知識點(diǎn)整理之?dāng)?shù)組解構(gòu)和字符串解構(gòu)的應(yīng)用示例
相關(guān)文章
JS實(shí)現(xiàn)利用兩個隊(duì)列表示一個棧的方法
這篇文章主要介紹了JS實(shí)現(xiàn)利用兩個隊(duì)列表示一個棧的方法,簡單分析了使用兩個隊(duì)列表示一個棧的原理,并結(jié)合具體實(shí)例分析了javascript相關(guān)操作技巧,需要的朋友可以參考下2017-12-12
javascript function調(diào)用時(shí)的參數(shù)檢測常用辦法
js中并不直接支持類似c#的方法重載,所以只能變相的來解決,示意代碼:(利用了內(nèi)置屬性arguments)2010-02-02
JavaScript中async/await的高級用法小結(jié)
JavaScript的異步編程已經(jīng)從回調(diào)(Callback)演進(jìn)到Promise,再到如今廣泛使用的async/await語法,本文為大家整理了7個async/await高級用法,希望對大家有所幫助2023-12-12
純html+css+javascript實(shí)現(xiàn)樓層跳躍式的頁面布局(實(shí)例代碼)
這篇文章主要介紹了純html+css+javascript實(shí)現(xiàn)樓層跳躍式的頁面布局,需要的朋友可以參考下2017-10-10
JavaScript設(shè)計(jì)模式之單例模式詳解
這篇文章主要為大家詳細(xì)介紹了JavaScript設(shè)計(jì)模式之例模式的相關(guān)資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-06-06

