网站建设公司能信吗,局域网网站建设的步骤过程,网站开发公司简介怎么写,网站 锚点链接怎么做JavaScript实现对象深拷贝的方法#xff08;5种#xff09;知识回调#xff08;不懂就看这儿#xff01;#xff09;场景复现实现对象深拷贝的五种方法1.json暴力转化2.es6扩展运算符3.for in循环遍历对象4.Object.assign()对象的合并5.利用循环和递归的方式实现对象浅拷贝…
JavaScript实现对象深拷贝的方法5种知识回调不懂就看这儿场景复现实现对象深拷贝的五种方法1.json暴力转化2.es6扩展运算符3.for in循环遍历对象4.Object.assign()对象的合并5.利用循环和递归的方式实现对象浅拷贝的三种方法1.concat、slice返回一个新数组2.Object.assign()方法3.遍历对象通用方法知识回调不懂就看这儿
知识专栏专栏链接JavaScript知识专栏https://blog.csdn.net/xsl_hr/category_12024214.html?spm1001.2014.3001.5482JavaScript深浅拷贝的区别图解原理https://blog.csdn.net/XSL_HR/article/details/129838095?spm1001.2014.3001.5501
有关JavaScript的相关知识可以前往JavaScript知识专栏查看复习
场景复现
在上期文章中我们从底层原理方面对JavaScript数组对象的浅拷贝和深拷贝进行了详细的介绍看完上期文章之后想必大家对浅拷贝与深拷贝都有了一定的认识而本期文章将分享五个非常实用的深拷贝方法和三个实用的浅拷贝方法。 好的深拷贝方法有什么作用 首先深拷贝的学习对于我们在项目开发中进行数据处理是非常有用的。深拷贝原理和方法的学习能够帮助我们规范代码提高代码的有效性。通知深拷贝方法的学习能够更好地帮助我们解决因为拷贝方式不当而产生的bug。节约更多debug的时间。 下面我们来通过代码示例来详细介绍五种深拷贝的方法。
实现对象深拷贝的五种方法
1.json暴力转化
通过JSON.stringify() 和 JSON.parse() 将对象转为字符串之后在转为对象。
var obj {name:123}
var obj2 JSON.parse(JSON.stringify(obj))var arr [old, 1, true, [old1, old2], {old: 1}]
var new_arr JSON.parse(JSON.stringify(arr))
console.log(new_arr);这种简单粗暴的方式有局限性当值为undefined、function、symbol会在转换过程中被忽略。JSON.stringify()不仅可拷贝数组还能拷贝对象但不能拷贝函数也不能解决循环引用问题 2.es6扩展运算符
var obj {name:123,age:13};
var obj2 {...obj}只能深度拷贝对象的第一层如果对象中的属性也是对象的话没有办法进行深度拷贝的。 3.for in循环遍历对象 var obj {name: 小明,age: 20}var obj1 {}for (var key in obj) {//遍历属性值深拷贝obj1[key] obj[key]}console.log(obj1);var deepCopy function(target) {// 只拷贝对象if (typeof target ! object) return target;// 根据obj的类型判断是新建一个数组还是一个对象var result Array.isArray(obj) ? [] : {};for (var key in target) {// 遍历obj,并且判断是obj的属性才拷贝(不能拷贝原型对象的属性)if (target.hasOwnProperty(key)) {// 判断属性值的类型如果是对象递归调用深拷贝result[key] typeof target[key] object ? deepCopy(target[key]) : target[key];}}return result;
}其中上述方法一、方法三都解决不了循环引用的问题。 4.Object.assign()对象的合并 利用Object.assign(), 第一个参数必须是空对象 var obj {name:123,age:13};
var obj2 Object.assign({},obj1);5.利用循环和递归的方式
function deepClone(obj, newObj) {var newObj newObj || {};for (let key in obj) {if (typeof obj[key] object) {newObj[key] (obj[key].constructor Array) ? [] : {}deepClone(obj[key], newObj[key]);} else {newObj[key] obj[key]}}return newObj;
}在循环递归中需要注意设置临界值typeof obj[key] ‘object’否则会造成死循环。 循环递归可以处理对象中嵌套数组或对象的问题。相当于第三种方法的优化。 实现对象浅拷贝的三种方法
1.concat、slice返回一个新数组
数组的浅拷贝可用concat、slice返回一个新数组的特性来实现拷贝
var arr [old, 1, true, null, undefined];
var new_arr arr.concat(); // 或者var new_arr arr.slice()也是一样的效果;
new_arr[0] new;
console.log(arr); // [old, 1, true, null, undefined]
console.log(new_arr); // [new, 1, true, null, undefined]2.Object.assign()方法
let target {};
let source { a: { b: 2 } };
Object.assign(target, source);
console.log(target); // { a: { b: 10 } };
source.a.b 10;
console.log(source); // { a: { b: 10 } };
console.log(target); // { a: { b: 10 } };但是如果数组嵌套了对象或者数组的话用concat、slice拷贝只要有修改会引起新旧数组都一起改变了比如
var arr [{old: old}, [old]];
var new_arr arr.concat();
arr[0].old new;
new_arr[1][0] new;
console.log(arr); // [{old: new}, [new]]
console.log(new_arr); // [{old: new}, [new]]3.遍历对象通用方法 实现思路遍历对象把属性和属性值都放在一个新的对象里 var shallowCopy function (obj) {// 只拷贝对象if (typeof obj ! object) return;// 根据obj的类型判断是新建一个数组还是一个对象var newObj Array.isArray(obj) ? [] : {};// 遍历obj,并且判断是obj的属性才拷贝for (var key in obj) {if (obj.hasOwnProperty(key)) {newObj[key] obj[key];}}return newObj;
}如果数组元素是基本类型就会拷贝一份互不影响而如果是对象或者数组就会只拷贝对象和数组的引用这样我们无论在新旧数组进行了修改两者都会发生变化。这种叫浅拷贝。深拷贝就是指完全的拷贝一个对象即使嵌套了对象两者也相互分离修改一个对象的属性也不会影响另一个。 以上就是关于实现对象深拷贝与浅拷贝的方法的分享相信看完这篇文章的小伙伴们一定能运用这些方法在项目开发中。当然可能有不足的地方欢迎大家在评论区留言指正
下期文章将介绍vue antd项目实战中的深拷贝使用~感兴趣的小伙伴可以订阅本专栏方便后续了解学习~觉得这篇文章有用的小伙伴们可以点赞➕收藏➕关注哦~
