拷贝方式
1、针对数组有这些方法:
Array.slice()
1 2 |
|
Array.concat
1 2 3 4 5 |
|
当然,也可以遍历数组赋值。
但是以上两种只对单级结构的数组有效,如果数组的元素是一个引用类型,就不行了,比如:
1 2 3 4 5 |
|
修改二维数组的元素还是会影响原数组,也就是说slice和concat实际上是浅拷贝。
2、针对对象:
Object.assign()
1 2 3 4 5 6 7 |
|
同样该方法也是浅拷贝,如果对象属性值是引用类型也不行;
那么到底有哪些办法可以实现深拷贝呢
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(),总觉得很奇怪,不知道大家有什么更好的办法没有,欢迎大家留言讨论。