JS深拷贝方法

拷贝方式

1、针对数组有这些方法：

Array.slice()

1 2	var a=[1,2,3]; var b=a.slice();<br>b[0]=4;<br>console.log(b);//[4,2,3]<br>console.log(a);//[1,2,3]

Array.concat

1 2 3 4 5

var a=[1,2,3]; var b=a.concat(); b[0]=4; console.log(b);//[4,2,3] console.log(a);//[1,2,3]

 当然，也可以遍历数组赋值。

但是以上两种只对单级结构的数组有效，如果数组的元素是一个引用类型，就不行了，比如：

1 2 3 4 5

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

　

修改二维数组的元素还是会影响原数组，也就是说slice和concat实际上是浅拷贝。

2、针对对象：

Object.assign()

1 2 3 4 5 6 7

var a={   "name":"张三"  }； b=Object.assign({},a); b.name="李四"； console.log(b.name);//李四 console.log(a.name);//张三

同样该方法也是浅拷贝，如果对象属性值是引用类型也不行；

那么到底有哪些办法可以实现深拷贝呢

1、递归

function deepClone(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] = deepClone(obj[key]);
                }else{
                    //如果不是，简单复制
                    objClone[key] = obj[key];
                }
            }
        }
    }
    return objClone;
}    
let a=[1,2,3,4],
    b=deepClone(a);
a[0]=2;
console.log(a,b);

2、jquery中的$.extend();

var obj = {name:'xixi',age:20,company : { name : '腾讯', address : '深圳'} };
var obj_extend = $.extend(true,{}, obj); //extend方法，第一个参数为true，为深拷贝，为false，或者没有为浅拷贝。
console.log(obj === obj_extend);
obj.company.name = "ali";
obj.name = "hei";
console.log(obj);
console.log(obj_extend);

3、JSON对象的JSON.parse()和JSON.stringify();

var obj = {name:'xixi',age:20,company : { name : '腾讯', address : '深圳'} };
var obj_json = JSON.parse(JSON.stringify(obj));//拷贝之后返回
console.log(obj === obj_json);
obj.company.name = "ali";
obj.name = "hei";
console.log(obj);
console.log(obj_json);

4、Lodash中的_.cloneDeep()

var objects = [{ 'a': 1 }, { 'b': 2 }];
 
var deep = _.cloneDeep(objects);
console.log(deep[0] === objects[0]);
// => false

 

虽然通过拷贝props数据解决了问题，但是拷贝后修改新数据的属性并不会触发vue的更新机制，需要强制更新$forceUpdate()，总觉得很奇怪，不知道大家有什么更好的办法没有，欢迎大家留言讨论。