首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

js拷贝,深拷贝的实现

在JavaScript,浅拷贝和深拷贝是两种复制对象的方式,它们的主要区别在于是否复制对象的引用类型属性 浅拷贝:浅拷贝只复制对象的基本类型的属性,如果属性是引用类型(如数组、对象),则复制的是引用...深拷贝:深拷贝不仅复制对象的基本类型的属性,还会复制引用类型的属性。这意味着它会创建一个新的对象,并复制原对象的所有属性和嵌套的属性。因此,修改复制后的对象的任何属性,都不会影响到原对象。...浅拷贝的实现 // 接收传进来的参数 可能是数组 或者是对象 function clone(obj) { // 进行obj 参数类型的判断 // 如果 object ==> {} array...深拷贝的主要实现步骤相较于浅拷贝 主要在于 对于原对象引用数据类型的属性值的处理 主要使用的是函数递归的方法 一层一层的走下去 /** * 深拷贝的思路: * 1....对进行被拷贝对象数据类型的判断 数组 || 对象 * 2. 如果是数组 就创建一个空数组 ; 如果是对象 就创建一个空对象 (主要为了开辟新的内存空间) * 3.

4610

js的深浅拷贝

js的深浅拷贝 js中有深拷贝、浅拷贝一说,所谓的深浅拷贝是针对value类型为引用类型(函数、对象、数组)而言的,大概理解的就是: 浅拷贝拷贝出的对象c和原始对象o,c和o在key对应的...[2, 3] } var shallowObj = shallowCopy(obj) console.log(shallowObj) // { a: 1, arr: [ 2, 3 ] } // 浅拷贝指向同一地址...shallowObj2 = shallowCopy(obj2) // { a: 1, t: { b: 3, c: 4, d: { e: 6 } } } console.log(shallowObj2) 深拷贝...: 深拷贝出的对象和原对象是完全分开的内存地址,不存在修改一个也修改了另一个的问题。...JSON.parse(JSON.stringify(src))也可以简单实现,只是该实现破坏了原型链;lodash、jquery提供了相应的工具函数来实现深浅拷贝,就不记录了。

