深拷贝(四种方法)

大家好，欢迎来到IT知识分享网。

目录

         一、在学习深拷贝之前，我们要先搞明白什么是深拷贝？

二、为什么要使用深拷贝？

 三、深拷贝

         四、如何进行深拷贝（四种方法）

一、在学习深拷贝之前，我们要先搞明白什么是深拷贝？

在JS中，数据类型分为基本数据类型和引用数据类型两种，对于基本数据类型来说，它的值直接存储在栈内存中，而对于引用类型来说，它在栈内存中仅仅存储了一个引用，而真正的数据存储在堆内存中。

1、当我们对数据进行操作的时候，会发生两种情况

基本数据类型

var a = 3; var b = a; b = 5; console.log(a); // 3 console.log(b); // 5

var obj1 = { a: 1, b: 2, c: 3 } var obj2 = obj1; obj2.a = 5; console.log(obj1.a); // 5 console.log(obj2.a); // 5

二、为什么要使用深拷贝？

我们希望在改变新的数组（对象）的时候，不改变原数组（对象）

arr=[100, [{a : 'hello'}, {b : "world"}], { c: "" }];     //判断修改的是不是'object'或者null,如果不是 object 或者 null 那么直接返回     function deepClone(obj = {}) {         if (typeof obj !== 'object' || obj == null) {             return obj;         }         let result;         //判断上面下来的obj是不是数组 用instanceof来检测 因为是数组应用类型   obj instanceof Array?result=[]:result={}         for (var item in obj) {             //查找一个对象是否有某个属性             if (obj.hasOwnProperty(item)) {                 // 递归调用                 result[item] = deepClone(obj[item])             }         }         return result;     }     let arr1=deepClone(arr);     arr1[1][0].a='vue'     arr1[0]=99     console.log('原数组',arr)     console.log('新数组',arr1)

 
三、深拷贝

四、如何进行深拷贝（四种方法）

1、使用JSON.stringify()以及JSON.parse()

let _tmp = JSON.stringify(obj);//将对象转换为json字符串形式

let result = JSON.parse(_tmp);//将转换而来的字符串转换为原生js对象

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

2、通过for in实现

function deepCopy1(obj) {   let o = {}   for(let key in obj) {     o[key] = obj[key]   }   return o } let obj = {   a:1,   b: undefined,   c:function() {}, } console.log(deepCopy1(obj)) 

 3、递归    （自身调用自身）

使用递归的方式实现数组、对象的深拷贝

function deepClone1(obj) { //判断拷贝的要进行深拷贝的是数组还是对象，是数组的话进行数组拷贝，对象的话进行对象拷贝 var objClone = Array.isArray(obj) ? [] : {}; //进行深拷贝的不能为空，并且是对象或者是 if (obj && typeof obj === "object") { for (key in obj) { if (obj.hasOwnProperty(key)) { if (obj[key] && typeof obj[key] === "object") { objClone[key] = deepClone1(obj[key]); } else { objClone[key] = obj[key]; } } } } return objClone; } 

4.concat（数组的深拷贝）