1.使用先声明后赋值
let obj={a:1,b:2}
let a,b//此处先声明了变量
({a,b}=obj)//使用先声明变量,后用结构赋值,就需要在外面加个(),不加就报错
console.log(a,b);//打印赋值后的变量
查看结果
2.直接声明赋值
let obj={a:1,b:2}
let {a,b}=obj//这里是直接声明,并且赋值,就不需要外层的()
console.log(a,b);
结果是和第一个完全相同的
3.注意点一
let obj={a:1,b:2}
let a,b//此处先声明了变量
let {a,b}=obj //然后在解构赋值的时候又重新用let声明,这会报错!!!
//因为es6版本的let是不允许声明两个同一变量的。
console.log(a,b);//打印赋值后的变量
注意点二
let obj={a:1,b:2}
let a,b//我在这里先声明了变量
({a,b:3}=obj)//然后我在这里给变量b赋值,它不会覆盖反而会报错
console.log(a,b);//我们来看看结果
它这里说我破坏了分配分配目标
4.结构赋值是浅拷贝还是深拷贝呢?
obj={
a:{one:1},
b:{two:2},
c:1,
d:2
}
let {a,b,c,d}=obj//我们用解构赋值将obj的嵌套赋值给左边
console.log(a,b,c,d);//我们来打印一下
c=6//我们将左边的c改为6
console.log(c,obj.c);//我们打印一下,左边c和对象中的c比较一下
来看下普通变量的结果:
c原来是1,我们将其改为了6,原obj对象还是1没变,但真正能证明是浅拷贝还是深拷贝还得看,对象里的嵌套对象,改变是否会影响
obj={
a:{one:1},
b:{two:2},
c:1,
d:2
}
let {a,b,c,d}=obj//我们用解构赋值将obj的嵌套赋值给左边
console.log(a.one,obj.a.one);//先打印原来a对象的值和obj.a对象的one的值
a.one=6//这里将a进行修改,看看能否影响obj对象
console.log(a.one,obj.a.one);//再查看是否有修改
看结果,改变左边的对象里的值,很明显obj对象中的a对象的值也跟着改了,由此得解构赋值也是浅拷贝