ES6基礎(chǔ)之默認(rèn)參數(shù)值
如果調(diào)用函數(shù)的過程中,定義的參數(shù)缺失,此參數(shù)變量的值則會(huì)是undefined。怎么給缺失的參數(shù)賦值默認(rèn)值,在ES6之前,沒有簡潔的語法設(shè)置缺失參數(shù)的默認(rèn)值,但是我們一般可以這么編寫代碼解決缺失參數(shù)默認(rèn)值:
function myFunction(x, y, z) {
x = x === undefined ? 1 : x;
y = y === undefined ? 2 : y;
z = z === undefined ? 3 : z;
console.log(x, y, z); //Output "6 7 3"
}
myFunction(6, 7);
這種寫法是不是比較麻煩?默認(rèn)值的設(shè)置是不是不夠直觀?在ES6中,我們可以用更簡潔的語法進(jìn)行實(shí)現(xiàn),通過本篇文章你將學(xué)習(xí)到以下內(nèi)容:
- 使用ES6語法聲明參數(shù)默認(rèn)
- 值使用undefined傳
- 參參數(shù)運(yùn)算
使用ES6語法聲明參數(shù)默認(rèn)值
我們可以使用ES6簡潔的語法,如下示例進(jìn)行聲明函數(shù)參數(shù)的默認(rèn)值:
function myFunction(x = 1, y = 2, z = 3) {
console.log(x, y, z);
}
myFunction(6,7); // Outputs 6 7 3
在上述代碼示例中,我們?cè)谡{(diào)用此函數(shù)中傳遞了前兩個(gè)參數(shù),因此參數(shù)的默認(rèn)值(即x=1和y=2)將會(huì)被覆蓋(即x=6和y=7)。由于第三個(gè)參數(shù)缺省,因此z使用默認(rèn)值,將會(huì)是3。
使用undefined傳參
如果我們想讓具體某個(gè)參數(shù)使用默認(rèn)值,我們可以使用undefined進(jìn)行賦值,如下段代碼所示:
function myFunction(x = 1, y = 2, z = 3) {
console.log(x, y, z); // Outputs "1 7 9"
}
myFunction(undefined,7,9);
是不是很簡單,只需要使用undefined,我們就可以指定具體某個(gè)參數(shù)使用默認(rèn)值。
參數(shù)運(yùn)算
在ES6中我們不僅可以給參數(shù)默認(rèn)賦值具體的數(shù)值,同時(shí)參數(shù)賦值支持參數(shù)的邏輯運(yùn)算進(jìn)行賦值,如下段代碼所示:
function myFunction(x = 1, y = 2, z = x + y) {
console.log(x, y, z); // Output "6 7 13"
}
myFunction(6,7);
在上述代碼中,我們只傳入了前兩個(gè)參數(shù),第三個(gè)參數(shù)缺省,第三個(gè)參數(shù)的值默認(rèn)值是則會(huì)是前兩個(gè)參數(shù)之和。
小節(jié)
今天的內(nèi)容就到這里,當(dāng)我們?cè)陂_發(fā)一些工程應(yīng)用通用組件時(shí),都需要暴露一些接口以供使用。而這些接口的友好性是決定這個(gè)組件質(zhì)量的一大指標(biāo),其中參數(shù)缺省值(默認(rèn)值)的完善程度同時(shí)也影響接口的友好性,感謝ES6能讓我們用如此簡介的語法設(shè)置參數(shù)的缺省值。
與解構(gòu)賦值默認(rèn)值結(jié)合使用
這里有兩種寫法需要區(qū)分一下:
function m1({x=0,y=0} = {}){
return [x,y];
}
function m2({x,y} = {x:0,y:0}){
return [x,y];
}
m1({x:3});//[3,0]
m2({x:3});//[3,undefined]
m1({});//[0,0]
m2({});//[undefined,undefined]
參數(shù)默認(rèn)值的位置
通常情況下,定義了默認(rèn)值的參數(shù)應(yīng)該是函數(shù)的尾參數(shù)。因?yàn)檫@樣比較容易看出,到底省略了哪些參數(shù),如果非尾部的參數(shù)設(shè)置默認(rèn)值,實(shí)際上這個(gè)參數(shù)是無法省略的。
如果有默認(rèn)值的參數(shù)都不是尾參數(shù),這時(shí),無法只省略該參數(shù)而不省略其后的參數(shù),除非顯示輸入undefined。如果傳入undefined,那么就會(huì)觸發(fā)默認(rèn)值,但是null沒有這個(gè)效果。
函數(shù)的length屬性
如果函數(shù)指定了默認(rèn)值后,函數(shù)的length屬性就不會(huì)包含有默認(rèn)值的參數(shù)。這是因?yàn)閘ength屬性的含義是,該函數(shù)預(yù)期傳入的參數(shù)個(gè)數(shù),某個(gè)參數(shù)指定默認(rèn)值之后,預(yù)期傳入的參數(shù)個(gè)數(shù)就不包括這個(gè)參數(shù)了,同理,rest參數(shù)也不會(huì)計(jì)入length屬性。
函數(shù)參數(shù)默認(rèn)值的類型
(1)變量
如果函數(shù)參數(shù)的默認(rèn)值是一個(gè)變量,則該變量所處的作用域和其他變量的作用域規(guī)則相同,即是先前函數(shù)的作用域,然后再是全局作用域。
(2)函數(shù)
如果函數(shù)A的參數(shù)默認(rèn)值是函數(shù)B,那么由于函數(shù)的作用域是其聲明的時(shí)候所在的作用域,函數(shù)B的作用域就在全局作用域而不是函數(shù)A的作用域。
以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
JS+DIV實(shí)現(xiàn)鼠標(biāo)劃過切換層效果的實(shí)例代碼
這篇文章主要是對(duì)JS+DIV實(shí)現(xiàn)鼠標(biāo)劃過切換層效果的實(shí)例代碼進(jìn)行了詳細(xì)的介紹,需要的朋友可以過來參考下,希望對(duì)大家有所幫助2013-11-11
基于VSCode調(diào)試網(wǎng)頁JavaScript代碼過程詳解
這篇文章主要介紹了基于VSCode調(diào)試網(wǎng)頁JavaScript代碼過程詳解,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-07-07
div+css+js實(shí)現(xiàn)無縫滾動(dòng)類似marquee無縫滾動(dòng)兼容firefox
marquee無縫滾動(dòng)想必大家都有見過,本文利用div+css+javascript也實(shí)現(xiàn)下類似的滾動(dòng)且兼容firefox,喜歡的朋友可以參考下2013-08-08
JavaScript實(shí)現(xiàn)簡易放大鏡最全代碼解析(ES5)
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)簡易放大鏡最全代碼,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-09-09
JS數(shù)據(jù)結(jié)構(gòu)與算法中的隊(duì)列結(jié)構(gòu)詳解
隊(duì)列指的是一種受限的線性表,先進(jìn)先出,今天通過本文帶領(lǐng)大家認(rèn)識(shí)隊(duì)列及隊(duì)列的應(yīng)用,對(duì)JS數(shù)據(jù)結(jié)構(gòu)與算法-隊(duì)列結(jié)構(gòu)相關(guān)知識(shí)感興趣的朋友一起看看吧2022-11-11
JS跨域之window.name實(shí)現(xiàn)的跨域數(shù)據(jù)傳輸
這篇文章主要介紹了JS跨域之window.name實(shí)現(xiàn)的跨域數(shù)據(jù)傳輸,需要的朋友可以參考下2022-01-01
使用bootstrap typeahead插件實(shí)現(xiàn)輸入框自動(dòng)補(bǔ)全之問題及解決辦法
這篇文章主要介紹了使用bootstrap typeahead插件實(shí)現(xiàn)輸入框自動(dòng)補(bǔ)全之問題及解決辦法的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-07-07
JavaScript實(shí)現(xiàn)動(dòng)態(tài)增刪表格的方法
本篇文章主要介紹了JavaScript實(shí)現(xiàn)動(dòng)態(tài)增刪表格,可以實(shí)現(xiàn)表格增加和刪除數(shù)據(jù)的功能,非常具有實(shí)用價(jià)值,有興趣的可以了解一下2017-03-03

