对象的解构赋值
程序员文章站
2022-07-02 09:46:54
...
解构不仅可以用于数组,还可以用于对象
var {foo,bar} = {foo:"aaa",bar:"bbb"};
foo // "aaa"
bar // "bbb"
- 1
- 2
- 3
- 1
- 2
- 3
对象的解构和数组有一个重要的不同。数组的元素是按此排序的,变量的取值由它的位置决定;而对象的属性没有次序,变量必须与属性同名,才能取到正确的值。
var {bar,foo} = {foo:"aaa",bar:"bbb"};
foo // "aaa"
bar // "bbb"
var {baz} = {foo:"aaa",bar:"bbb"};
baz // undefined
- 1
- 2
- 3
- 4
- 5
- 6
- 1
- 2
- 3
- 4
- 5
- 6
如果变量名与属性名不一致,必须写成这样:
var {foo:baz} = {foo:"aaa",bar:"bbb"};
baz // "aaa"
let obj = {first:"hello",last:"world"};
let {first:f,lats:l} = obj;
f // "hello"
l // "world"
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 1
- 2
- 3
- 4
- 5
- 6
- 7
对象的解构赋值是内部机制,是先找到同名属性,然后再赋给对应的变量。
真正被赋值的是后者,而不是前者。
var {foo:baz} = {foo:"aaa",bar:"bbb"};
baz // "aaa"
foo // error: foo is not defined
- 1
- 2
- 3
- 1
- 2
- 3
上面的代码中, foo
是匹配的模式, baz
才是变量。真正被赋值的是变量baz
,而不是模式foo
。
和数组一样,解构也可以用于嵌套解构的对象
var obj = {
p:["hello",{y:"world"}]
};
var {p:[x,{y}]} = obj;
x // "hello"
y // "world"
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 1
- 2
- 3
- 4
- 5
- 6
- 7
注意,这时p
是模式,不是变量,因此不会被赋值。
对象的解构也可以指定默认值:
var {x=3} = {};
x // 3
var {x,y=5} = {x:1};
x // 1
y // 5
var {x: y=3} = {x: 5};
y // 5
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
如果解构失败,变量的值等于undefined
var {foo} = {bar:"baz"};
foo // undefined
- 1
- 2
- 1
- 2
如果解构模式是嵌套的对象,并且子对象所在的父属性不存在,那么会报错:
// 报错
var {foo: {bar}} = {baz:"baz"};
- 1
- 2
- 1
- 2
由于数组本质是特殊的对象,因此可以对数组进行对象属性的解构:
var arr = [1,2,3];
var {0:first, [arr.length-1]:last} = arr;
first // 1
last // 3
上一篇: 对象的解构赋值
下一篇: js中解构赋值应用场景
推荐阅读
-
面向对象类空间问题以及类之间的关系
-
day21_步入百万年薪的第二十一天——面向对象初识、结构、从类名研究类、从对象研究类、logging模块进阶版
-
jQuery 源码解析(七) jQuery对象和DOM对象的互相转换
-
js中的触发事件对象event.srcElement与event.target详解
-
详解Vue改变数组中对象的属性不重新渲染View的解决方案
-
jQuery序列化form表单数据为JSON对象的实现方法
-
python学习之路-面向对象的编程
-
c4d对象怎么改变坐标? c4d移动坐标轴的教程
-
Vue唯一可以更改vuex实例中state数据状态的属性对象Mutation的讲解
-
C#面向对象设计的七大原则