亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

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

wayneli / 2950人閱讀

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

解構(gòu)可以用在函數(shù)傳遞參數(shù)的過程中。我先先來看一下沒有用到解構(gòu)參數(shù)的例子，之后我們把它改造成解構(gòu)參數(shù)。
一：解構(gòu)參數(shù)的使用場景
1: 沒有用到解構(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});

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

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òu)參數(shù)改寫了函數(shù)聲明，這樣使用者能明確知道第三個參數(shù)是一個對象以及對象里需要的屬性。

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

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

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

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

function setCookie(name, value, options) {

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

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

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

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

setCookie("id", "mike"); //有了默認(rèn)值，便不會報錯

三：給解構(gòu)參數(shù)屬性設(shè)置默認(rèn)值
上面的例子，我們通過{secure, path, domain, expires} = {}給整個解構(gòu)參數(shù)設(shè)置了默認(rèn)值。我們也可以給參數(shù)里面的每個屬性設(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)值和一般對象的解構(gòu)設(shè)置默認(rèn)值是一樣的，也是在用等號=給屬性賦值。
這里特別要注意的是，如果只是單純地給解構(gòu)參數(shù)的屬性設(shè)置默認(rèn)值，而不給整個解構(gòu)參數(shù)設(shè)置默認(rèn)值，依然不能解決類似于setCookie("id", "mike")這樣不傳參所引發(fā)的代碼報錯問題，所以不要忘了給整個解構(gòu)參數(shù)設(shè)置默認(rèn)值（也就是這個例子里面的
= defaultOptions)。

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

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

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/106250.html

相關(guān)文章

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

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

    iOS122 評論0 收藏0

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

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

    DirtyMind 評論0 收藏0

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

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

    baoxl 評論0 收藏0

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

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

    番茄西紅柿 評論0 收藏2637

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

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

    番茄西紅柿 評論0 收藏2637

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<