共计 1356 个字符,预计需要花费 4 分钟才能阅读完成。
什么是解构?
按照一定的模式从数组或者对象中取值,对变量进行赋值的过程称为「解构」
在 ES5 中,为变量赋值只能直接指定值:
var a=1,b=2,c=3
a; // 1
b; // 2
c; // 3
但是在 ES6 中,我们可以被允许写成:
var [a,b,c]=[1,2,3];
a; // 1
b; // 2
c; // 3
ES6 中可以很明显看出来,我们可以在数组中取数据,按照位置的对应关系对变量赋值。
[默认值]
解构赋值允许使用默认值
var [foo = true] = [];
foo; // true
[x,y = 'b'] = ['a']
x; // "a"
y; // "b"
[x,y = 'b'] = ['a','c']
x; // "a"
y; // "c"
ES6 内部使用的是严格相等运算符 (===) 判断一个位置是否有值。所以,如果一个数组成员不严格等于 undefind,默认值是不会生效的。
var [x = 1] = [undefined];
x; // 1
null == undefined // true
var [x = 1] = [null];
x; // null
上述代码中,一个数组成员是 null, 因此默认值不生效。因为 null 不严格等于 undefined。
function f(){console,log('aaa');
}
let [x = f()] = [1]; // undefined , 不执行 f()
x; // 1
对象的解构赋值
var {foo,bar}={foo:"aaa",bar:"bbb"};
foo; // "aaa"
bar; // "bbb"
对象的解构赋值和数组有一个不同,数组的元素是按次序排列的,变量的取值由它的位置决定;而对象的属性没有次序,变量必须与属性同名,才能取到正确的值。
var {laf} = {foo:"aaa",bar:"bbb"};
laf; // undefined;
在上面代码中,变量没有对应的同名属性,导致取不到值,最后等于 undefind。
实际上,对象的解构赋值是以下形式的简写。
var {foo: foo, bar: bar} = {foo:"aaa", bar:"bbb"}
实际上,在对象的解构赋值的内部机制,是先找到同名属性,然后在赋值给对应的变量。真正被赋值的是后者,而不是前者。
var {foo : bar} = {foo : "aaaa"};
foo; // foo is not defined
bar; // "aaaa"
采用这种写法是,变量的声明和赋值都是一体的。对于 let 和 const 而言,变量不能重新声明,所以一旦赋值的变量以前声明过,就会报错。
let foo;
let {foo}={foo:'1'}
// Uncaught SyntaxError: Identifier 'foo' has already been declared
所以不能重复 let 声明:
let foo;
({foo} = {foo:1})
和数组一样,解构也可以用于嵌套解构的对象。
var obj={
p:[
"hello",
{y:"world"}
]
}
对象的解构也可以制定默认值。
var {x,y = 5} = {x:1};
x; // 1
y; // 5
默认值生效条件是,对象属性严格不等于 undefined
var {x = 3} = {x: undefined};
x; // 3
var {x = 3} = {x:null};
x; // null
如果解构模式是嵌套的对象,而且子对象所在的父属性不存在,则会报错
var {foo : {bar}} = {baz:'baz'};
正文完
发表至: javascript
2019-06-05