对象的解构赋值

4次阅读

共计 2143 个字符,预计需要花费 6 分钟才能阅读完成。

对象的解构赋值 let {foo, bar} = {foo: “aaa”, bar: “bbb”};foo // “aaa”bar // “bbb” 对象的解构与数组有一个重要的不同。数组的元素是按次序排列的,变量的取值由它的位置决定;而对象的属性没有次序,变量必须与属性同名,才能取到正确的值。
如果变量名与属性名不一致,必须写成下面这样。
复制代码 let {foo: baz} = {foo: ‘aaa’, bar: ‘bbb’};baz // “aaa” foo // 报错:foo is not defined
let obj = {first: ‘hello’, last: ‘world’};let {first: f, last: l} = obj;f // ‘hello’l // ‘world’ 复制代码这实际上说明,对象的解构赋值是下面形式的简写
let {foo: foo, bar: bar} = {foo: “aaa”, bar: “bbb”}; 也就是说,对象的解构赋值的内部机制,是先找到同名属性,然后再赋给对应的变量。真正被赋值的是后者,而不是前者。
let {foo: baz} = {foo: “aaa”, bar: “bbb”};baz // “aaa”foo // error: foo is not defined
与数组一样,解构也可以用于嵌套结构的对象。
复制代码 let obj = {p: [
‘Hello’,
{y: ‘World’}
]};
let {p: [x, { y}] } = obj;x // “Hello”y // “World” 复制代码注意,这时 p 是模式,不是变量,因此不会被赋值。如果 p 也要作为变量赋值,可以写成下面这样。
复制代码 let obj = {p: [
‘Hello’,
{y: ‘World’}
]};
let {p, p: [x, { y}] } = obj; // 第二个 p 是模式 x // “Hello”y // “World”p // [“Hello”, {y: “World”}]复制代码另一个例子
复制代码 const node = {loc: {
start: {
line: 1,
column: 5
}
}};
let {loc, loc: { start}, loc: {start: { line}} } = node;line // 1loc // Object {start: Object}start // Object {line: 1, column: 5}复制代码上面代码有三次解构赋值,分别是对 loc、start、line 三个属性的解构赋值。注意,最后一次对 line 属性的解构赋值之中,只有 line 是变量,loc 和 start 都是模式,不是变量。
下面是嵌套赋值的例子
复制代码 let obj = {};let arr = [];
({foo: obj.prop, bar: arr[0] } = {foo: 123, bar: true});
obj // {prop:123}arr // [true]复制代码默认值复制代码 var {x = 3} = {};x // 3
var {x, y = 5} = {x: 1};x // 1y // 5
var {x: y = 3} = {};y // 3
var {x: y = 3} = {x: 5};y // 5
var {message: msg = ‘Something went wrong’} = {};msg // “Something went wrong” 复制代码默认值生效的条件是,对象的属性值严格等于 undefined。
var {x = 3} = {x: undefined};x // 3
var {x = 3} = {x: null};x // null 上面代码中,属性 x 等于 null,因为 null 与 undefined 不严格相等,所以是个有效的赋值,导致默认值 3 不会生效。
如果解构失败,变量的值等于 undefined。
let {foo} = {bar: ‘baz’};foo // undefined 如果解构模式是嵌套的对象,而且子对象所在的父属性不存在,那么将会报错。
// 报错 let {foo: {bar}} = {baz: ‘baz’}; 上面代码中,等号左边对象的 foo 属性,对应一个子对象。该子对象的 bar 属性,解构时会报错。原因很简单,因为 foo 这时等于 undefined,再取子属性就会报错,请看下面的代码。
let _tmp = {baz: ‘baz’};_tmp.foo.bar // 报错如果要将一个已经声明的变量用于解构赋值,必须非常小心。
// 错误的写法 let x;{x} = {x: 1};// SyntaxError: syntax error 上面代码的写法会报错,因为 JavaScript 引擎会将 {x} 理解成一个代码块,从而发生语法错误。只有不将大括号写在行首,避免 JavaScript 将其解释为代码块,才能解决这个问题。
// 正确的写法 let x;({x} = {x: 1}); 上面代码将整个解构赋值语句,放在一个圆括号里面,就可以正确执行。
对象的解构赋值,可以很方便地将现有对象的方法,赋值到某个变量。
let {log, sin, cos} = Math; 上面代码将 Math 对象的对数、正弦、余弦三个方法,赋值到对应的变量上,使用起来就会方便很多。
由于数组本质是特殊的对象,因此可以对数组进行对象属性的解构。
let arr = [1, 2, 3];let {0 : first, [arr.length – 1] : last} = arr;first // 1last // 3 上面代码对数组进行对象解构。数组 arr 的 0 键对应的值是 1,[arr.length – 1]就是 2 键,对应的值是 3

正文完
 0