ECMAScript6函數(shù)默認(rèn)參數(shù)
語言更新時(shí)每一個(gè)新增的特性都是從千百萬開發(fā)者需求里提取過來的,規(guī)范采用后能減少程序員的痛苦,帶來便捷。
我們經(jīng)常會這么寫
function calc(x, y) { x = x || 0; y = y || 0; // to do with x, y // return x/y }
簡單說就是x,y提供了一個(gè)默認(rèn)值為0,不傳時(shí)x, y以值0來運(yùn)算。傳了就以實(shí)際值計(jì)算。
又如定義一個(gè)ajax
function ajax(url, async, dataType) { async = async !== false dataType = dataType || 'JSON' // ... }
自己用原生JS封裝的一個(gè)簡易ajax函數(shù),url必填,async和dataType可選,即不填時(shí)默認(rèn)同步請求和返回JSON格式數(shù)據(jù)。
再如定義一個(gè)矩形類
function Rectangle(width, height) { this.width = width || 200; this.height = height || 300; }
new時(shí)不傳任何參數(shù),也會創(chuàng)建一個(gè)默認(rèn)寬高為200*300的矩形。
無論是calc,ajax函數(shù)還是Rectangle類,我們都需要在函數(shù)體內(nèi)做默認(rèn)值的處理,如果語言自身處理豈不樂哉? ES6提供了該特性(Default Parameters),以下是用ES6新特性重寫的calc,ajax,Rectangle。
function calc(x=0, y=0) { // ... console.log(x, y) } calc(); // 0 0 calc(1, 4); // 1 4 function ajax(url, async=true, dataType="JSON") { // ... console.log(url, async, dataType) } ajax('../user.action'); // ../user.action true JSON ajax('../user.action', false); // ../user.action false JSON ajax('../user.action', false, 'XML'); // ../user.action false XML function Rectangle(width=200, height=300) { this.width = width; this.height = height; } var r1 = new Rectangle(); // 200*300的矩形 var r2 = new Rectangle(100); // 100*300的矩形 var r3 = new Rectangle(100, 500); // 100*500矩形
可以看到,ES6把默認(rèn)值部分從大括號移到了小括號里,還減少了“||”運(yùn)算,函數(shù)體從此瘦身了。參數(shù)默認(rèn)值嘛,本來就應(yīng)該在定義參數(shù)的地方,這樣看起來簡潔了不少。O(∩_∩)O
默認(rèn)參數(shù)可以定義在任意位置,比如在中間定義一個(gè)
function ajax(url, async=true, success) { // ... console.log(url, async, success) }
定義了一個(gè)默認(rèn)參數(shù)async,url和success是必傳的,這時(shí)需要把中間的參數(shù)置為undefined
ajax('../user.action', undefined, function() { })
注意,不要想當(dāng)然的把undefined改為null, 即使 null == undefined, 傳null后,函數(shù)體內(nèi)的async就是null不是true了。
以下幾點(diǎn)需要注意:
1. 定義了默認(rèn)參數(shù)后,函數(shù)的length屬性會減少,即有幾個(gè)默認(rèn)參數(shù)不包含在length的計(jì)算當(dāng)中
function calc(x=0, y=0) { // ... console.log(x, y) } function ajax(url, async=true, dataType="JSON") { // ... console.log(url, async, dataType) } console.log(calc.length); // 0 console.log(ajax.length); // 1
2. 不能用let和const再次聲明默認(rèn)值,var可以
function ajax(url="../user.action", async=true, success) { var url = ''; // 允許 let async = 3; // 報(bào)錯(cuò) const success = function(){}; // 報(bào)錯(cuò) }
另外比較有趣的是:默認(rèn)參數(shù)可以不是一個(gè)值類型,它可以是一個(gè)函數(shù)調(diào)用
function getCallback() { return function() { // return code } } function ajax(url, async, success=getCallback()) { // ... console.log(url, async, success) }
可以看到這里參數(shù)success是一個(gè)函數(shù)調(diào)用,調(diào)用ajax時(shí)如果沒有傳第三個(gè)參數(shù),則會執(zhí)行g(shù)etCallback函數(shù),該函數(shù)返回一個(gè)新函數(shù)賦值給success。這是一個(gè)很強(qiáng)大的功能,給程序員以很大的想象發(fā)揮空間。
例如,利用這個(gè)特性可以強(qiáng)制指定某參數(shù)必須傳,不傳就報(bào)錯(cuò)
function throwIf() { throw new Error('少傳了參數(shù)'); } function ajax(url=throwIf(), async=true, success) { return url; } ajax(); // Error: 少傳了參數(shù)
以上所述就是本文的全部內(nèi)容了,希望大家能夠喜歡。
相關(guān)文章
JS獲取整個(gè)頁面文檔的實(shí)現(xiàn)代碼
就是在當(dāng)前頁面用AJAX請求當(dāng)前頁面,返回的就是整個(gè)頁面的HTML··既然是整個(gè)頁面,所以也包括文檔聲明2011-12-12利用Math.js解決JS計(jì)算小數(shù)精度丟失問題
電商系統(tǒng)中訂單、庫存中有數(shù)字等加減乘除算術(shù),下面這篇文章主要給大家介紹了關(guān)于利用Math.js解決JS計(jì)算小數(shù)精度丟失問題的相關(guān)資料,mathjs是一個(gè)前端在計(jì)算上面必定會用到的類庫,需要的朋友可以參考下2022-04-04JavaScript設(shè)計(jì)模式學(xué)習(xí)之代理模式
這篇文章主要介紹了JavaScript設(shè)計(jì)模式學(xué)習(xí)之代理模式,對設(shè)計(jì)模式感興趣的同學(xué),可以參考下2021-04-04基于JS實(shí)現(xiàn)移動(dòng)端左滑刪除功能
最近做個(gè)項(xiàng)目,需要實(shí)現(xiàn)移動(dòng)端左滑刪除功能,當(dāng)時(shí)js代碼將網(wǎng)上找的進(jìn)行刪減優(yōu)化,下面通過本文給大家分享基于JS實(shí)現(xiàn)移動(dòng)端左滑刪除功能,感興趣的朋友一起看看2017-07-07Javascript柯里化實(shí)現(xiàn)原理及作用解析
這篇文章主要介紹了Javascript柯里化實(shí)現(xiàn)原理及作用解析,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-10-10動(dòng)態(tài)創(chuàng)建樣式表在各瀏覽器中的差異測試代碼
對于標(biāo)準(zhǔn)瀏覽器,直接使用css.innerHTML也可以修改HTMLStyleElement的css規(guī)則2011-09-09