js--对象的浅层复制与深度克隆

最新推荐文章于 2022-04-02 13:33:44 发布

原创最新推荐文章于 2022-04-02 13:33:44 发布 · 512 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #开发语言

js基础专栏收录该内容

1 篇文章

订阅专栏

本文探讨了深度克隆的概念，它在不改变原对象的情况下复制包含引用类型值的对象。介绍了两种实现深度克隆的方法：递归和JSON.parse。递归方法通过遍历对象并复制所有属性来实现；而JSON.parse结合JSON.stringify则是一种快速但有限制的克隆方式，不适用于包含函数的方法。此外，还提到了DOM元素的复制如cloneNode以及ES6的Object.assign和扩展运算符，它们只能实现浅层复制。需要注意的是，这些方法在处理复杂对象时可能无法保留原始对象的某些特性或方法。

深度克隆

当对象中有引用类型的数值时，并且要求不可以改变原对象。此时需要深度克隆；
深度克隆有两种方式：递归和JSON.parse

递归

function deepClone(obj){
　　let objClone =  Array.isArray(obj) ? [] : {};
　　if (obj && typeof obj === 'object') {
　　　　for(let key in obj){
　　　　　　if (obj[key] && typeof obj[key] === 'object'){
　　　　　　　　objClone[key] = deepClone(obj[key]);
　　　　　　}else{
　　　　　　　　objClone[key] = obj[key]
　　　　　　}
　　　　}
　　}
　　return objClone;
}

通过json对象实现深度拷贝

var obj = {a:1,b:2}  
var newObj = JSON.parse(JSON.stringify(obj)); 
obj.c = 3;
console.log(obj,newObj);

注意：无法拷贝方法函数；

浅层复制对象

dom元素的复制——cloneNode

复制dom元素时使用

<div id="box"></div>
let div = document.getElementById('box');
let box2 = div.cloneNode(true);
console.log(div,box2);

es6新方法——Object.assign

不能进深度克隆

//比较常用
var obj = {a:1,b:2}  
var newObj = Object.assign({}, obj); 
obj.c = 3;
console.log(obj,newObj);

es6新方法——扩展运算符（…）

不能进深度克隆

var obj = {a:1,b:2}  
var newObj ={...obj}
obj.c = 3;
console.log(obj,newObj);