【前端面试指南】JS-1-手写深拷贝和浅拷贝

最新推荐文章于 2024-07-15 14:30:35 发布
最新推荐文章于 2024-07-15 14:30:35 发布
阅读量374 收藏
点赞数
分类专栏： 前端面试指南
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41629800/article/details/108078877
版权
本文探讨JavaScript中的浅拷贝和深拷贝概念，详细讲解了如何使用展开运算符进行浅拷贝，以及通过JSON转换实现深拷贝的简单方法。同时，指出了JSON转换方法的缺点，如忽略函数、不能处理循环引用等问题，并介绍了手写深拷贝的递归实现，强调了在拷贝过程中检查类型和循环引用的重要性。
摘要由CSDN通过智能技术生成

  1. 浅拷贝

    1. 定义：浅拷贝是拷贝第一层的拷贝

    2. 方法：

      1. 使用Object.assign解决这个问题。
      let a = {
       
  age: 1
}
let b = Object.assign({
       }, a)
a.age = 2
console.
最低0.47元/天 解锁文章
Light.T
关注
专栏目录
JS中的浅拷贝与深拷贝方法（秒懂拷贝原理与手写深拷贝）
百赢出品，必属精品
04-04 1727
换句话说，新对象和原对象的所有属性，包括引用类型属性，在内存中都是完全独立的。需要注意的是，浅拷贝和深拷贝只针对引用类型的属性，对于原始类型的属性，复制的都是值。浅拷贝是指创建一个新对象，然后将原对象的引用类型的属性复制给新对象。当对象中包含嵌套的子对象，且需要确保复制后的对象完全独立于原始对象时，应使用深拷贝。如果只需要复制对象的部分属性，可以使用浅拷贝来复制所需的属性，而不必复制整个对象。如果需要复制对象的所有子对象，而不仅仅是第一层的属性，应使用深拷贝。操作七：深拷贝中的循环引用。
ES6 深拷贝_手写系列——JS深拷贝和浅拷贝
weixin_39733812的博客
11-20 180
不要问我心里有没有你，我余光中都是你。——余光中概念补漏1. 堆栈的概念在计算机中，堆栈是两种数据结构。栈(stack)：先进后出；动态分配的空间 一般由程序员分配释放， 若程序员不释放，程序结束时可能由OS回收，分配方式倒是类似于链表。堆(heap)：队列优先,先进先出；由操作系统自动分配释放 ，存放函数的参数值，局部变量的值等。其操作方式类似于数据结构中的栈。2.基本，引用数据类型7...
【JavaScript】聊一聊js中的浅拷贝与深拷贝与手写实现
最新发布
kfashfasf的博客
07-15 961
浅拷贝，指的是创建新的数据，这个数据有着原始数据属性值的一份精确拷贝。如果属性是基本类型，拷贝的就是基本类型的值。如果属性是引用类型，拷贝的就是内存地址即浅拷贝是拷贝一层，深层次的引用类型则共享内存地址。下面用一张图来解释一下浅拷贝深拷贝开辟一个新的栈，两个对象属完成相同，但是对应两个不同的地址，修改一个对象的属性，不会改变另一个对象的属性下面用一张图来解释一下深拷贝。
如何写出一个惊艳面试官的深拷贝?
weixin_45189747的博客
09-08 272
导读 最近经常看到很多JavaScript手写代码的文章总结，里面提供了很多JavaScript Api的手写实现。 里面的题目实现大多类似，而且说实话很多代码在我看来是非常简陋的，如果我作为面试官，看到这样的代码，在我心里是不会合格的，本篇文章我拿最简单的深拷贝来讲一讲。 看本文之前先问自己三个问题： 你真的理解什么是深拷贝吗？ 在面试官眼里，什么样的深拷贝才算合格？ 什么样的深拷贝...
js:手写实现深浅拷贝
bzaZJU的博客
05-07 223
js:深浅拷贝 浅拷贝 首先来看js的浅拷贝： 首先来直观的感受一下什么是拷贝。 let arr = [1, 2, 3]; let newArr = arr; newArr[0] = 100; console.log(arr);//[100, 2, 3] 这是直接赋值的情况，不涉及任何拷贝。当改变newArr的时候，由于是同一个引用，arr指向的值也跟着改变。 现在进行浅拷贝： let arr = [1, 2, 3]; let newArr = arr.slice(); newArr[0] = 10
JavaScript基础：手写浅拷贝与深拷贝
imagine_tion的博客
03-30 1680
一、概念 1.浅拷贝（浅克隆） 创建一个新对象，这个对象有着原始对象属性值的一份精确拷贝。如果属性是基本类型，拷贝的就是基本类型的值，如果属性是引用类型，拷贝的就是内存地址 ，所以如果其中一个对象改变了这个地址中的值，就会影响到另一个对象。 2.深拷贝（深克隆） 将一个对象从内存中完整的拷贝一份出来,从堆内存中开辟一个新的区域存放新对象,且修改新对象不会影响原对象。 二、实现 1.浅拷贝 创建一个新的对象，遍历需要克隆的对象，将需要克隆对象的属性依次添加到新对象上，然后返回。 function clo.
前端技术栈---看完这篇就够了
萌古大汗的专栏
05-24 8918
html5、css3、JavaScript、nodejs、TypeScript、前端构建（webpack、gulp、grunt）、chrome DevTools、前端适配、单元测试、自动化测试、http协议、前端通信、工程化（模块化、组件化、规范化、自动化）、浏览器（渲染机制、v8原理）、前端性能优化、前端安全、多端应用（微信公众号、小程序、ReactNative、Flutter、Electron） Js高级： 1.数据类型和内存空间 2.执行上下文 3.变量对象 4.作用域和作用域链 5.闭包 6.thi
前端面试问题（适用于面试回答思路）
yaminne的博客
03-28 4971
原型和原型链 原型：构造函数的 prototype 属性指向了一个对象，这个对象正是调用该构造函数而创建的实例的原型。也即，每个构造函数的实例都有一个原型，叫原型对象，由实例对象的内置属性_proto_指向。每个原型都有一个 constructor 属性指向关联的构造函数。 原型用法：构造函数创建的实例可以访问实例的属性和方法，也可以访问原型的属性和方法。对于原型只能访问自己的属性和方法。考虑这一特性，如果对象公有的属性和方法，我们可以添加到原型上面，对象需要的时候直接访问原型的属性和方法就可以。 当读取实
前端面试题
IT_Jiangxiaobai的博客
05-19 5115
01-HTML~02-CSS 1.每个HTML文件里面都有一个很重要的东西，Doctype，知道这是干什么的么？ 要点一 : 该标签告知浏览器浏览文档要使用的HTML规范 , 告知浏览器以何种规范解析页面 要点二 : 声明对大小写不敏感 2.常用浏览器有哪些，内核都是什么？ 答： 常用浏览器有chrome、safari、 IE、火狐(firefox) 、 Opera 、360、搜狗等 浏览器 内核 备注 IE Trident IE、猎豹安全、360极速浏览器、百度浏览器 firefo
17张思维导图，2021年作为一名前端开发者需要掌握这些，前端面试复习资料参考大纲
cYang2030的博客
12-09 5942
本文首发于17张思维导图，最全前端复习资料总结，转载请联系作者 前言 2020年最后一个月了，熬夜多天整理出17张思维导图，对前端面试复习知识点进行了最全的总结，分享给大家。每个知识点都尽量找到最好的文章来解释，通过思维导图的形式进行展示。 给大家准备了高清的思维导图和食用更加方便的PDF文档，全部聚合思维导图一张，分类思维导图17张，涉及前端开发的方方面面面，JS基础，工程化，性能优化，安全，框架等。如果您是准备面试，或者享扩展前端知识，都可以通过这个目录进行学习。 废话不多说，下面分类展开来说，收藏.
JavaScript 深拷贝 递归 手写
01-08
今天的学习笔记写在了自己的网页笔记本上，没有记录到博客，但是学到一个有关深拷贝的实现方法，为加深印象，这里给大家分享一下： 深拷贝：就是拷贝到最底层的属性。 function deepCopy(object){ //这里传入一个拷贝的对象 /*这里定义一个返回的新对象，也就是拷贝完成后的对象*/ let newObject = Array.isArray(object) ? []: {}; // 首先定义对象类型，如果传入的是数组，则定义一个空数组，如果是对象，则定义一个空对象 if(object && typeof(object) === 'object'){ //这里再次判断他
JavaScript手写浅拷贝和深拷贝
weixin_57677300的博客
08-19 376
JavaScript手写浅拷贝和深拷贝
面试之：js的深拷贝和浅拷贝
weixin_43342105的博客
06-04 866
文章目录什么是深拷贝，浅拷贝深拷贝有哪些方式用JSON下的方法用递归实现 什么是深拷贝，浅拷贝 拷贝就是复制的意思深拷贝就是完全在另一个地址空间复制当前的值，而浅拷贝就是只复制指向复杂数据类型的指针，并没有创建一个新的地址空间 看下面的例子就更加清晰知道了 let book = { name:"局外人", types:{ t1:"中文版", t2:"英文版" }
浅拷贝和深拷贝---JS实现深拷贝的方式
weixin_41957432的博客
11-25 284
说道数据拷贝就离不开数据类型，在JS中数据类型分为基本类型和引用类型 基本类型： number， boolean，string，symbol，bigint，undefined，null 引用类型： object 以及一些标准内置对象 Array、RegExp、String、Map、Set… 一. 基本类型数据拷贝 基本类型数据都是值类型，存储在栈内存中，每次赋值都是一次复制的过程 var a = 12; var b = a; 二. 引用类型数据拷贝 1、浅拷贝 只拷贝对象的一层数据，再深处
手写深拷贝和浅拷贝
qq_45438471的博客
04-24 542
本文主要说明如何实现深拷贝和浅拷贝。
前端面试手写题 -- (二)深拷贝
Celine921的博客
03-22 1179
手写深拷贝
前端面试 - 手写浅拷贝深拷贝
硕的博客
03-30 120
// 浅拷贝 // 只是把对象的属性和属性值拷贝到另一个对象中 var obj1 = { a: { a1: { a2: 1 }, a10: { a11: 123, a111: { a1111: 123123 } } }, b: 123, c: "123" } // 方式1 function clone1(o) { let obj = {} for (let i in o) { obj[i] = o[i] } retu
js手写题——深拷贝和浅拷贝
csdn_46884182的博客
08-26 379
深拷贝浅拷贝
js 手写深拷贝和浅拷贝
09-06
深拷贝和浅拷贝是 JavaScript 中用于复制对象的两种不同方式。 浅拷贝只是复制对象的第一层属性，而不会复制对象中的引用类型属性。也就是说，浅拷贝只会复制对象的引用，而不会创建一个新的对象。这意味着，如果原始对象中的引用类型属性发生变化，拷贝后的对象中的属性值也会随之改变。使用浅拷贝可以通过遍历对象中的属性，并将其复制到一个新对象中来实现。你可以使用循环、递归或者使用一些内置的方法来手写浅拷贝。举个例子，你可以通过遍历对象中的属性，并将其复制到一个新对象中来实现浅拷贝。比如使用递归的方式，你可以逐个复制对象中的属性到一个新的对象中，但是注意，只有第一层的属性会被复制到新对象中。 深拷贝则是复制对象的所有层次，包括对象的引用类型属性。这意味着，如果原始对象中的引用类型属性发生变化，拷贝后的对象中的属性值不会受影响。深拷贝会创建一个完全相同但是独立的对象。实现深拷贝可以使用递归的方式，对于对象的每一个属性，如果是引用类型，则递归调用深拷贝方法来复制属性值。你也可以使用一些内置的方法或者第三方库来实现深拷贝，比如使用 JSON.parse(JSON.stringify(object)) 来实现深拷贝。需要注意的是，使用这种方法时，对象中的函数、正则表达式以及 undefined 类型的属性会被忽略掉。 所以，通过手写深拷贝和浅拷贝，可以更好地理解递归、循环引用、weakMap、创建各种引用类型的方法、判断数据类型、箭头函数与普通函数的区别、正则表达式等知识。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [JavaScript基础：手写浅拷贝与深拷贝](https://blog.csdn.net/imagine_tion/article/details/115322522)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* *3* [JS 浅拷贝和深拷贝详解(巨详细)](https://blog.csdn.net/qq_63299825/article/details/131003216)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值