JS 拷贝对象的方法 深拷贝 与 浅拷贝

浅拷贝与 深拷贝 的区别在于是否共享相同的引用

因为存在共享引用,浅拷贝的修改可能造成源被修改。

js 内置对象复制操作
...展开语法、Array.prototype.concat()Array.prototype.slice()Array.from()Object.assign()Object.create()
创建的是浅拷贝。

若对象可被序列化,则简单的深拷贝方法如下

JSON.parse(JSON.stringify(object))
// * RegExp Funciton 无法通过这种方式深拷贝
// 

structuredClone() 非js标准,浏览器提供
可转移对象

实现深拷贝的方法

  1. 通过递归遍历所有的元素并复制
function deepCopy(obj) {
	let cloneObj = Array.isArray(obj) ? [] : {}
	for (let i of Object.keys(obj)) {
		if (obj[i] instanceof Object) {
			cloneObj[i] = deepCopy(obj[i])
		} else {
			cloneObj[i] = obj[i]
		}
	}
	return cloneObj
}
function deepCopy(obj){
    let str, newobj = obj.constructor === Array ? [] : {};
    if(typeof obj !== 'object'){ // 如果不是对象不涉及到深拷贝
        return;
    } else if(window.JSON){
        str = JSON.stringify(obj), // 系列化对象
        newobj = JSON.parse(str); // 还原
    } else {
        for(let i of Object.keys(obj)){ // 递归的方式遍历
            newobj[i] = typeof obj[i] === 'object' ? 
            	deepCopy(obj[i]) : 
            	obj[i]; 
        }
    }
    return newobj;
};

优质文章
充分考虑各种问题的深拷贝 - 代码地址:https://github.com/ConardLi/ConardLi.github.io/blob/master/demo/deepClone/src/clone_6.js

数组拷贝方法

  1. 遍历法,思路同上
  2. slice() 取整片
copyArray= arrayObject.slice(start,end)
  1. concat() 不与任何数组拼接
copyArray = arrayObject.concat()

第三方库 lodash _.cloneDeep()

posted @   海胆Sur  阅读(13)  评论(0编辑  收藏  举报  
相关博文:
阅读排行:
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· 上周热点回顾(2.24-3.2)
点击右上角即可分享
微信分享提示