在javascript中,浅复制与深复制主要是针对引用类型来说的,浅复制复制对象的引用,二者的变更会互相影响;深复制彻底复制整个对象,生成新的对象,二者独立存在,互不影响。
浅复制的实现途径有以下几种:
浅复制实现方式1:赋值。
var arr = [1, [2, 3], 4],arr1 = arr; ???arr[0] = 0;arr1[1][0] = ‘a‘; ???console.log(arr,arr1); // [0,[‘a‘,3],4] [0,[‘a‘,3],4] ???console.log(arr === arr1); // true
这种方法复制整个对象包括子对象的引用,无论对象是单层的还是多层,任意层级的元素变更都会相互影响。
以下三种浅复制方式不同于赋值,下面的3种方式都是赋值子级对象的引用,也就是说,如果被复制的对象是单层的,子级元素都是基本数据类型,那么就不存在浅复制了,表现等同深复制;当被复制对象非单层,那么会复制内层对象的引用,外层相互独立,内层会相互影响。
浅复制实现方式2:ES6中的Object.assign()方法
var arr = [1, [2, 3], 4],arr2 = Object.assign([], arr); ???arr[0] = 0;arr2[1][0] = ‘a‘; ???console.log(arr, arr2); ???// [0,[‘a‘,3,4]] [1,[‘a‘,3,4]] ???console.log(arr === arr2); ??// false
浅复制实现方式3:js数组的 slice() 和 concat() 方法
var arr = [1, [2, 3], 4],arr3 = arr.slice(); ???arr[0] = 0;arr3[1][0] = ‘a‘; ???console.log(arr, arr3); ???// [0,[‘a‘,3],4] [1,[‘a‘,3],4] ???console.log(arr === arr3); ?// false
var arr = [1, [2, 3], 4],arr4 = arr.concat(); ???arr[0] = 0;arr4[1][0] = ‘a‘; ???console.log(arr, arr4); ???// [0,[‘a‘,3],4] [1,[‘a‘,3],4] ???console.log(arr === arr4); ?// false
浅复制实现方式4:Jquery的 $.extend([isDeep],target,object1,object2...)
var arr = [1, [2, 3], 4],arr8 = $.extend(false,[],arr); ???arr[0] = 0;arr8[1][0] = ‘a‘; ???console.log(arr, arr8); ????// [0,[‘a‘,3],4] [1,[‘a‘,3],4] ???console.log(arr === arr8); ?// false
深复制的实现途径有以下几种:
深复制实现方式1:递归拷贝
function deepClone1(obj){ ???????let objClone = Array.isArray(obj)?[]:{}; ???????if(obj && typeof obj==="object"){ ???????????for(key in obj){ ???????????????if(obj.hasOwnProperty(key)){ ???????????????????//判断ojb子元素是否为对象,如果是,递归复制 ???????????????????if(obj[key]&&typeof obj[key] ==="object"){ ???????????????????????objClone[key] = deepClone1(obj[key]); ???????????????????}else{ ???????????????????????//如果不是,简单复制 ???????????????????????objClone[key] = obj[key]; ???????????????????} ???????????????} ???????????} ???????} ???????return objClone; ???} ???var arr = [1, [2, 3], 4],arr5 = deepClone1(arr); ???arr[0] = 0;arr5[1][0] = ‘a‘; ???console.log(arr, arr5); ???// [0,[2,3],4] [1,[‘a‘,3],4] ???console.log(arr === arr5); ?// false深复制实现方式2:JSON.stringify() 和 JSON.parse() 方法
function deepClone2(obj){ ???????let _obj = JSON.stringify(obj), ???????????objClone = JSON.parse(_obj); ???????return objClone ???} ???var arr = [1, [2, 3], 4],arr6 = deepClone2(arr); ???arr[0] = 0;arr6[1][0] = ‘a‘; ???console.log(arr, arr6); ????// [0,[2,3],4] [1,[‘a‘,3],4] ???console.log(arr === arr6); ?// false深复制实现方式3:Jquery的 $.extend([isDeep],target,object1,object2...)
var arr = [1, [2, 3], 4],arr7 = $.extend(true,[],arr) ???arr[0] = 0;arr7[1][0] = ‘a‘; ???console.log(arr, arr7); ????// [0,[2,3],4] [1,[‘a‘,3],4] ???console.log(arr === arr7); ?// false
js中的深复制与浅复制
原文地址:https://www.cnblogs.com/onlycare/p/9791177.html