es6之解构赋值

2020-04-24 22:57:04 阅读：230 来源： 互联网

标签：es6 const name 18 age 解构 bokeyuan 赋值

1.一般解构

 const person = {
      name: "yaya",
      age: 18,
      city:"郑州"
    }
    // 当从对象中解构时用{}。从数组中解构时用[]
    // {属性名1,属性名2...} = 从哪里结构
    const {name, age, city}  = person
    console.log(name, age, city)    //yaya 18 郑州

2.当要解构的属性在对象中的对象中时，一定要手动到属性所在的外层

    // 对象嵌套
    const person2 = {
      name: "yaya",
      age: 18,
      city:"郑州",
      social:{
        weibo:"yatingFeng",
        bokeyuan:"yaya003"
      }
    }
    const {weibo,bokeyuan} = person2.social
    console.log(weibo,bokeyuan)   //yatingFeng yaya003

3.同时解构对象中的属性和对象中的对象中的属性

  const person2 = {
      name: "yaya",
      age: 18,
      city:"郑州",
      social:{
        weibo:"yatingFeng",
        bokeyuan:"yaya003"
      }
    }
    const {name,social:{bokeyuan}} = person2
    console.log(name,bokeyuan)  //yaya yaya003

4.解构的同时重命名

 const person2 = {
      name: "yaya",
      age: 18,
      city:"郑州",
      social:{
        weibo:"yatingFeng",
        bokeyuan:"yaya003"
      }
    }
    const {name:myName,social:{bokeyuan:boke}} = person2
    console.log(myName,boke)  //yaya yaya003

5.当解构的属性不存在时：为undefined，

当设置默认值：若属性不存在时，返回默认值；属性存在时，返回属性对应的值

  const person2 = {
      // name: "yaya",
      age: 18,
      city:"郑州",
      social:{
        weibo:"yatingFeng",
        bokeyuan:"yaya003"
      }
    }
    const {name:myName="牙牙",social:{bokeyuan:boke}} = person2
    console.log(myName,boke)  //牙牙 yaya003

数组的用法与对象相同，只是将{}换为[]

数组的应用场景：一般拿到的是一个字符串，将这个字符串分割成数组，在从数组中解构赋值

  　const info = "亚婷,18,0366"
    const infoArr = info.split(',')   //["亚婷", "18", "0366"]
    const [name, age, id] = infoArr
    console.log(name, age, id)    //亚婷 18 0366

这里特别提出，用数组互换两个变量的值比较常用

之前互换两个值一般引用中间变量temp

这里可以很方便的解决：

    let a = 1;
    let b = -1;
    [a, b] = [b, a];
    console.log(a,b)  //-1 1

标签：es6,const,name,18,age,解构,bokeyuan,赋值
来源： https://www.cnblogs.com/yaya-003/p/12770718.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

es6之解构赋值