ES6中展开运算符的深拷贝浅拷贝理解(ElementUI表格点击编辑，模态框内容与表格数据一起变的问题)

项目中遇到的问题:

在elementui中表格点击按钮传值的时候，通过bus中的$emit传对象，在弹出的模态框中用bus的$on接收对象，然后对传的对象进行改变，结果发现改变了原表格的数据。

然后就用了展开运算符把对象给了另一个变量接收，对对象改变之后发现原数据就没有被改变了。

所以用展开运算符是深拷贝还是浅拷贝呢？

MDN里面的解释：实际上, 展开语法和 Object.assign() 行为一致, 执行的都是浅拷贝(只遍历一层)。

以下是我个人的理解：

用扩展运算符对数组或者对象进行拷贝时，只能扩展和深拷贝第一层的值，对于第二层极其以后的值，扩展运算符将不能对其进行打散扩展，也不能对其进行深拷贝，即拷贝后和拷贝前第二层中的对象或者数组仍然引用的是同一个地址，其中一方改变，另一方也跟着改变。

案例1：

var arr1 = [[1,2], [3,4], [5,6]];
var arr2 = [...arr1];
arr2.shift()
console.log(arr1); // [[1,2],[3,4],[5,6]]
console.log(arr2);// [[3,4],[5,6]]

案例2：

var arr1 = [[1,2], [3,4], [5,6]];
var arr2 = [...arr1];
arr2.shift().shift();  //多进行操作一步
console.log(arr1); // [[2],[3,4],[5,6]]
console.log(arr2);// [[3,4],[5,6]]

案例3：

let arr1 = [{}, {}, {}]
let arr2 = []for (const item of arr1) {arr2.push(item)
}
arr2[0]['name'] = '李华'console.log(arr1) //[ { name: '李华' }, {}, {} ]
console.log(arr2) //[ { name: '李华' }, {}, {} ]

通过案例1和案例2和案例3的对比可以发现奇妙之处，根据案例返回的结果可以确定展开运算符只能深拷贝第一层的值，多维数组则不能深拷贝成功。如果数组内的值, 是值类型, 那么遍历一层, 就相当于拷贝了它的值, 如果是引用类型, 比如二维数组, 那么就是拷贝了它的引用。

以上就是我个人的粗略见解。

❤️各位看官，点个赞就是对我最大的支持，谢谢！！！❤️

ES6中展开运算符的深拷贝浅拷贝理解(ElementUI表格点击编辑，模态框内容与表格数据一起变的问题)相关推荐

es6中class类的全方面理解
es6中class类的全方面理解(一) es6中class类的全方面理解(二)------继承
关于java中位运算符的使用和理解
关于java中位运算符的使用和理解 &(按位与) ' & ' 符号的作用是对运算符的两侧以二进制表达的操作符按位进行'与'运算. 规则: 只有两个操作数对应位同为1时,结果为1,其余全 ...
vue中实现跳转链接并拼接参数（点击跳转或者判断返回请求数据跳转）
vue中实现跳转链接(点击跳转或者判断返回请求数据跳转) <div @click="toRescue">标题:window.location.href跳转到外部链接测试 ...
es6中class类的全方面理解（三）------静态方法
不需要实例化类,即可直接通过该类来调用的方法,即称之为"静态方法".将类中的方法设为静态方法也很简单,在方法前加上static关键字即可.这样该方法就不会被实例继承! class ...
【MATLAB】在MATLAB中利用GUI编写加法计算器，要求:通过两个编辑文本框实现两个数字的输入，点击“开始计算”按钮进行计算，并在用于结果显示的静态文本框中实现两输入数字的和的显示
1)打开Matlab,点击工具栏上的[File]–>New–>GUI,命名为:addnum.fig 2)在addnum.fig面板里,拖曳3个静态文本TXT控件(不做任何修改).3个编辑 ...
JavaScript ES6中的深拷贝和浅拷贝
今天在做Vue项目时,遇到了涉及到对象展开运算符"..."是深拷贝还是浅拷贝的问题,在问答里看到了这篇回答,由于无法转载,在这里记录一下. 先来了解下,浅拷贝和深拷贝各自的含义: ...
06-ES6语法：展开运算符
本文我们介绍ES6的展开运算符.展开运算符(spread operator)允许一个表达式在某处展开.展开运算符在多个参数(用于函数调用)或多个元素(用于数组字面量)或者多个变量(用于解构赋值)的地方 ...
ES5合并数组---ES6中合并数组
合同数组的方法, 其中,ES6中扩展运算符提供了数组合并的新写法. formatEs6ConcatArr () {let arr1 = ['a', 'b']let arr2 = ['c', 'c']l ...
剩余运算符和展开运算符
剩余运算符:rest运算符 // 1.一定在最后// 2.剩余运算符是数组,arguments是一个伪数组function add(...rest) {console.log(arguments); ...

ES6中展开运算符的深拷贝浅拷贝理解(ElementUI表格点击编辑，模态框内容与表格数据一起变的问题)

❤️各位看官，点个赞就是对我最大的支持，谢谢！！！❤️

ES6中展开运算符的深拷贝浅拷贝理解(ElementUI表格点击编辑，模态框内容与表格数据一起变的问题)相关推荐

最新文章

热门文章