成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

ES6解構(gòu) - 解構(gòu)函數(shù)參數(shù)

wayneli / 2890人閱讀

摘要：解構(gòu)可以用在函數(shù)傳遞參數(shù)的過(guò)程中。以上的問(wèn)題我們可以通過(guò)使用解構(gòu)參數(shù)來(lái)得到解決改造成了解構(gòu)參數(shù)其他代碼在這個(gè)例子里面我們使用解構(gòu)參數(shù)改寫(xiě)了函數(shù)聲明，這樣使用者能明確知道第三個(gè)參數(shù)是一個(gè)對(duì)象以及對(duì)象里需要的屬性。

解構(gòu)可以用在函數(shù)傳遞參數(shù)的過(guò)程中。我先先來(lái)看一下沒(méi)有用到解構(gòu)參數(shù)的例子，之后我們把它改造成解構(gòu)參數(shù)。
一：解構(gòu)參數(shù)的使用場(chǎng)景
1: 沒(méi)有用到解構(gòu)參數(shù)

function setCookie(name, value, options) {
    options = options || {};
    let secure = options.secure,
        path = options.path,
        domain = options.domain,
        expires = options.expires;
    //其他代碼
}

setCookie("type", "js", {secure: true, path: "/example", domain: "test", expires: 60});

我們有個(gè)函數(shù)，它的第三個(gè)參數(shù)是一個(gè)對(duì)象類型；但是只是查看函數(shù)的聲明部分，我們無(wú)法得知這一點(diǎn)，這就會(huì)給使用者帶來(lái)不便：使用者無(wú)法確定第三個(gè)參數(shù)是一個(gè)對(duì)象類型，無(wú)法確定這個(gè)對(duì)象里面需要哪些屬性。以上的問(wèn)題我們可以通過(guò)使用解構(gòu)參數(shù)來(lái)得到解決：

2: 改造成了解構(gòu)參數(shù)

setCookie("type", "js", 
    {secure: true, path: "/example", domain: "test", expires: 60});

function setCookie(name, value, {secure, path, domain, expires}) {
    console.log(expires); // 60
    //其他代碼
}

在這個(gè)例子里面我們使用解構(gòu)參數(shù)改寫(xiě)了函數(shù)聲明，這樣使用者能明確知道第三個(gè)參數(shù)是一個(gè)對(duì)象以及對(duì)象里需要的屬性。

二：解構(gòu)參數(shù)必須傳參
解構(gòu)參數(shù)與一般的參數(shù)不同點(diǎn)在于，它是一個(gè)必須要傳值的參數(shù)，如果不傳，則會(huì)引發(fā)程序報(bào)錯(cuò)：

function setCookie(name, value, {secure, path, domain, expires}) {
    console.log(expires);
    //其他代碼
}

setCookie("type", "js"); // Uncaught TypeError: Cannot destructure property `secure` of "undefined" or "null".

原因是為什么呢？是因?yàn)榻鈽?gòu)參數(shù)存在的函數(shù)，當(dāng)我們?cè)谡{(diào)用setCookie()的時(shí)候，函數(shù)內(nèi)部其實(shí)是這樣的：

function setCookie(name, value, options) {

    let {secure, path, domain, expires} = options; //這是引擎背后做的

    console.log(expires);
    //其他代碼
}

用于結(jié)果的對(duì)象如果是null或者undefined，則程序會(huì)報(bào)錯(cuò)，所以當(dāng)我們不給解構(gòu)參數(shù)傳值的時(shí)候，會(huì)引發(fā)了程序報(bào)錯(cuò)。
為了解決以上問(wèn)題，我們需要在定義函數(shù)的時(shí)候，給解構(gòu)參數(shù)提供默認(rèn)值：

function setCookie(name, value, {secure, path, domain, expires} = {}) {}

setCookie("id", "mike"); //有了默認(rèn)值，便不會(huì)報(bào)錯(cuò)

三：給解構(gòu)參數(shù)屬性設(shè)置默認(rèn)值
上面的例子，我們通過(guò){secure, path, domain, expires} = {}給整個(gè)解構(gòu)參數(shù)設(shè)置了默認(rèn)值。我們也可以給參數(shù)里面的每個(gè)屬性設(shè)置默認(rèn)值：

let defaultOptions = {
    secure: true,
    path: "/example",
    domain: "test",
    expires: 60
};

function setCookie(name, value, {
    secure = defaultOptions.secure,
    path = defaultOptions.path,
    domain = defaultOptions.domain,
    expires = defaultOptions.expires
} = defaultOptions) {
    console.log(secure); //true
    console.log(path); //example
    console.log(domain);//test
    console.log(expires);//30
}

setCookie("id", "mike", {path: "/example", domain: "test", expires: 30});

給解構(gòu)參數(shù)的屬性設(shè)置默認(rèn)值和一般對(duì)象的解構(gòu)設(shè)置默認(rèn)值是一樣的，也是在用等號(hào)=給屬性賦值。
這里特別要注意的是，如果只是單純地給解構(gòu)參數(shù)的屬性設(shè)置默認(rèn)值，而不給整個(gè)解構(gòu)參數(shù)設(shè)置默認(rèn)值，依然不能解決類似于setCookie("id", "mike")這樣不傳參所引發(fā)的代碼報(bào)錯(cuò)問(wèn)題，所以不要忘了給整個(gè)解構(gòu)參數(shù)設(shè)置默認(rèn)值（也就是這個(gè)例子里面的
= defaultOptions)。

