js中的深浅拷贝

168 阅读1分钟

JS 中浅拷贝的几种实现方法

1.利用Object.assign 实现

针对对象只有一层,没有嵌套的情况

var obj = {name: 'zxx'};var copy = Object.assign({}, obj)

2.数组只有一层的话可以利用concat, slice 等实现;

var arr=[1,2, 3];var arr1 = arr.concat();var arr2 = arr.slice();

3.手动实现

function copy(obj){    if(typeof obj === 'object' && target !== null){        let cloneTarget = Object.prototype.toString.call(obj) === '[object Object]': {} : [];        for(var key in obj){                //遍历obj,并且判断是obj的属性才拷贝            if(obj.hasOwnProperty(key)){                cloneTarget[key] = obj[key];            }        }        return cloneTarget;    }else {        return obj;    }} 

JS 中深拷贝的几种实现方法

1、使用递归的方式实现深拷贝

   function deepClone(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] = deepClone(obj[key]);       } else {        objClone[key] = obj[key];       }      }     }    }    return objClone;   }

2、通过 JSON 对象实现深拷贝

//通过js的内置对象JSON来进行数组对象的深拷贝function deepClone(obj) {  var _obj = JSON.stringify(obj),    objClone = JSON.parse(_obj);  return objClone;}

3、通过jQuery的extend方法实现深拷贝

$.extend( [deep ], target, object1 [, objectN ] )

deep表示是否深拷贝,为true为深拷贝,为false,则为浅拷贝

target Object类型 目标对象,其他对象的成员属性将被附加到该对象上。

object1 objectN可选。 Object类型 第一个以及第N个被合并的对象。

let a=[0,1,[2,3],4],    b=$.extend(true,[],a);a[0]=1;a[2][0]=1;console.log(a,b);

4、Object.assign()拷贝

当对象中只有一级属性,没有二级属性的时候,此方法为深拷贝,但是对象中有对象的时候,此方法,在二级属性以后就是浅拷贝。

5、lodash函数库实现深拷贝

lodash很热门的函数库,提供了 lodash.cloneDeep()实现深拷贝