96250
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    JS数组的深拷贝和浅拷贝

    一、什么是深拷贝、浅拷贝?...JS里的两种数据类型 1、基本类型:Number、String、Boolean 变量直接按值存放,存放在栈内存,可直接访问 2、引用类型:Object、Array 变量保存的是一个指针,存放在栈内存...So 浅拷贝会导致引用类型A和引用类型B指向同一块内存地址。...改变其中一方内容,都是在原来的内存上做修改会导致对象和源对象都发生改变 深拷贝是开辟一块新的内存地址,将源对象的各个属性逐个复制过去,对拷贝对象和源对象各自的操作互不影响 二、实现方法 1、浅拷贝 1)...object2.c === object2.c); //true 3)Array的slice()和concat() slice(begin, end)返回一个从开始到结束(不包括结束)选择的数组的一部分浅拷贝到一个新数组

    2.4K20

    理清JS的深拷贝与浅拷贝

    大白话讲就是,深拷贝则是开辟新的栈,两个对象对应两个不同的地址,修改一个对象的属性,不会改变另一个对象的属性。 Look See See 例子 浅拷贝:它将X的引用复制到Y。...深拷贝:复制X的所有成员,为Y分配不同的内存位置,然后将复制的成员分配给Y,实现深拷贝。这样,如果X消失了,Y在内存仍然有效。...console.log(employeeDetailsDuplicate); // { name: "王大冶智", family: {name: "后端大家庭"} } 看上面的例子,属性name的值并没有跟着变,但是属性family...objectIsOld); 纯JS方法来深拷贝对象(并非最佳方法) function keepCloning(objectpassed) { if (objectpassed=== null ||...,在实际开发也是非常有用的。

    78050

    浅谈JS对象的深拷贝和浅拷贝

    拷贝和深拷贝的'深浅'主要针对的是对象的‘深度’,常见的对象都是'浅'的,也就是对象里的属性就是单个的属性,而'深'的对象是指一个对象的属性是另一个对象,也就是对象里面嵌套对象,就像嵌套函数一样。...为什么要使用深拷贝和浅拷贝呢?...深拷贝和浅拷贝就是为解决对象的直接赋值后依然'连接'的问题,也就是共用一个引用,一个改变会影响到另一个。...Paste_Image.png 上面代码拷贝完成后更改了obj2.omg.name,结果obj.omg.name也随之改变,说明omg依然存在共用同一个引用的现象,所以浅拷贝拷贝的并不彻底 。...Paste_Image.png 通过上述代码可看出深拷贝拷贝的非常彻底,做到真正意义上的杜绝共用一个引用的问题。

    6.8K20

    js拷贝拷贝

    device-width, initial-scale=1.0"> Document 1234567891011// 在JS...,数据类型分为基本数据类型和引用数据类型两种,对于基本数据类型来说,它的值直接存储在栈内存, // 而对于引用类型来说,它在栈内存仅仅存储了一个引用,而真正的数据存储在堆内存// 当基本类型实现浅拷贝...,存在栈内存,那么相互独立,互不影响。...// 当复杂类型实现浅拷贝,新对象与旧对象仍然同时指向堆内存的同一属性,互不独立,相互影响。...arr也会被修改// 深拷贝 // 它可以将复杂类型的数据相互独立出来,互不影响 // 深拷贝不会拷贝引用类型的引用,而是将引用类型的值全部拷贝一份,形成一个新的引用类型, // 这样就不会发生引用错乱的问题

    2.5K20

    java浅拷贝和深拷贝的区别_js拷贝和浅拷贝的区别

    copyData; copyData == data 结果为false; 在这个例子clone方法干了什么呢?...clone方法就是在内存另建了一个Vector数组对象,但是copyData数组的4个元素只是复制了data数组4个元素的引用; 因此:只有当通过copyData操纵从data复制过来的四个元素...; 相对的在data删除或增加元素也不会对copyData有影响; 综上:只有修改2个数组中共同引用的数据才会对clone的两个数据造成影响;而增加或删除都不会对彼此有影响; 二,深拷贝 什么是深拷贝...深拷贝就相当于是要斩断两者之间的联系; 还是以data和copyData为例,要做到深拷贝,就如下图: 在这个例子拷贝其实就是对四个元素再分别拷贝就行 每一个 假如在这个例子每一个Vector...元素存入的数据不是整型变量;是一个Student对象(有各种属性),要深拷贝的话还得把student对象也进行拷贝一次; 如果引用链很长的话,用这种方式进行深拷贝就会变得困难,Java还有另一种方式可以深拷贝实现

    88230

    c浅拷贝和深拷贝的区别_js拷贝和浅拷贝的区别

    先考虑一种情况,对一个已知对象进行拷贝,编译系统会自动调用一种构造函数——拷贝构造函数,如果用户未定义拷贝构造函数,则会调用默认拷贝构造函数。...这是由于编译系统在我们没有自己定义拷贝构造函数时,会在拷贝对象时调用默认拷贝构造函数,进行的是浅拷贝!即对指针name拷贝后会出现两个指针指向同一个内存空间。...总结:浅拷贝只是对指针的拷贝拷贝后两个指针指向同一个内存空间,深拷贝不但对指针进行拷贝,而且对指针指向的内容进行拷贝,经深拷贝后的指针是指向两个不同地址的指针。...再说几句: 当对象存在指针成员时,除了在复制对象时需要考虑自定义拷贝构造函数,还应该考虑以下两种情形: 1.当函数的参数为对象时,实参传递给形参的实际上是实参的一个拷贝对象,系统自动通过拷贝构造函数实现...16913 深浅拷贝的区别: 浅拷贝是将原始对象的数据型字段拷贝到新对象中去,将引用型字段的“引用”复制到新对象中去,不把“引用的对象”复制进去,所以原始对象和新对象引用同一对象,新对象的引用型字段发生变化

    72130

    一文搞懂JS的赋值·浅拷贝·深拷贝

    我也有些疑惑,于是我去MDN搜一下拷贝相关内容,发现并没有关于拷贝的实质概念,没有办法只能通过实践了,同时去看一些前辈们的文章总结了这篇关于拷贝的内容,本文也属于公众号【程序员成长指北】学习路线JS...,数组对象的属性会根据修改而改变,说明浅拷贝的时候拷贝的已存在对象的对象的属性引用。...补充说明:以上4拷贝方式都不会改变原数组,只会返回一个浅拷贝了原数组的元素的一个新数组。...深拷贝定义 深拷贝会另外拷贝一份一个一模一样的对象,从堆内存开辟一个新的区域存放新对象,新对象跟原对象不共享内存,修改新对象不会改到原对象。...JSON.stringify()实现深拷贝注意点 拷贝的对象的值如果有函数,undefined,symbol则经过JSON.stringify()序列化后的JSON字符串这个键值对会消失 无法拷贝不可枚举的属性

    3.2K20

    JS拷贝与深拷贝

    undefined、null、Boolean、String、Number、Symbol 引用类型:Object、Array、Date、Function、RegExp等 #存储方式 基本类型:基本类型值在内存占据固定大小...,保存在栈内存当中,(不包含闭包的变量) 引用类型:引用类型保存在堆内存,而栈内存存储的是堆内存的存储地址(引用)。...解决这个问题就需要使用拷贝了。 拷贝的方式分两种: 浅拷贝 基本类型:拷贝值 引用类型:拷贝对象引用。...深拷贝 基本类型:拷贝值 引用类型:会创建一个新的引用,将之前的对象完整的拷贝一份出来,并添加至新的引用当中。...这种比较试适合简单的单个数组或者对象使用,简单又方便 #深拷贝 #JSON.stringify() 如果要拷贝的对象包含对象,就需要深拷贝了,一般使用原生的方法JSON.parse(JSON.stringify

    1.6K20

    js拷贝与浅拷贝

    1.区别: 深拷贝和浅拷贝的使用场景是在复杂对象里,即对象的属性还是对象; 浅拷贝是指只复制一层对象,当对象的属性是引用类型时,实质复制的是其引用,当引用指向的值改变时也会跟着变化;深拷贝是指复制对象的所有层级...JSON.parse(_obj); return objClone }  缺点: 非数组对象的属性不能保证以特定的顺序出现在序列化后的字符串。...undefined、任意的函数以及 symbol 值,在序列化过程中会被忽略(出现在非数组对象的属性值时)或者被转换成 null(出现在数组时)。...所有以 symbol 为属性键的属性都会被完全忽略掉,即便 replacer 参数强制指定包含了它们。...Object.assign()  Underscore —— _.clone() lodash —— _.clone() 数组concat和slice方法

    1.3K30

    js库 - 浅拷贝 & 深拷贝

    然后面试中经常会问、业务也经常会遇到的问题就是深浅拷贝的问题了。 栈内存简单数据类型直接拷贝就能得到一个副本,但是复杂数据类型的拷贝如果也想得到一个副本,就需要深拷贝了。...这是因为: 数组、对象这类复杂类型数据结构,在栈内存里存放的只是指向堆内存存放数据的地址, 你直接d = c; 拷贝的也是一个副本,但这个副本区别之处是,他并非数据的副本,而是栈内存地址的副本。...深拷贝 具体深拷贝就是要理解了复杂类型拷贝的缺点,然后再进行弥补。 既然想要复杂类型也像简单类型那样拷贝一个新数据的话,就不单单是拷贝地址了。...对object类型,还有构造类需要区分。直接返回[object String]这样类型的。但其实在深拷贝阶段,直接将其放到object形式处理了。...如果循环过程,数组嵌套复杂类型,再次递归调用深拷贝方法。 对于对象,新建一个对象,然后for in遍历拷贝非原型值。如果循环过程,对象嵌套复杂类型,再次递归调用深拷贝方法。

    2.1K30

    JS专栏】JS对象的浅拷贝与深拷贝

    1. object.assign object.assign 是 ES6 Object 的一个方法,该方法可以用于JS 对象的合并等多个用途,其中一个用途就是可以进行浅拷贝。...3. concat 拷贝数组 数组的 concat 方法其实也是浅拷贝,所以连接一个含有引用类型的数组时,需要注意修改原数组的元素的属性,因为它会影响拷贝之后连接的数组。...深拷贝则不同,对于复杂引用数据类型,其在堆内存完全开辟了一块内存地址,并将原有的对象完全复制过来存放。 深拷贝后的对象与原始对象是相互独立、不受影响的,彻底实现了内存上的分离。...总的来说,深拷贝的原理可以总结如下: 将原对象从内存完整地拷贝出来一份给新对象,并从堆内存开辟一个全新的空间存放新对象,且新对象的修改并不会改变原对象,二者实现真正的分离。 1....拷贝的对象的值如果有函数、undefined、symbol 这几种类型,经过 JSON.stringify 序列化之后的字符串这个键值对会消失; 拷贝 Date 引用类型会变成字符串; 无法拷贝不可枚举的属性

    2.3K40

    js拷贝与深拷贝

    拷贝拷贝了基本类型数据和引用类型数据的指针,叫浅拷贝拷贝的对象里,如果没有引用类型的数据,可以使用浅拷贝,方便快捷。...如果有引用类型,那么存在被篡改的风险,更应该使用深拷贝拷贝方法 1、手撸一个浅拷贝函数 1function shallowClone(obj) { 2 const newObj = {};...("fx is a great girl") 10 } 11} 12var newObj = Object.assign({}, fxObj); 13 3、数组的slice、concat方法 深拷贝...完全拷贝了基本类型和引用类型内部所有数据,叫深拷贝拷贝方法 1、JSON暴力转换 1const obj2=JSON.parse(JSON.stringify(obj1)); 但是这种方式存在弊端,...new Date(obj); 4 if (obj instanceof RegExp) return new RegExp(obj); 5 // 可能是对象或者普通的值 如果是函数的话是不需要深拷贝

    1.1K10

    JS拷贝与浅拷贝

    其实在工作写代码和面试,会经常碰到这两个概念:深拷贝,浅拷贝。但今天的重点是深拷贝。 下面我将简单介绍下什么是深拷贝,浅拷贝?...这样导致的后果是,新对象和老对象相同的Object类型的属性值在内存的指向是一样的,也就是新对象和老对象的Object类型的同一属性值指向的是同一块内存。因此修改新对象或者原对象,都会互相干扰。...深拷贝是将一个Object对象的内容完全拷贝一份给新对象。修改原对象的属性或者属性值,都不会影响新对象。原对象和新对象是完全独立的,互不影响。...今天的重点是深拷贝,浅拷贝没啥可讲的。 talk is cheap,show me the code! 上浅拷贝代码: function shallowCopy(obj) { if (!...} } return newObj; } else { return obj; } } 可以看到,我写的这个方法

    2.1K10
    领券