数据克隆的深浅之法,深度克隆,深度拷贝,浅拷贝,浅克隆

起因

  • 浅拷贝后修改的数据会影响数据源
  • 深拷贝后修改的数据不会影响数据源

浅拷贝

let data = {name:'zhangsan'}//数据源
let newData = data
let newData = {...data}

深拷贝-基本数据类型

let arr = [1,2,3,4];
//以下操作
let newArr = Array.slice() || Array.concat();
----------------或者
let newArr = new init(4)
newArr = Array.copyof(arr,4);
--------------或者
let newArr = JSON.parse(JSON.stringify(arr));
//结果:
newArr[0] = 50
console.log(arr);//[1,2,3,4]
console.log(newArr);//[50,2,3,4]

深拷贝-引用数据类型

//简单粗暴
let object = {name:'xiaoer'}
let newObject = JSON.parse(JSON.stringify(object));
newObject.name = "xiaosan"
console.log(object);//{name:'xiaoer'}
console.log(newObject);//{name:'xiaosan'}

//自定义方法
var deepClone = function(currobj){
	// 判断非引用类型数据原路返回
    if(typeof currobj !== 'object'){
        return currobj;
    }
    if(currobj instanceof Array){
        var newobj = [];
    }else{
        var newobj = {}
    }
    for(var key in currobj){
        if(typeof currobj[key] !== 'object'){
            // 不是引用类型,则复制值
            newobj[key] = currobj[key];
        }else{
            // 引用类型,则递归遍历复制对象
            newobj[key] = deepClone(currobj[key])    
        }
    }
    return newobj
}
let object = {name:'xiaoer'}
let newObject = deepClone(object));
newObject.name = "xiaosan"
console.log(object);//{name:'xiaoer'}
console.log(newObject);//{name:'xiaosan'}

你可能感兴趣的:(Vue,javascript,深浅拷贝,js深度拷贝,js深拷贝,js深度克隆,js深克隆)