ES6之解构参数

---

ES6学习系列

---

当定义函数参数时，用解构参数代替"options"对象可以将你真正感兴趣的数据与其他命名参数列在一起，使其更可读。解构参数可以是数组模式、对象模式和混合模式，也可以使用解构语法的其他功能。

解构参数

当定义一个接受大量可选参数的JavaScript函数时，我们通常会创建一个可选对象，将额外的参数定义为这个对象的属性。

function setCookie(name, value, options) {
    options = options || {};
    let secure = options.secure,
        path = options.path,
        domain = options.domain,
        expires = options.expires;

    // 设置cookie的代码    
}

setCookie("type", "js", {
    secure: true,
    expires: 60000
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14

许多JavaScript库中都有类似的setCookie函数，而在示例函数中，name和value都是必须参数，而secure、path、domain和expires则不然，这些参数相对而言没有优先级顺序，将它们列为额外的命名参数也不合适，此时为options对象设置同名的命名属性是一个很好的选择。现在的问题是，仅仅查看函数的声明部分，无法辨识函数的预期参数，比如通过阅读函数体才能确定所有参数的情况。
如果将options定义为解构参数，则可以更清晰地了解函数预期传入的参数。解构参数需要使用对象或数组模式代替命令参数，比如

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

    // 设置cookie的代码    
}

setCookie("type", "js", {
    secure: true,
    expires: 60000
})
1
2
3
4
5
6
7
8
9

这个函数与之前示例中的函数具有相似的特性，只是现在使用解构语法代替了第3个参数来提取必要的信息，其他参数保持不变，但是对于调用setCookie函数的使用者而言，解构参数变得更清晰了。

解构参数支持默认值、混合对象和数组的解构模式及非同名变量提取出来的信息。

必须传值的解构参数

解构参数有一个奇怪的地方，默认情况下，如果代用函数时不提供被解构的参数会导致程序抛出错误。比如，在上面的setCookie函数中，不传递第三个参数，则会报错Uncaught TypeError: Cannot destructure property 'secure' of 'undefined' as it is undefined.

缺失的第三个参数，其值为undefined，而解构参数只是将解构声明应用在函数参数的一个简写方法，本质如下所示

function setCookie(name, value, options) {
    let {secure,path,domain,expires} = options;
    // 设置cookie的代码    
}
1
2
3
4

如果解构赋值表达式的右侧值为null或者undefined，则程序会报错，同理，若调用setCookie函数时不传入第3个参数，也会导致程序抛出错误。
如果解构参数是必须的，大可以忽略掉这个问题。但是如果希望将解构参数定义为可选的，那么就必须为其听默认值来解决这个问题。

function setCookie(name, value, {secure,path,domain,expires} = {}) {
    // 设置cookie的代码    
}
setCookie("type", "js");
1
2
3
4

这个示例为解构参数添加了一个新对象作为默认值，secure、path、domain、expires这些变量的值全部是undefined，这样即使不传第三个值，也不会报错。

解构参数的默认值

可以为解构参数指定默认值，就像在解构赋值语句做的那样，只需要在参数后添加等号并指定一个默认值即可。

const setCookieDefaults = {
    secure: false,
    path: "/",
    domain: "example.com",
    expires: new Date(Date.now() + 36000000)
}

function setCookie(name, value, { secure = setCookieDefaults.secure, path = setCookieDefaults.path, domain = setCookieDefaults.domain,
    expires = setCookieDefaults.expires } = setCookieDefaults) {
    console.log(secure + "," + path + "," + domain + "," + expires);
    // 设置cookie的代码    
}
// false,/,example.com,Sat Nov 05 2022 08:57:57 GMT+0800 (中国标准时间)
setCookie("type", "js");
// true,/,example.com,60000
setCookie("type", "js", {
    secure: true,
    expires: 60000
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19