ES6 -- 解构赋值的理解与应用

最新推荐文章于 2024-08-22 20:42:51 发布

BetterTm

最新推荐文章于 2024-08-22 20:42:51 发布

阅读量857

点赞数 3

分类专栏： ES6 文章标签： es6

本文链接：https://blog.csdn.net/qq_43441476/article/details/105550489

版权

ES6 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文介绍了ES6中的解构赋值，包括数组解构和对象解构的使用方法。数组解构按顺序赋值，对象解构根据键匹配。解构不成功时，变量默认为undefined。通过实例展示了解构赋值如何简化获取对象和数组中值的过程，特别是对于深层解构的优势。此外，解构赋值还可应用于迭代器、函数参数和对象。建议查阅MDN文档以获取更多详细信息。

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

首先简单的了解下如何使用

1. 数组解构

{
    let arr = ["a",true,"c",0] 
    let [ra,rb,...rc] = arr;  //按顺序读取
    console.log(ra,rb,rc)  //"a", true, ["c",0]
}

2. 对象解构

{
    let obj = {a:"a", b:2, c:true}
    let {
         a, //a相当于a:a（ES6特性）
         b:newb, //也就是说，从obj中找b键的值，把值的赋给newb键,
         c:c
    } = obj;  
    console.log(a,newb,c) //"a", 2, true
}

需要注意的是：

数组解构是按顺序解构，对象会根据键来查找。
展开语法（ …rc 如上数组解构）两者都可以使用，分别返回剩余数据的数组/对象。
如果解构不成功，变量的是会默认为 undefined 。

例子

通过一个例子说明下，我们先新建一个 商品信息

var goods = {
     title: '商品，认真学，哈哈',
     cata:[
         {
            id1: {
                id11:11
            },
         }, 
         { id2 : 20 }, 
        { id10: 100}, 
    ],
    price:100
};

如果我们想要拿里面的值，

传统方法： 我们会将对象的第数组一个一个取值，就像这样

let submitObj = {}; 
submitObj.title = goods.title
submitObj.id1   = goods.cata[0].id1.id11
submitObj.id2   = goods.cata[1].id2
submitObj.price = goods.price

解构： Emmm，我们来试试

let submitObj = {}; 
({ // 采用无声赋值，因为submitObj在先前已经声明过了，
  // 必须带小括号是因为，js会把小括号识别为代码块，带上小括号会将语句转变为表达式，
   title:submitObj.title, 
   cata:[ 
       {
           id1:{ 
               id11:submitObj.id11 
           } 
       }, 
       {id2:submitObj.id2},
       ...
       submitObj.objId  //获取其余的内容
   ], 
   price:submitObj.price
} = goods);

使用解构赋值，我们可以一目了然变量间对应关系。不知道你有没有发现，我们只需要将要解构数组/对象复制后，稍加修改，就可以成功解构，不需要自己一个个去找变量的层次关系，也就是说，我们只需要关心传统方法等号左侧层次关系，不需要关心等号右侧的层次关系，这在深层解构中，会有一定的优势，这也是解构的好处之一。

当然，解构还可以在迭代器、函数、对象中使用，在后续遇到会继续更新。
更多的属性可以直接前往

MDN https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

菜鸟弱鸡，持续更新，不喜请喷，随后订正