ES6——Day3（对象的解构赋值）

布满荆棘的人生 2022-09-28 05:53 182阅读 0赞

解构不仅可以用于数组，也可以用于对象。对象解构赋值与数组解构赋值有什么异同呢？

（1）对象的属性没有次序，变量必须与属性同名，才能渠道正确的值；

（2）指定默认值时，对象默认值生效的条件是：对象的属性值严格等于undefined；

（3）对象的解构赋值。可以很方便将现有对象方法赋值到某个变量。

案例2-1：对象的解构赋值.html

<script type="text/traceur">
    var {name,age} = {name:"Zhangsan",age:12};
    console.log(name);   //Zhangsan
    console.log(age);     //12
    </script>

`性质1：对象解构赋值不按照顺序 案例2-2：对象解构赋值不按照顺序.html`

<script type="text/traceur">
    var {name,age,id} = {id:"007",name:"Zhangsan",age:12};
    console.log(name);  //Zhangsan
    console.log(age);     //12
    console.log(id);       //007
    //若“007”不加双引号，即可以显示为7，
    </script>

解析：（1）当“id:007”时，此时的id为数值类型，会console.log(id);为“7”；

（2）当“id:"007"”时，此时的id为字符串类型，会console.log(id);为“007”。

案例2-3：变量和属性名不一致.html

<script type="text/traceur">
    var {person_name,person_age,person_id} = {id:"007",name:"Zhangsan",age:12};
    console.log(person_name);  //undefined
    console.log(person_age);    //undefined
    console.log(person_id);       //undefined
    </script>

解析：上述案例中，person\_name与name表明变量与属性名并不匹配，会显示“错误”。

解决办法：将person\_name赋值给name即可

<script type="text/traceur">
    var {name:person_name,age:person_age,id:person_id} = {id:"007",name:"Zhangsan",age:12};
    console.log(person_name);   //Zhangsan
    console.log(person_age);    //12
    console.log(person_id);     //007
    
    let object = {first:"Hello",last:"world"};
    let {first:firstName,last:lastName} = object;
    console.log(firstName);    //Hello
    console.log(lastName);     //world
    </script>

`案例2-4：对象解构默认值.html`

<script type="text/traceur">
    var { x=3 } ={};
    console.log(x);     //3
    
    var { x,y = 5} = {x:1};
    console.log(x);    //1
    console.log(y);    //5
    
    var {message:msg="You are a person!"};
    console.log(msg);   //You are a person!
    
    </script>

案例2-5：对象解构默认值条件.html

<script type="text/traceur">
    var {x=3} = {x : undefined};
    console.log(x);    //3
    
    var {y=3} = {y : null};
    console.log(y);    //null
    </script>

总结：默认值条件：对象的属性值严格等于undefined

案例2-6：已声明变量的解构赋值.html

<script type="text/traceur">
    var x;
    ({x} = {x:1});
    console.log(x);    //1
    </script>

案例2-7：现有对象的方法.html

<script type="text/traceur">
    console.log(Math.sin(Math.PI/6));  //0.499999
    
    let {sin,cos,tan,log} = Math;
    console.log(sin(Math.PI/6));    //0.499999
    
    </script>

发表评论取消回复

表情：

评论列表（有 0 条评论，182人围观）

还没有评论，来说两句吧...

相关阅读

相关 es6 对象的解构赋值使用

用法通常用来深拷贝对象（只能拷贝对象属性是基本数据类型的，属性本身也是个对象或数组的，拷贝的是对象的指针），类似于Object.assign方法不足当需要拷

骑猪看日落/ 2023年01月02日 06:26/ 0 赞/ 175 阅读

相关 ES6——Day3（字符串的解构赋值+函数参数解构赋值）

1、字符串也可以进行解构赋值形成一个类似于“数组”的对象。案例1-1：简单的字符串（类似于“数组”） <script type="text/traceur">

旧城等待，/ 2022年09月28日 11:44/ 0 赞/ 153 阅读

相关 ES6——Day3（对象的解构赋值）

解构不仅可以用于数组，也可以用于对象。对象解构赋值与数组解构赋值有什么异同呢？（1）对象的属性没有次序，变量必须与属性同名，才能渠道正确的值；（2）指定默认值时，对象默

布满荆棘的人生/ 2022年09月28日 05:53/ 0 赞/ 183 阅读

相关 ES6～解构赋值

解构赋值：定义： ES6按照统一模式，从数组和对象中提取值，对变量进行赋值，这样被称为解构．注意： \\1.\\node.js目前還不支持解构赋值，所以

刺骨的言语ヽ痛彻心扉/ 2022年06月05日 01:53/ 0 赞/ 292 阅读

相关 ES6解构赋值

原文转自[https://www.cnblogs.com/xiaohuochai/p/7243166.html][https_www.cnblogs.com_xiaohuoch

﹏ヽ暗。殇╰゛Y/ 2022年05月11日 16:24/ 0 赞/ 305 阅读

相关 es6 解构赋值

ES6解构赋值传统的变量赋值：变量的解构赋值：数组的解构赋值: 对象的解构赋值:\`(和数组解构赋值类似)\`

短命女/ 2022年02月05日 11:13/ 0 赞/ 362 阅读

相关 es6解构赋值

解构赋值如对象解构 // es6 const electron = require('electron') const { app, Br

Myth丶恋晨/ 2021年12月23日 16:33/ 0 赞/ 355 阅读

相关 ES6 解构赋值详解：对象解构赋值、数组解构赋值

所谓的解构赋值就是：按照一定模式，从数组和对象中提取值，对变量进行赋值（先解析结构再进行赋值）。对象的解构赋值对象是通过属性名进行解构（是用的最多的解构赋值）

迈不过友情╰/ 2021年12月05日 15:09/ 0 赞/ 411 阅读

相关 ES6——解构赋值

原文链接：[小邵教你玩转ES6][ES6] 解构赋值解构赋值主要分为对象的解构和数组的解构，在没有解构赋值的时候，我们赋值是这样的 let arr = [0

迷南。/ 2021年11月04日 21:46/ 0 赞/ 483 阅读

相关 ES6解构赋值

ES6解构赋值一、什么是解构赋值二、语法 1.数组解构 2.对象解构三、注意点一、什么是解构赋值允许从数组中

客官°小女子只卖身不卖艺/ 2021年09月07日 06:10/ 0 赞/ 444 阅读