JS中数组的深拷贝和浅拷贝

一、什么是深拷贝、浅拷贝？

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