需求:两个表格 除了第一条数据不一样 剩下的都是一样数据
解构赋值
解构赋值是对赋值运算符的扩展
示例一:
<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);
}
})
输出结果:
参考文献:JavaScript深拷贝与浅拷贝_故里有长安丶丶的博客-CSDN博客_js深拷贝和浅拷贝文章目录一、理解二、浅拷贝1.用Js实现浅拷贝2. 浅拷贝语法糖2.1 写法2.3 应用三、深拷贝用Js实现深拷贝一、理解浅拷贝:只是拷贝一层,更深层次对象级别的只拷贝了地址深拷贝:层层拷贝,每一级别的数据都会拷贝二、浅拷贝1.用Js实现浅拷贝var obj = {id:1,name:'Andy',msg: {age:18}}var newObj = {}for(var key in obj) {//key是当前属性名, obj[k]是当前属性值nehttps://blog.csdn.net/weixin_60297362/article/details/122652156快速入门ES6语法(ECMAScript 6)_小乘字节的博客-CSDN博客🍎前言ECMAScript 6(简称 ES6)是 JavaScript 语言的下一代标准,在 2015 年 6 月正式发布。它的目标,是使得 JavaScript 语言可以用来编写复杂的大型应用程序,成为企业级开发语言。对于常见的ES6和JS是什么关系的话题呢,我在这里提一下:ES6是JS的规格,而JS是ES6的一种实现。🍎语法🔰let声明变量在使用ES6之前我们更多的是使用var来声明一个变量,而var变量的声明是没有作用域的概念的,使用var对相同的变量名是可以声明多次的;而let就.https://sgdygb.blog.csdn.net/article/details/125002916