浅谈js深拷贝和浅拷贝以及方法浅谈js深拷贝和浅拷贝以及方法

1.现象
一句话解释下它俩的区别：
假设B复制了A，当修改A时，看B是否会发生变化，如果B也跟着改变，说明这是浅拷贝；如果B没变，那就是深拷贝。
实际开发中遇到的其实就是这样疑惑：

let a = {name: '我是A'} let b = a console.log(a)// {name: "我是A"} console.log(b)// {name: "我是A"}b.name = '我是B' console.log(a)// {name: "我是B"} console.log(b)// {name: "我是B"}/*为什么 a 的值也发生变化？*/

这里需要解释下js中数据类型以及堆栈
2.数据类型
基本数据类型
String, Number, Boolean, Null, Undefined, Symbol
引用数据类型
Object, Array, Function, RegExp, Date 等
基本数据——类型它们键值都存在栈内存中：

let a = 1 let b = a

它们在内存中表现为：

文章图片
let a =1; let b = a 所以说，基本数据类型做修改，修改a或者修改b不会对对方造成影响。
我们看下引用数据——键存在栈内存，值存在堆内存中：
但是栈内存会提供一个引用的地址指向堆内存中的值

let a = [0,1,2] let b = a

文章图片
let a = [0,1,2]

当发生 b = a 时，其实只是复制a的引用地址，而不是里边的值，如下图：

文章图片
let b = a

这个时候当我们修改值的时候，其实也就是修改a和b指向的同一个地址，就是浅拷贝。如下图：

let a = [0,1,2] let b = a b[0] = 1 console.log(a)// [1, 1, 2] console.log(b)// [1, 1, 2]

文章图片
b[0] = 1

所以，重新再堆内存中开辟一个新的地址存放b的值，就可以达到深拷贝的效果了：

文章图片
开辟一个新的地址
所以接下来讲就是深拷贝的方法了。
3.方法

Object.assign()

Object.assign(target, ...sources);
target: 目标对象
sources: 源对象

// demo let obj1 = {a: 1, b: 2} let obj2 = Object.assign({c: 4, d: 5}, obj1)console.log(obj1); //{a: 1, b: 2} console.log(obj2); //{c: 4, d: 5, a: 1, b: 2}

Array.prototype.concat()

var new_array = old_array.concat(value1[, value2[, ...[, valueN]]])

let arr = [1, 2, { name: 'A' }] let arr2 = arr.concat() arr2[2].name = 'B' console.log(arr)// [1, 2, { name: 'B' }] console.log(arr2)// [1, 2, { name: 'B' }]

Array.prototype.slice()

arr.slice()
arr.slice(begin)
arr.slice(begin, end)

let arr = [1, 2, { name: 'A' }] let arr2 = arr.slice() arr2[2].name = 'B' console.log(arr)// [1, 2, { name: 'B' }] console.log(arr2)// [1, 2, { name: 'B' }]

注意：以上方法对一维数组对象进行拷贝，也就是说，只有一层的时候它才是深拷贝

JSON.parse(JSON.stringify())

用JSON.stringify将对象转成JSON字符串，再用JSON.parse()把字符串解析成对象，一去一来，新的对象产生了，而且对象会开辟新的栈，开辟一个新的地址，实现深拷贝
但是，不可以拷贝 undefined, function, RegExp 等

let obj1 = { a: 1, b: 2, c: 3 } let str = JSON.stringify(obj1); let obj2 = JSON.parse(str); obj2.a = 5; console.log(obj1.a); // 1 console.log(obj2.a); // 5

递归

function deepClone(target) { // 定义一个变量 let result; // 如果当前需要深拷贝的是一个对象的话 if (typeof target === 'object') { // 如果是一个数组的话 if (Array.isArray(target)) { result = []; // 将result赋值为一个数组，并且执行遍历 for (let i in target) { // 递归克隆数组中的每一项 result.push(deepClone(target[i])) } // 判断如果当前的值是null的话；直接赋值为null } else if(target===null) { result = null; // 判断如果当前的值是一个RegExp对象的话，直接赋值 } else if(target.constructor===RegExp){ result = target; }else { // 否则是普通对象，直接for in循环，递归赋值对象的所有值 result = {}; for (let i in target) { result[i] = deepClone(target[i]); } } // 如果不是对象的话，就是基本数据类型，那么直接赋值 } else { result = target; } // 返回最终结果 return result; }

注：此方法虽然可以拷贝Function, null, undefined 等类型，但是不是很完善，使用要根据自己逻辑进行更改。
【浅谈js深拷贝和浅拷贝以及方法】最后，留下赞再走！