vue 爬坑 之js 对象/数组 赋值/拷贝 解决VUE中赋值引用后数据双向改变的问题
浅拷贝这里就不讲了,我们直接讲深拷贝正常的数组/对象拷贝可以直接用const cloneObj = JSON.parse(JSON.stringify(Obj));这种方式可以解决相当多一部分的赋值问题,但是一些特殊属性除外(undefined/function)在vue 或者js 中有时需要对一些特殊数据处理,比如VUE中的table等…这个时候就需要用到第二种方法处理数据附代码:...
·
浅拷贝这里就不讲了,我们直接讲深拷贝
正常的数组/对象拷贝可以直接用
const cloneObj = JSON.parse(JSON.stringify(Obj));
这种方式可以解决相当多一部分的赋值问题,但是一些特殊属性除外(undefined/function)
在vue 或者js 中有时需要对一些特殊数据处理,比如VUE中的table等…
这个时候就需要用到第二种方法处理数据
附代码:
/**
* 深拷贝
* @param source Array/Object 对象/数组
*/
util.deepClone = function (source){
const targetObj = source.constructor === Array ? [] : {}; // 判断复制的目标是数组还是对象
for(let keys in source){ // 遍历目标
if(source.hasOwnProperty(keys)){
if(source[keys] && typeof source[keys] === 'object'){ // 如果值是对象,就递归一下
targetObj[keys] = source[keys].constructor === Array ? [] : {};
targetObj[keys] = util.deepClone(source[keys]);
}else{ // 如果不是,就直接赋值
targetObj[keys] = source[keys];
}
}
}
return targetObj;
};
我这里是封装在了工具类里,单独引用的小伙伴可自行把 util.
去掉.
这里是通过遍历赋值来处理数据的。
如果有更好的方法欢迎一起交流讨论.
更多推荐
已为社区贡献9条内容
所有评论(0)