[js]深浅拷贝的理解和多种实现方式(最终完整版)

深浅拷贝的区别

浅拷贝

将原对象或原数组的引用直接赋给新对象，新数组，新对象／数组只是原对象的一个引用。

深拷贝

创建一个新的对象和数组，将原对象的各项属性的“值”（数组的所有元素）拷贝过来，是“值”而不是“引用”。

为什么要用深拷贝？

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

深浅拷贝的实现

浅拷贝

因为是引用数据类型,修改赋值后的变量等于修改引用的地址数据,会修改原数据

	let obj = {name:'张三'}
	let object = obj
	console.log(object) // {name:'张三'}
	object.name = '李松'
	console.log(object) // {name:'李松'}
	console.log(obj) // {name:'李松'}

深拷贝

[推荐] 递归的方式

推荐使用,没有任何问题

function deepClone(obj){
　　let objClone =  Array.isArray(obj) ? [] : {};
　　if (obj && typeof obj === 'object') {
　　　　for(let key in obj){
　　　　　　if (obj[key] && typeof obj[key] === 'object'){
　　　　　　　　objClone[key] = deepClone(obj[key]);
　　　　　　}else{
　　　　　　　　objClone[key] = obj[key]
　　　　　　}
　　　　}
　　}
　　return objClone;
}

JSON的方式实现

对象中有Function 会被忽略掉,开发中还是比较常用的

function deepClone(obj) {
  let _obj = JSON.stringify(obj);
  return JSON.parse(_obj);
}

通过Object.assign()拷贝

Object.assign()并非真正意义上的深拷贝，因为如果被拷贝的对象层数超过1层，那么就无 法通过Object.assign()深拷贝

function deepClone(obj){
  if(obj instanceof Object){
    return Object.assign({},obj);
  }else{
    return obj;
  }
}

解构赋值

适用于一维对象和一维数组,非一维的还是浅拷贝

var obj1 = {a: 1, b: 2,c:{d:3}}
var obj2 = {...obj1}
obj2.a = 4
console.log(obj1, obj2)

多维数组深拷贝

function deepcopy(arr) {
   var out = [],i = 0,len = arr.length;
   for (; i < len; i++) {
       if (arr[i] instanceof Array){
           out[i] = deepcopy(arr[i]);
       }
       else out[i] = arr[i];
   }
   return out;
}

[最终版]深拷贝

实现深度拷贝

function istype(obj,type){//判断包装类型的原型
    return Object.prototype.toString.call(obj).indexOf(type)!=-1
}
const deepClone =(initalObj) =>
    {
        if (typeof initalObj !== 'object') {//如果是基本类型直接返回值
            return initalObj
        }
        if(istype(initalObj,'String')||istype(initalObj,'Number')||istype(initalObj,'Boolean'))
            return initalObj.valueOf();
        if(istype(initalObj,'Date'))
            return new Date(initalObj.valueOf());
        if(istype(initalObj,'RegExp')){
            let pattern = initalObj.valueOf();
            let flags = '';
            flags += pattern.global ? 'g' : '';
            flags += pattern.ignoreCase ? 'i' : '';
            flags += pattern.multiline ? 'm' : '';
            return new RegExp(pattern, flags);
        }
        const obj = Array.isArray(initalObj)?[]:{};//可能是对象或者数组
        for (const key in initalObj) {
            if (typeof initalObj[key] === 'object') {//对于对象元素，deepclone
                //递归返回新的对象
                obj[key] = deepClone(initalObj[key]);
            } else if (typeof initalObj[key] === 'function') {//对于函数,用bind拷贝
                //返回新函数
                obj[key] = initalObj[key].bind(obj);
            } else {
                //基本类型直接返回
                obj[key] = initalObj[key];
            }
        }
        return obj;
    }

微信扫一扫,免费保护车主号码隐私的挪车码即可到手免费使用