一、什么是深拷贝、浅拷贝?
JS里的两种数据类型
1、基本类型:Number、String、Boolean
变量直接按值存放,存放在栈内存中,可直接访问
2、引用类型:Object、Array
变量保存的是一个指针,存放在栈内存中,指针指向一个位置,这个位置就是存放在堆内存引用类型的值
So
浅拷贝会导致引用类型A和引用类型B指向同一块内存地址。改变其中一方内容,都是在原来的内存上做修改会导致对象和源对象都发生改变
深拷贝是开辟一块新的内存地址,将源对象的各个属性逐个复制过去,对拷贝对象和源对象各自的操作互不影响
二、实现方法
1、浅拷贝
1)简单复制 “=”
2)Object.assign(target, ...source)方法:将所有可枚举属性的值从一个或多个源对象(source)复制到目标对象(target)
const object1 = {
a: 1,
b: 2,
c: 3
};
const object2 = Object.assign({c: 4, d: 5}, object1);
console.log(object2.c === object2.c); //true
3)Array的slice()和concat()
slice(begin, end)返回一个从开始到结束(不包括结束)选择的数组的一部分浅拷贝到一个新数组中,原始数组不修改
arr1.concat(arr2)用于合并两个或多个数组,此方法不改变现有数组,而是返回一个新数组
如果是对这样的一维数组?:arr[1, 2, 6, 7, 10, 22]做了slice/concat
看起来都像是深拷贝了,没影响原数组
但是!对于这样的二维数组(数组中有对象Object/Array)就只是复制了引用,改变其中的值还是会影响原数组
array [1, [1,2,3], {name:"array"}];
var array_concat = array.concat();
var array_slice = array.slice(0);
array_concat[1][0] = 5; //改变array_concat中数组元素的值
console.log(array[1]); //[5,2,3]
console.log(array_slice[1]); //[5,2,3]
array_slice[2].name = "array_slice"; //改变array_slice中对象元素的值
console.log(array[2].name); //array_slice
console.log(array_concat[2].name); //array_slice
2、深拷贝
1、JSON.parse()和JSON.stringify()
此方法最简单
JSON.var arr = [1, [2,88,77], 5, 7, 23]
var arrC = JSON.parse(JSON.stringify(arr))
arrC[1][2] = 99
console.log(arr[1])//[2,88,77]
缺点:如果是函数就不能处理
2、jQuery.extend()方法源码实现
好麻烦啊,懒得看了
3、自己实现的
好麻烦啊,懒得看了
参考:https://github.com/wengjq/Blog/issues/3