以上，就是解構(gòu)函數(shù)參數(shù)的內(nèi)容。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/106250.html

相關(guān)文章

  • ES6 學(xué)習(xí)筆記（一）let，const和解構(gòu)賦值

    摘要：另外對(duì)于已經(jīng)聲明的變量進(jìn)行解構(gòu)賦值時(shí)，要非常小心。因此在行首加，將其強(qiáng)制轉(zhuǎn)化為表達(dá)式執(zhí)行。由于和無(wú)法轉(zhuǎn)為對(duì)象，所以對(duì)它們進(jìn)行解構(gòu)賦值，都會(huì)報(bào)錯(cuò)。 let和const let和const是es6新增的兩個(gè)變量聲明關(guān)鍵字，與var的不同點(diǎn)在于： （1）let和const都是塊級(jí)作用域，在{}內(nèi)有效，這點(diǎn)在for循環(huán)中非常有用，只在循環(huán)體內(nèi)有效。var為函數(shù)作用域。 （2）使用let和con...

    iOS122 評(píng)論0 收藏0

  • es6 - 解構(gòu)賦值

    摘要：比如上面展示的情況都是可以聯(lián)合使用的比如對(duì)象的解構(gòu)賦值對(duì)象的解構(gòu)賦值是基于屬性的。當(dāng)給已存在的變量解構(gòu)賦值時(shí)，注意加這是由于如果不加會(huì)把左邊看成一個(gè)代碼塊，會(huì)報(bào)錯(cuò)。注意事項(xiàng)數(shù)組的解構(gòu)賦值中，使用的變量必須放在最后。 解構(gòu)賦值 解構(gòu)賦值是一個(gè)聽(tīng)起來(lái)比較高大上的特性，但按我的理解，它就是一種語(yǔ)法糖。它并沒(méi)有賦予js更強(qiáng)大的能力，只是讓賦值操作更加的靈活，效率。 在es6之前，賦值操作需要=...

    DirtyMind 評(píng)論0 收藏0

  • ES6系列---解構(gòu)

    摘要：的解構(gòu)特性，可以簡(jiǎn)化這項(xiàng)工作。必須傳值的解構(gòu)參數(shù)如果調(diào)用函數(shù)時(shí)不提供被解構(gòu)的參數(shù)會(huì)導(dǎo)致程序拋出錯(cuò)誤程序報(bào)錯(cuò)缺失的第三個(gè)參數(shù)，其值為。 在編碼過(guò)程中，我們經(jīng)常定義許多對(duì)象和數(shù)組，然后有組織地從中提取相關(guān)的信息片段。ES6的解構(gòu)特性，可以簡(jiǎn)化這項(xiàng)工作。解構(gòu)是一種打破數(shù)據(jù)結(jié)構(gòu)，將其拆分為更小部分的過(guò)程。 未使用解構(gòu)的做法 let options = { repeat: true, ...

    baoxl 評(píng)論0 收藏0

  • ES6學(xué)習(xí) 第二章 變量的解構(gòu)賦值

    摘要：前言前言該篇筆記是第二篇變量的解構(gòu)賦值。這一章原文鏈接變量的解構(gòu)賦值解構(gòu)賦值解構(gòu)賦值允許按照一定模式，從數(shù)組和對(duì)象中提取值，對(duì)變量進(jìn)行賦值，這被稱為解構(gòu)。對(duì)象的解構(gòu)賦值是根據(jù)對(duì)象值進(jìn)行匹配。前言該篇筆記是第二篇 變量的解構(gòu)賦值。這一章原文鏈接： 變量的解構(gòu)賦值解構(gòu)賦值ES6 允許按照一定模式，從數(shù)組和對(duì)象中提取值，對(duì)變量進(jìn)行賦值，這被稱為解構(gòu)（Destructuring）。解構(gòu)賦值是對(duì)賦值運(yùn)...

    番茄西紅柿 評(píng)論0 收藏2637

  • ES6學(xué)習(xí) 第二章 變量的解構(gòu)賦值

    摘要：前言該篇筆記是第二篇變量的解構(gòu)賦值。這一章原文鏈接變量的解構(gòu)賦值解構(gòu)賦值允許按照一定模式，從數(shù)組和對(duì)象中提取值，對(duì)變量進(jìn)行賦值，這被稱為解構(gòu)。對(duì)象的解構(gòu)賦值是根據(jù)對(duì)象值進(jìn)行匹配。 前言該篇筆記是第二篇 變量的解構(gòu)賦值。 這一章原文鏈接： 變量的解構(gòu)賦值解構(gòu)賦值ES6 允許按照一定模式，從數(shù)組和對(duì)象中提取值，對(duì)...

    番茄西紅柿 評(píng)論0 收藏2637

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<