对象的解构赋值（嵌套对象的解构赋值、剩余运算符在对象的解构赋值中的使用、解构默认值）

最新推荐文章于 2024-02-02 22:00:00 发布

正在修炼web的小芮

最新推荐文章于 2024-02-02 22:00:00 发布

阅读量408

点赞数

分类专栏： js 文章标签： javascript

本文链接：https://blog.csdn.net/m0_71814235/article/details/126230042

版权

js 专栏收录该内容

42 篇文章 0 订阅

订阅专栏

本文介绍了JavaScript中对象的解构赋值，包括嵌套对象的解构、剩余运算符的使用以及解构默认值。通过示例展示了如何匹配和赋值对象属性，以及如何利用剩余运算符收集未指定的属性。同时，讨论了在解构时如何为未赋值的属性设置默认值。

摘要由CSDN通过智能技术生成

与数组一样，解构也可以用于嵌套结构的对象。对象嵌套解构赋值模式要匹配。等号两边的模式相同。

 {
            // 嵌套对象的解构赋值
            let obj = {
                p: [
                    'hello',
                    {
                        y:'world'
                    }
                ]
            };
            // 模式匹配
            // p 此刻的这个p是属性，不是变量
            let {p:[x,{y}]} = obj;
            console.group('嵌套对象的解构赋值');
            console.log(x);
            console.log(y);

        }

console输出效果

注意，这时p是模式，不是变量，因此不会被赋值。如果p也要作为变量赋值，可以写成下面这样。

  {
            // 嵌套对象的解构赋值
            let obj = {
                p: [
                    'hello',
                    {
                        y:'world'
                    }
                ]
            };
            // 模式匹配
             // p 此刻的这个p是变量
            let {p, p:[x,{y}]} = obj;
            console.group('嵌套对象的解构赋值');
            console.log(p);
            console.log(x);
            console.log(y);

        }

console输出效果

剩余运算符在对象的解构赋值中的使用

 {
            // 剩余运算符在对象的解构赋值中的使用
            // ...

            // ...c  把对象中的 剩余部分，给它全部放置到 变量c中存储起来了
            let {a,b,...c}= {a:10,b:20,c:30,d:40};
            console.log(a);
            console.log(b);
            console.log(c);


        }

console输出效果

解构默认值

let {a=10} = {a:3};
            // 这时候，a上的10，被3给覆盖掉了
            console.log(a);

            let {x:x1=100, y:y1=200} = {x:10, y:20}
            console.log(x1);
            console.log(y1);

console输出效果