ES6 结构赋值、模板字符串、 Object.assign() 浅拷贝

最新推荐文章于 2024-04-01 00:00:00 发布

PanDa____

最新推荐文章于 2024-04-01 00:00:00 发布

阅读量437

点赞数

分类专栏： ES6 文章标签： javascript 前端 jquery es6

原文链接：https://sgdygb.blog.csdn.net/article/details/125002916,https://blog.csdn.net/weixin_60297362/article/details/122652156

版权

ES6 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

需求：两个表格除了第一条数据不一样剩下的都是一样数据

解构赋值

解构赋值是对赋值运算符的扩展

示例一：

<script>
    // 同时声明多个变量并赋值
    let a = 1, b = 2;
    console.log(a, b)
 
    // ES6声明并赋值写法
    let [c, d] = [3, 4]
    console.log(c, d)
</script

输出结果：

示例二：

  let [c, d] = [[{ aaa: 1, bbb: 2 }], [{ aaa: 1, bbb: 2 }]];

                c.unshift({ccc:0});
                d.unshift({ddd:-1});
                console.log(c,d)

输出结果：

模板字符串

模板字符串相当于加强版的字符串，可以用来定义多行字符串，还可以在字符串中加入变量或者是表达式，用反引号（`）标识

模板字符串（template string）是增强版的字符串，。它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。

演示如下：

示例一：

<script>
    // 多行字符串
    let a = `窗前明月光
    床下鞋两双`;
    console.log(a);
 
    // 字符串中加入变量
    let b = "李太白";
    let c = `作者：${b}`;
    console.log(c);
 
    // 字符串中调用函数
    function x(){
        return "地雷埋下土";
    }
    let d = `${x()},双双入黄土`
    console.log(d);
</script>

输出结果：

示例二：

 let html = `<i class='addSiteHelpIcon ml8' data-tooltip-content=#tooltips-1></i>`;
     html += `<div class=tooltip_templates style = display:none>`;
     html += `<div id=tooltips-1>系统分配的默认支持邮箱，发往此地址的邮件将被转化为工单</div></div >`;

let defaultData = { "username": `支持邮箱${html} `, 
   "email": "<div class=forFlex><span>XXXX888@miduoke.com </span><i class=APIKeyIcon onclick=copyText(this)></i></div>" };

输出结果：

Object.assign() 浅拷贝

对象拷贝，简而言之就是将对象再复制一份，但是，复制的方法不同将会得到不同的结果。比如直接给新变量赋值为一个对象：

let [a, b] = [[],[]];
 $.ajax({
            type: 'get',
            async: false,
            url: '../../asset/libs/demo1.json',
            success: function (e) {
                
                console.log(e)

                let html = `<i class='addSiteHelpIcon ml8' data-tooltip-content=#tooltips-1></i>`;
                html += `<div class=tooltip_templates style = display:none>`;
                html += `<div id=tooltips-1>系统分配的默认支持邮箱，发往此地址的邮件将被转化为工单</div></div >`;

                let defaultData = { "username": `支持邮箱${html} `, "email": "<div class=forFlex><span>XXXX888@miduoke.com </span><i class=APIKeyIcon onclick=copyText(this)></i></div>" };

                [a,b] = [e.data,e.data];
               

                a.unshift(defaultData);
                console.log(a);

                b.unshift({ "email": "米多客企业版服务器" });
                console.log(b);
}
})

输出结果：

从输出结果可以看到，我明明改变的是新变量的值，但是原始对象的属性也改变了。

这是因为，当创建 a和b变量时，它在堆内存中开辟了一块空间存储对象的内容。而当原始e 直接赋值为 a和b 时，a和b 并不会再重新开辟一块堆内存，而是e跟 a和b 说我把我这内存空间存储的对象的地址给你，这个地址存在栈内存中，你通过栈内存的地址找到堆内存里对象的内容，咱们共用就完事了。所以说， e 和 a、b 指向的都是同一块内容，不管谁改了对象的内容，别人再访问都是改过之后的了。

解决办法：深拷贝与浅拷贝，这里只说浅拷贝

Object.assign() 浅拷贝

1.用Js实现浅拷贝

var obj = {
	id:1,
	name:'Andy',
	msg: {
		age:18
	}
}

var newObj = {}
for(var key in obj) {
	//key是当前属性名， obj[k]是当前属性值
	newObj[key] = obj[key]
}

console.log(newObj)

输出结果：

2. 浅拷贝语法糖

ES6新增方法assign可以快速实现浅拷贝

2.1 写法

Object.assign(target,...sources)

示例一：

target：要拷贝给谁
source：要拷贝的对象

var obj = {
	id:1,
	name:'Andy',
	msg: {
		age:18
	}
}

var newObj = {}
Object.assign(newObj,obj)  //把obj浅拷贝给newObj

示例二：【也是最开始两张表格的截图数据来源，分别将变量a、变量b 给layui table 调用】

 let [a, b] = [[],[]];
        $.ajax({
            type: 'get',
            async: false,
            url: '../../asset/libs/demo1.json',
            success: function (e) {
                console.log(e)
                let html = `<i class='addSiteHelpIcon ml8' data-tooltip-content=#tooltips-1></i>`;
                html += `<div class=tooltip_templates style = display:none>`;
                html += `<div id=tooltips-1>系统分配的默认支持邮箱，发往此地址的邮件将被转化为工单</div></div >`;

                let defaultData = { "username": `支持邮箱${html} `, "email": "<div class=forFlex><span>XXXX888@miduoke.com </span><i class=APIKeyIcon onclick=copyText(this)></i></div>" };

               
                Object.assign(a, e.data) 
                Object.assign(b, e.data) 

                a.unshift(defaultData);
                console.log(a);

                b.unshift({ "email": "米多客企业版服务器" });
                console.log(b);
 
            }
        })

输出结果：