快捷導(dǎo)航

ECMAScript6函數(shù)默認(rèn)參數(shù)

更新時(shí)間：2015年06月12日 10:00:00 投稿：hebedich

這篇文章主要介紹了ECMAScript6函數(shù)默認(rèn)參數(shù)的相關(guān)資料,需要的朋友可以參考下

語(yǔ)言更新時(shí)每一個(gè)新增的特性都是從千百萬(wàn)開(kāi)發(fā)者需求里提取過(guò)來(lái)的，規(guī)范采用后能減少程序員的痛苦，帶來(lái)便捷。

我們經(jīng)常會(huì)這么寫

function calc(x, y) {
  x = x || 0;
  y = y || 0;
  // to do with x, y
  // return x/y
}

簡(jiǎn)單說(shuō)就是x，y提供了一個(gè)默認(rèn)值為0，不傳時(shí)x, y以值0來(lái)運(yùn)算。傳了就以實(shí)際值計(jì)算。

又如定義一個(gè)ajax

function ajax(url, async, dataType) {
  async = async !== false
  dataType = dataType || 'JSON'
  // ...
}

自己用原生JS封裝的一個(gè)簡(jiǎn)易ajax函數(shù)，url必填，async和dataType可選，即不填時(shí)默認(rèn)同步請(qǐng)求和返回JSON格式數(shù)據(jù)。

再如定義一個(gè)矩形類

function Rectangle(width, height) {
  this.width = width || 200;
  this.height = height || 300;
}

new時(shí)不傳任何參數(shù)，也會(huì)創(chuàng)建一個(gè)默認(rèn)寬高為200*300的矩形。

無(wú)論是calc，ajax函數(shù)還是Rectangle類，我們都需要在函數(shù)體內(nèi)做默認(rèn)值的處理，如果語(yǔ)言自身處理豈不樂(lè)哉？ 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)值部分從大括號(hào)移到了小括號(hào)里，還減少了“||”運(yùn)算，函數(shù)體從此瘦身了。參數(shù)默認(rèn)值嘛，本來(lái)就應(yīng)該在定義參數(shù)的地方，這樣看起來(lái)簡(jiǎn)潔了不少。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屬性會(huì)減少，即有幾個(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í)如果沒(méi)有傳第三個(gè)參數(shù)，則會(huì)執(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ù)

以上所述就是本文的全部?jī)?nèi)容了，希望大家能夠喜歡。

您可能感興趣的文章: