ES6解構 - 解構函數參數

wayneli 發布于2019-08-26 10:29 / 2889人閱讀

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

解構可以用在函數傳遞參數的過程中。我先先來看一下沒有用到解構參數的例子，之后我們把它改造成解構參數。
一：解構參數的使用場景
1: 沒有用到解構參數

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});

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

2: 改造成了解構參數

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

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

在這個例子里面我們使用解構參數改寫了函數聲明，這樣使用者能明確知道第三個參數是一個對象以及對象里需要的屬性。

二：解構參數必須傳參
解構參數與一般的參數不同點在于，它是一個必須要傳值的參數，如果不傳，則會引發程序報錯：

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

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

原因是為什么呢？是因為解構參數存在的函數，當我們在調用setCookie()的時候，函數內部其實是這樣的：

function setCookie(name, value, options) {

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

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

用于結果的對象如果是null或者undefined，則程序會報錯，所以當我們不給解構參數傳值的時候，會引發了程序報錯。
為了解決以上問題，我們需要在定義函數的時候，給解構參數提供默認值：

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

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

三：給解構參數屬性設置默認值
上面的例子，我們通過{secure, path, domain, expires} = {}給整個解構參數設置了默認值。我們也可以給參數里面的每個屬性設置默認值：

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});

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

以上，就是解構函數參數的內容。

云服務器 GPU云服務器解構函數對象解構解構賦值定義函數參數

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/106250.html

ES6 學習筆記（一）let，const和解構賦值

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

iOS122 2019-08-23 15:29 評論0 收藏0
es6 - 解構賦值

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

DirtyMind 2019-08-26 11:45 評論0 收藏0
ES6系列---解構

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

baoxl 2019-08-20 18:52 評論0 收藏0
ES6學習第二章變量的解構賦值

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

番茄西紅柿 2021-11-24 09:38 評論0 收藏2637
ES6學習第二章變量的解構賦值

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

番茄西紅柿 2021-11-24 09:38 評論0 收藏2637