一次javascript深拷贝引发的深入思考

简介: js深拷贝深入思考

A同学和B同学因为一次js深拷贝发生的一次争执。

A同学:深拷贝是另一个对象占用另一块内存就行了,随手写出了如下代码:


leta= {
name: "lcy",
age: 18};
letb=Object.assign({}, a);
console.log(JSON.stringify(b, null, 2));
letc= {};
for (letkeyina) {
c[key] =a[key];
}
console.log(JSON.stringify(c, null, 2));
b.name="123";
c.name="456";
console.log(JSON.stringify(a, null, 2));
console.log(JSON.stringify(b, null, 2));
console.log(JSON.stringify(c, null, 2));


image.gif

image.gif


B同学:突然一看这两种方法好像确实都是深拷贝,bc对象修改属性后对a对象没什么影响,但是也会面临其他问题,如下


leta= {
name: "lcy",
age: 18,
user: {
u: "uu_c"    }
};
letb=Object.assign({}, a);
letc= {};
for (letkeyina) {
c[key] =a[key];
}
b.user.u="123";
console.log(JSON.stringify(a));
console.log(JSON.stringify(b));
console.log(JSON.stringify(c));
c.user.u="456";
console.log(JSON.stringify(a));
console.log(JSON.stringify(b));
console.log(JSON.stringify(c));

image.gif


image.gif


我们会发现,这种方式如果属性值是对象的话,那么这个对象是浅拷贝的,并么有完全深拷贝。


于是A同学灵机一动,迅速展示思维能力,随手就是一个代码~


leta= {
name: "lcy",
age: 18,
user: {
u: "uu_c"    }
};
functiondeepClone(obj) {
letres= {};
for (letkeyinobj) {
res[key] =typeofobj[key] =="object"?deepClone(obj[key]) : obj[key];
    }
returnres;
}
letb=deepClone(a);
console.log(JSON.stringify(a));
console.log(JSON.stringify(b));
b.user.u="123";
console.log(JSON.stringify(a));
console.log(JSON.stringify(b));

image.gif


image.gif


A同学拍拍胸脯,搞定,然后B同学问,万一你这个拷贝的源对象属性是它原型上的呢?我们可能并不需要原型上的属性


A同学:那就在for循环的时候加一个判断,if(obj.hasOwnProperty(key))就行了,其他代码不用动,这个可难不倒我。


B同学:你要不加个数组到a对象试试,如下


leta= {
name: "lcy",
age: 18,
user: {
u: "uu_c"    },
arr: [1, 3, 5]
};
functiondeepClone(obj) {
letres= {};
for (letkeyinobj) {
if (obj.hasOwnProperty(key)) {
res[key] =typeofobj[key] =="object"?deepClone(obj[key]) : obj[key];
        }
    }
returnres;
}
letb=deepClone(a);
console.log(JSON.stringify(a));
console.log(JSON.stringify(b));

image.gif


image.gif



这一下把A同学干懵了,居然数组还有这一情况,typeof 数组类型也是object,看来不能简单的判断object类型,于是A同学深思熟虑之后终于写出了如下代码


leta= {
name: "lcy",
age: 18,
user: {
u: "uu_c"    },
arr: [1, 3, 5]
};
functiondeepClone(obj) {
letres=objinstanceofArray? [] : {};
for (letkeyinobj) {
if (obj.hasOwnProperty(key)) {
res[key] =typeofobj[key] =="object"?deepClone(obj[key]) : obj[key];
        }
    }
returnres;
}
letb=deepClone(a);
console.log(JSON.stringify(a));
console.log(JSON.stringify(b));

image.gif


image.gif



最后B同学看了一下,反手一巴掌对着A的后脑勺狠狠地给他点了个赞,说干得漂亮!



关注、留言,我们一起学习。


===============Talk is cheap, show me the code================

目录
相关文章
|
4月前
|
JavaScript 前端开发
JavaScript中的深拷贝与浅拷贝
JavaScript中的深拷贝与浅拷贝
61 4
|
5月前
|
JSON JavaScript 数据格式
手写JS实现深拷贝函数
本文介绍了如何实现一个深拷贝函数`deepClone`,该函数可以处理对象和数组的深拷贝,确保拷贝后的对象与原始对象在内存中互不干扰。通过递归处理对象的键值对和数组的元素,实现了深度复制,同时保留了函数类型的值和基础类型的值。
32 3
|
6月前
|
JavaScript 前端开发
js中浅拷贝和深拷贝的区别
js中浅拷贝和深拷贝的区别
38 0
|
6月前
|
JavaScript 前端开发
js中浅拷贝,深拷贝的实现
js中浅拷贝,深拷贝的实现
42 0
|
6月前
|
JavaScript 前端开发
JavaScript中的深拷贝与浅拷贝
JavaScript中的深拷贝与浅拷贝
55 2
|
6月前
|
JavaScript 前端开发
JavaScript中的深拷贝和浅拷贝的实现讲解
在JavaScript中,浅拷贝与深拷贝用于复制对象。浅拷贝仅复制基本类型属性,对于引用类型仅复制引用,导致双方共享同一数据,一方修改会影响另一方。深拷贝则完全复制所有层级的数据,包括引用类型,确保双方独立。浅拷贝可通过简单属性赋值实现,而深拷贝需递归复制各层属性以避免共享数据。
88 1
|
7月前
|
JavaScript
js【详解】深拷贝 (含 JSON.parse(JSON.stringify(obj)) 的缺陷,5种手写深拷贝)
js【详解】深拷贝 (含 JSON.parse(JSON.stringify(obj)) 的缺陷,5种手写深拷贝)
221 0
|
7月前
|
存储 JavaScript 前端开发
javascript的栈内存 VS 堆内存(浅拷贝 VS 深拷贝)
javascript的栈内存 VS 堆内存(浅拷贝 VS 深拷贝)
41 0
|
8月前
|
JavaScript 前端开发
JS中浅拷贝和深拷贝的区别
JS中浅拷贝和深拷贝的区别
93 0
|
8月前
|
JSON JavaScript 前端开发
【JavaScript】JavaScript中的深拷贝与浅拷贝详解:基础概念与区别
JavaScript 中,理解数据拷贝的深浅至关重要。浅拷贝(如扩展运算符`...`、`Object.assign()`)仅复制对象第一层,共享内部引用,导致修改时产生意外联动。深拷贝(如自定义递归函数、`_.cloneDeep`或`JSON.parse(JSON.stringify())`)创建独立副本,确保数据隔离。选择哪种取决于性能、数据独立性和资源需求。深拷贝虽慢,但确保安全;浅拷贝快,但需小心引用共享。在面试中,理解这些概念及其应用场景是关键。
177 4
【JavaScript】JavaScript中的深拷贝与浅拷贝详解:基础概念与区别

热门文章

最新文章

  • 1
    当面试官再问我JS闭包时,我能答出来的都在这里了。
    46
  • 2
    【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
    29
  • 3
    Node.js 中实现多任务下载的并发控制策略
    34
  • 4
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
    26
  • 5
    【JavaScript】深入理解 let、var 和 const
    49
  • 6
    【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
    47
  • 7
    【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
    57
  • 8
    【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
    57
  • 9
    如何通过pm2以cluster模式多进程部署next.js(包括docker下的部署)
    72
  • 10
    【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
    55