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);
        「嵌套解构」「解构重组」这两种就不举例子了。因为目前项目中没有遇到过,怕误导…

        推荐阅读:
        Vue 如何调试源码
        「虚拟DOM」是怎样生成的?

        JavaScript 性能测试


        参考资料:

        《Vue.js源码全方位深入解析》

        http://es6.ruanyifeng.com/#docs/destructuring

        原创文章,作者:小道研究,如若转载,请注明出处:https://www.sudun.com/ask/34478.html

        Like (0)
        小道研究的头像小道研究
        Previous 2024年4月13日
        Next 2024年4月13日

        相关推荐

        发表回复

        您的邮箱地址不会被公开。 必填项已用 * 标注