工作中实现深拷贝和浅拷贝的常用方法

77 阅读1分钟

深拷贝

  1. 递归实现深拷贝
function deepClone(obj){
    let objClone = Array.isArray(obj)?[]:{}; // 判断传入的是对象还是数组
    if(obj && typeof obj==="object"){ // 判断是不是引用类型的数据
        for(key in obj){
        
            if(obj.hasOwnProperty(key)){ // 保证key不是原型的属性
                //判断ojb子元素是否为对象,如果是,递归复制
                if(obj[key]&&typeof obj[key] ==="object"){
                    objClone[key] = deepClone(obj[key]);
                }else{
                    //如果不是,简单复制
                    objClone[key] = obj[key];
                }
            }
        }
    }else { // 不是则直接返
    	objClone = obj
	}
    return objClone;
}  
  1. 借用JSON对象的 parse 和 stringify 的深拷贝(不可拷贝值为function或着undefined)
function deepClone(obj){
    let newObj = JSON.stringify(obj);
    let objClone = JSON.parse(newObj);
    return objClone;  
}

浅拷贝

  1. Object.assign()
let obj1 = { person: {name: "kobe", age: 41},sports:'basketball' };
let obj2 = Object.assign({}, obj1);
obj2.person.name = "wade";
obj2.sports = 'football'
console.log(obj1); // { person: { name: 'wade', age: 41 }, sports: 'basketball' }
  1. 展开运算符...
let obj1 = { name: 'Kobe', address:{x:100,y:100}}
let obj2= {... obj1}
obj1.address.x = 200;
obj1.name = 'wade'
console.log('obj2',obj2) // obj2 { name: 'Kobe', address: { x: 200, y: 100 } }
  1. 数组的concat() , slice() 方法
//concat()
let arr = [1, 3, {
    username: 'kobe'
    }];
let arr2 = arr.concat();    
arr2[2].username = 'wade';
console.log(arr); //[ 1, 3, { username: 'wade' } ]

//slice()
let arr = [1, 3, {
    username: ' kobe'
    }];
let arr3 = arr.slice();
arr3[2].username = 'wade'
console.log(arr); // [ 1, 3, { username: 'wade' } ]