ES6解构 - 解构函数参数

wayneli 发布于2019-08-26 10:29 / 2852人阅读

摘要：解构可以用在函数传递参数的过程中。以上的问题我们可以通过使用解构参数来得到解决改造成了解构参数其他代码在这个例子里面我们使用解构参数改写了函数声明，这样使用者能明确知道第三个参数是一个对象以及对象里需要的属性。

解构可以用在函数传递参数的过程中。我先先来看一下没有用到解构参数的例子，之后我们把它改造成解构参数。
一：解构参数的使用场景
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云服务器云服务器解构函数对象解构解构赋值定义函数参数

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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