制作外贸网站公司,域名流量查询,wordpress外链插件,电商平台建设公司在日常开发当中那面会遇到对象拷贝问题
一、对象浅拷贝#xff08;shallowClone#xff09; 使用 Object.assign 把源对象自身的、可枚举的属性拷贝到目标对象上 var person {name: 张三,age: 18,sex: 男,hobbies: [篮球, 足球, 排球],sayName: function () {console.log(t…在日常开发当中那面会遇到对象拷贝问题
一、对象浅拷贝shallowClone 使用 Object.assign 把源对象自身的、可枚举的属性拷贝到目标对象上 var person {name: 张三,age: 18,sex: 男,hobbies: [篮球, 足球, 排球],sayName: function () {console.log(this.name);},play: null,info: {address: 四川成都,child: [{id: 1,name: 张小三,age: 5,sex: 女}]}
};var newPerson Object.assign({}, person);
console.log(newPerson);拷贝后新旧对象的对比 但是当我操作对象里面更深层次的属性之后 结果把源数据给改了 使用 for in 遍历拷贝 function shallowClone(target, origin) {var tar target || {};for (var key in origin) {// 过滤原型上的属性origin.hasOwnProperty(key) (target[key] origin[key]);}return tar;
}二、深拷贝deepClone 使用 for in 循环遍历 递归 判断是不是原型上的属性判断是引用值注意typeof null object还是原始值如果是引用值就递归继续拷贝否则就直接拷贝把拷贝好的对象 return 出去 function deepClone(target, origin) {var target target || {},toStr Object.prototype.toString,arrType [object Array];for (var key in origin) {if (origin.hasOwnProperty(key)) {if (typeof origin[key] object origin[key] ! null) {target[key] toStr.call(origin[key]) arrType ? [] : {};deepClone(target[key], origin[key]);} else {target[key] origin[key];}}}return target;
}当我操作拷贝之后的对象 结果源对象不会发生改变 简单粗暴直接 JSON.parse(JSON.stringify(originObj)); function deepClone(target, origin) {var target target || {};target JSON.parse(JSON.stringify(origin));return target;
}记得初学的时候以为一个对象赋值另一个空对象newObj originObj就可以达到拷贝的效果结果后来操作被赋值的那个对象之后没想到源对象也修改了后来才知道因为它俩用的是同一个引用地址的东西呜呜呜~
