7-变量解构赋值-对象

解构不仅可以用于数组,还可以用于对象。

一、变量名与属性名相同时:
let {b,a,c}  = {a:1,b:2,c:3};  //次序不同,不影响解构赋值
console.log(a,b,c)     //1 2 3
let {a,b,c}  = {arr:1,b:2,c:3};   //变量名与属性名不相同
console.log(a,b,c)   //undefined 2 3

注意点:对象的解构与数组有一个重要的不同。数组的元素是按次序排列的,变量的取值由它的位置决定;而对象的属性没有次序,变量必须与属性同名,才能取到正确的值

二、变量名与属性名不同时(指的是左侧部分):

如果变量名与属性名不一致,必须写成下面这样。

let { first: f, last: l } = { first: 'hello', last: 'world' };
console.log(f);    // 'hello'
console.log(l);    // 'world'

这实际上说明,对象的解构赋值是下面形式的简写

var { foo: foo, bar: bar } = { foo: "aaa", bar: "bbb" };

也就是说,对象的解构赋值的内部机制,是先找到同名属性,然后再赋给对应的变量。真正被赋值的是后者,而不是前者。

var { foo: baz } = { foo: "aaa", bar: "bbb" };
baz // "aaa"
foo // error: foo is not defined

上面代码中,foo是匹配的模式,baz才是变量。真正被赋值的是变量baz,而不是模式foo。

注意,采用这种写法时,变量的声明和赋值是一体的。对于let和const来说,变量不能重新声明,所以一旦赋值的变量以前声明过,就会报错。

let foo;
let {foo} = {foo: 1}; // SyntaxError: Duplicate declaration "foo"

let baz;
let {bar: baz} = {bar: 1}; // SyntaxError: Duplicate declaration "baz"

上面代码中,解构赋值的变量都会重新声明,所以报错了。不过,因为var命令允许重新声明,所以这个错误只会在使用let和const命令时出现。如果没有第二个let命令,上面的代码就不会报错。

let foo;
({foo} = {foo: 1}); // 成功

let baz;
({bar: baz} = {bar: 1}); // 成功

上面代码中,let命令下面一行的圆括号是必须的,否则会报错。因为解析器会将起首的大括号,理解成一个代码块,而不是赋值语句。

三、嵌套结构的对象
var obj = {
    arr:[
        111,
        {
            brr:222
        }
    ]
}

let {arr:[x,{brr}]}  = {arr:[111,{brr:222}]}

console.log(x,brr)   //111 222
四、默认值
let { a = true } = {}
console.log(a);    //true

let { a = true } = { a: false }
console.log(a);    //false

var {x, y = 5} = {x: 1};
x // 1
y // 5

var {x:y = 3} = {};
y // 3

var {x:y = 3} = {x: 5};
y // 5

默认值生效的条件是,对象的属性值严格等于undefined(左侧默认值优先级高);打印左侧默认值
默认值不生效的条件是,对象的属性值严格不等于undefined(左侧默认值优先级低);打印右侧值

var {x = 3} = {x: undefined};   //生效的情况
x // 3

var {x = 3} = {x: null};   //不生效的情况
x // null

总结:如果右侧对象的值是undefined那么取左侧的默认值;如果不是undefined则取右侧的值。

五、解构失败
let {a,b} = undefined
console.log(a)  //报错

let {a,b} = null
console.log(a)  //报错

let {a,b} = 1
console.log(a)  //undefiend

let {a,b} = "1"
console.log(a)  //undefiend

let {a,b} = true
console.log(a)  //undefiend
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1.数组的解构赋值 2.对象的解构赋值 3.字符串的解构赋值 4.数值和布尔值的解构赋值 5.函数参数的解构赋值 ...
    卞卞村长L阅读 4,390评论 0 0
  • 前面的话 我们经常定义许多对象和数组,然后有组织地从中提取相关的信息片段。在ES6中添加了可以简化这种任务的新特性...
    sunnyghx阅读 4,101评论 0 0
  • 基本用法 ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring...
    嘉奇呦_nice阅读 4,127评论 0 2
  • 『ES6脚丫系列』变量的解构赋值 第一章:变量的解构赋值的概念 【01】Q:什么是变量的解构赋值?有哪些方式? 吃...
    吃码小妖阅读 4,130评论 0 0
  • 数组的解构赋值 基本用法 ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destru...
    呼呼哥阅读 3,122评论 0 3