es6解构赋值是浅拷贝（es6对象解构赋值作为参数）

图片授权基于CC0协议

复习了一下 ES6 变量的解构赋值。

定义：

在数组和对象中提取值，把「左边的变量」按照一定的模式来赋值。

基本用法：

let arr = [10,20,30];let [a,b,c] = arr;console.log(a,b,c);//10,20,30

再看一个案例：

let obj = { foo: \\\'aaa\\\', bar: \\\'bbb\\\' };let { foo, bar } = obj;console.log(foo,bar);//aaa,bbb

这两个案例很简单，代码贴出来是因为我误会了一件事，我一直以为「解构赋值」左边用的是 {} 花括号，其实不是的，对象解构要解构到对象结构上，数组解构到数组结构上。也就是说，「解构源值」和「目标变量」类型要一致。

赋值模式

我是这样理解「解构赋值模式」的，解构赋值和我们平时用的赋值方法是相反的，需要颠覆一下赋值的理解顺序。

function bar(){    return {        x:4,        y:5,        z:6,    }}var {x:bam,y:baz,z:bap} = bar();console.log(bam,baz,bap);//4,5,6console.log(x,y,z);//x is not defined

平时的变量赋值中，x 是变量，4 赋值给 x;

x = 4; //变量 = 值

在解构赋值中：bam 是变量，x 是源值

x = bam; //源值 = 赋值的目标变量

要习惯这个反转，需要一点点时间…

对象表达式的 () 包含

let a,b,c;function bar(){    return {        a:4,        b:5,        c:6,    }}({a,b,c} = bar())console.log(a,b,c);//4,5,6

对于对象解构形式来说，如果省略了 var/let/const 声明符，就需要我们把整个表达式用 (…) 包起来。如果不这样处理的话，语句左侧的 {…} 作为语句中的第一个元素就会被当作是一个块语句而不是一个对象。

变量交换

let x = 10, y = 20;[y,x] = [x,y]console.log(20,10);

重复赋值

let {a:x,a:y} = {a:1};console.log(x,y);

「嵌套解构」「解构重组」这两种就不举例子了。因为目前项目中没有遇到过，怕误导…

es6解构赋值是浅拷贝（es6对象解构赋值作为参数）

相关推荐

面向切面编程有什么好处

联想新季上市大促销，联想工作站、服务器热销巨额优惠，抢先购买

手机厂商反复跳屏就死了吗？

3分钟完成数千行数据统计！办公室老板必须知道的这4个秘诀别错过

发表回复