当前位置：首页 > news >正文

浅拷贝和深拷贝

news 2024/11/15 13:24:01

一、数据类型

基本数据类型
字符串（Sring）、布尔值（Boolean）和数字（Number）
引用数据类型
数组（Array）和对象（Object）
区别
基本数据类型是存储在栈内存中。而引用类型存放的值是指向数据的引用，而不是数据本身，真实数据是存放在堆内存里
二、浅拷贝
指的是创建新的栈内存数据，这个数据有着原始数据属性值的一份精确拷贝
如果属性是基本类型，拷贝的就是基本类型的值；如果属性是内存地址（引用类型），拷贝的就是内存地址，因此如果其中一个对象改变了这个地址，就会影响到另一个对象。

var a = 1
var b = a
b = 20
console.log("a",a) //1
console.log("b",b) //20

var obj = {a:"AAA"
}
var obj2 = obj
obj2.a = "BBB"
console.log("obj",obj) //{name: "BBB"}
console.log("obj2",obj2) //{name: "BBB"}

三、深拷贝

对于基本数据类型其中一个对象修改该值，不会影响另外一个
对于引用类型改变其中一个，不会对另外一个也产生影响。

var obj = {a:"深拷贝"
}
var obj2 = {} // 创建新的对象
obj2 = obj
obj2.a = "深拷贝111"
console.log("obj",obj) //{name: "深拷贝"}
console.log("obj2",obj2) //{name: "深拷贝111"}

四、拷贝实现方案

Object.assign()
结构浅拷贝，Object.assign()对象是用于将所有可枚举属性的值从一个或多个源对象复制到目标对象，将返回目标对象

var obj = {a: 10,
}
var obj2 = Object.assign({}, obj);
obj2.a = 20
console.log("obj",obj); //{a: 10}
console.log("obj2",obj2) //{a: 20}

b. 多级结构（一级拷贝是浅拷贝，修改二级对象还是会影响原对象）：

var obj = {a: 10,b: {c:"AAA",d:666}
}
var obj2 = Object.assign({}, obj);
obj2.b.c = "BBB"
console.log("obj",obj); //{a: 10,b: {c:"BBB",d:666}}
console.log("obj2",obj2); //{a: 10,b: {c:"BBB",d:666}}

concat()
a. 单级结构（一级拷贝是深拷贝）：

let arr = [1, 2];
let arr2 = arr.concat();
arr2[1] = 3;
console.log("arr",arr) //[1, 2]
console.log("arr2",arr2) //[1, 3]

b. 多级结构（一级拷贝是浅拷贝）：

let arr = [1, 2, {a: 'AAA'
}];
let arr2 = arr.concat();
arr2[2].a = 'BBB';
console.log("arr",arr) //[1, 2, {a: 'BBB'}]
console.log("arr2",arr2) //[1, 2, {a: 'BBB'}]

3.slice()
a. 单级结构（一级拷贝是深拷贝）：

let arr = [1, 2, 3];
let arr2 = arr.slice();
arr2[1] = 4;
console.log("arr",arr) //[1, 2, 3]
console.log("arr2",arr2) //[1, 4, 3]

b. 多级结构（一级拷贝是浅拷贝）：

let arr = [1, 2, {a:'AAA'}];
let arr2 = arr.slice();
arr2[2].a = 'BBB';
console.log("arr",arr) //[1, 2, {a: 'BBB'}]
console.log("arr2",arr2) //[1, 2, {a: 'BBB'}]

JSON.parse(JSON.stringify())
a. 单级多级均为深拷贝，但需要注意无法拷贝RegExp对象、function和symbol

let arr = [1, 2, {a:'AAA'}];
let arr2 = JSON.parse(JSON.stringify(arr))
arr2[2].a = 'BBB';
console.log("arr",arr) //[1, 2, {a: 'AAA'}]
console.log("arr2",arr2) //[1, 2, {a: 'BBB'}]

5.cloneDeep()
a. 单级多级均为深拷贝，使用lodash工具中cloneDeep方法实现深拷贝，需要通过npm引入lodash库

<script>import _ from 'lodash';export default {name: 'Test',mounted() {const arr = [1, 2, { a: 'AAA' }];const arr2 = _.cloneDeep(arr);arr2[2].a = 'BBB';console.log('arr', arr); // [1, 2, {a: 'AAA'}]console.log('arr2', arr2); // [1, 2, {a: 'BBB'}]},};
</script>