记一下js深拷贝的几种方法 使用递归 通过JSON对象 通过jQuery的extend方法 Object.assign() lodash函数 使用递归 //使用递归的方式实现数组、对象的深拷贝 function...deepClone(obj) { //判断拷贝的要进行深拷贝的是数组还是对象,是数组的话进行数组拷贝,对象的话进行对象拷贝 var objClone = Array.isArray(obj)...objClone[key] = obj[key]; } } } } return objClone; } 通过JSON对象 //通过js...(_obj); return objClone; } tip: * 无法实现对对象中方法的深拷贝 通过jQuery的extend方法 var array = [1,2,3,4]; var newArray...= $.extend(true,[],array); Object.assign() 对象中只有一级属性,没有二级属性的时候,为深拷贝 对象中有对象的时候,在二级属性以后就是浅拷贝 lodash函数
(obj) ); Object.assign(targetObj,sourceObj),浅拷贝 不是深拷贝,循环引用、各种数据类型都可以拷贝,引用类型不是深拷贝 它不会拷贝对象的继承属性; 它不会拷贝对象的不可枚举的属性...; 不可以拷贝对象中的对象; 可以拷贝 Symbol 类型的属性; 无法正确拷贝属性和属性 可以拷贝undefined/boolean/null/function/Date/RegExp/array/array...中的对象; 参考阮一峰文档: https://es6.ruanyifeng.com/#docs/object-methods#Object-assign 扩展运算符,浅拷贝 不是深拷贝,循环引用、各种数据类型都可以拷贝...,引用类型不是深拷贝 JSON.parse(JSON.stringfiy()),不完全深拷贝 拷贝的对象的值中如果有函数、undefined、symbol 这几种类型,经过 JSON.stringify...序列化之后的字符串中这个键值对会消失; 拷贝 Date 引用类型会变成字符串; 无法拷贝不可枚举的属性; 无法拷贝对象的原型链; 拷贝 RegExp 引用类型会变成空对象; 对象中含有 NaN、Infinity
---------------------------------------------------------------------------- var ary1=[1,2]; es5: //方法一...:适用 单层 数组嵌套的深拷贝 var ary2 = ary1.concat(); //方法二:适用 多层 数组嵌套的深拷贝 var ary2 = JSON.parse(JSON.stringify(ary1...)); //此方法适用于Oject的深度拷贝,因为Array属于Oject类型,所以也适用于此处; //需要注意的是:作为Oject的深度拷贝时,要复制的function会直接消失,所以这个方法只能用在单纯只有数据的对象...es6: // 方法三:适用 单层 数组嵌套的深拷贝 var ary2 = [...ary1]; // 方法四:适用 单层 数组嵌套的深拷贝 var [...ary2] = ary1; //方法五:通过递归实现...多层 的深拷贝 function deepCopy(source){ if (typeof source !
; console.log(arr); // [{old: 'new'}, ['new']] console.log(new_arr); // [{old: 'new'}, ['new']] 下面是浅拷贝一个通用方法...数组的深拷贝 方法一:JSON.stringify()不仅可拷贝数组还能拷贝对象(但不能拷贝函数,也不能解决循环引用问题) var arr = ['old', 1, true, ['old1', 'old2...下面是深拷贝一个通用方法,实现思路:拷贝的时候判断属性值的类型,如果是对象,继续递归调用深拷贝函数 var deepCopy = function(target) { // 只拷贝对象 if (typeof...deepCopy(target[key]) : target[key]; } } return result; } 其中上述方法一、方法二都解决不了循环引用的问题。...方法三,结合map(将方法二的递归改造,解决循环引用问题): var deepCopy = function (target, map = new Map()) { // 只拷贝对象 if (typeof
在JavaScript中,实现深拷贝(deep copy)有多种方法。以下是一些常用的方法: 1....使用JSON方法(局限性大): function deepClone(obj) { return JSON.parse(JSON.stringify(obj)); } 这个方法简单易用,但对于循环引用...3.使用库: lodash库的_.cloneDeep方法: import _ from 'lodash'; const newObj = _.cloneDeep(oldObj); ramda库的cloneDeep...方法: import R from 'ramda'; const newObj = R.cloneDeep(oldObj); 这些库提供了许多实用的函数,但会增加项目的依赖。...每种方法都有其优点和局限性,应根据具体需求选择合适的方法。
1、使用递归(循环)的方式实现深拷贝 //使用递归的方式实现数组、对象的深拷贝 function deepClone1(obj) { //判断拷贝的要进行深拷贝的是数组还是对象,是数组的话进行数组拷贝...,对象的话进行对象拷贝 //进行深拷贝的不能为空,并且是对象或者是 if (obj && typeof obj === "object") { var objClone = Array.isArray...lodash很热门的函数库,提供了 lodash.cloneDeep()实现深拷贝 3、通过 JSON 对象实现深拷贝 //通过js的内置对象JSON来进行数组对象的深拷贝 function deepClone2..._obj = JSON.stringify(obj), objClone = JSON.parse(_obj); return objClone; } 4、Object.assign()拷贝...(并不深,一级拷贝) 当对象中只有一级属性,没有二级属性的时候,此方法为深拷贝,但是对象中有对象的时候,此方法,在二级属性以后就是浅拷贝。
,但是es6有一个深度赋值的方法也可以解决这个问题, let obj= Object.assign({}, obj)也可以解决。...深度拷贝是当当数组a变量成数组b的时候,b改变里面的数组数值的时候,a里面的数组数组不随着改变。...a的数组值而深度拷贝则不会呢?...因为浅度拷贝指向的是同一个内存,而深度拷贝是增加了一个新的内存,所以不会影响到原来a的内存, 所 以就不会改变原来的值 eg. var arr = ["a", "b", "c", "d", "e"];...arrDeepCopy(source[item]) : source[item]; return sourceCopy; } 这种方法简单粗暴,但是利用JS本身的函数我们可以更加便捷地实现这个操作
device-width, initial-scale=1.0"> Document 1234567891011// 在JS...数据类型分为基本数据类型和引用数据类型两种,对于基本数据类型来说,它的值直接存储在栈内存中, // 而对于引用类型来说,它在栈内存中仅仅存储了一个引用,而真正的数据存储在堆内存中// 当基本类型实现浅拷贝...// 当复杂类型实现浅拷贝,新对象与旧对象仍然同时指向堆内存的同一属性,互不独立,相互影响。...// 也就是说当我们创建新数组newArr时,赋予newArr的是arr在栈中的地址(指针), // 其实仍与旧数组arr共享同一个内存,所以修改新数组newArr后,旧数组arr也会被修改// 深拷贝...// 它可以将复杂类型的数据相互独立出来,互不影响 // 深拷贝不会拷贝引用类型的引用,而是将引用类型的值全部拷贝一份,形成一个新的引用类型, // 这样就不会发生引用错乱的问题,使得我们可以多次使用同样的数据
来源 | https://www.fly63.com/ 浅拷贝与深拷贝 浅拷贝是创建一个新对象,这个对象有着原始对象属性值的拷贝。...如果属性是基本类型,拷贝的就是基本类型的值,如果属性是引用类型,拷贝的是内存地址 。 如果不进行深拷贝,其中一个对象改变了对象的值,就会影响到另一个对象的值。...1、JSON.parse(JSON.stringify(obj)) 一般情况下对普通对象需要进行深拷贝,可以使用这种方法进行深拷贝操作,这种是最简单且代码量最少的深拷贝方法。...;无法拷贝copyObj对象原型链上的属性和方法;对象转变为 date 字符串。...jQuery.isFunction(target)) { target = {}; } 总结 以上就是我今天跟你分享的4个关于JavaScript深拷贝的方法,希望对你有帮助。
); 使用JSON.parse(JSON.stringify(arr))的方式进行深拷贝时,并不会拷贝函数。...JSON.stringify()方法会忽略JavaScript对象中的函数成员,并将其转换为空值。...],getValue(){ return this.a; }}; const clonedObj = deepClone(obj); console.log(clonedObj); 这种方式会拷贝方法...) 是数组对象的一个方法,用于从数组中提取指定位置的元素创建一个新的数组。...slice() 方法不会修改原始数组,而是返回一个浅拷贝(shallow copy)的新数组。 slice() 方法可以接收两个参数,即 start 和 end。
学习一下vuex的deepCopy源码 https://github.com/vuejs/vuex/blob/dev/src/util.js#L22 注释 我直接把第29行用的find函数放到里面了..., 这样好看一点 /** * 深拷贝 * @param {*} obj 拷贝对象(object or array) * @param {*} cache 缓存数组 */ function deepCopy...image 2.typeof方法对应的是基本类型 检测数组和对象返回都是'object' ?...image 深拷贝的另一个简单的方法 直接使用JSON.parse(JSON.stringify(Object))来进行 缺点: 如果对象或者数组里有函数什么的, 就会出问题啦 ?...image.png 最后 更多小方法, 可以查看https://github.com/klren0312/daliy_knowledge/issues
解决这个问题就需要使用拷贝了。 拷贝的方式分两种: 浅拷贝 基本类型:拷贝值 引用类型:拷贝对象引用。...#浅拷贝 #Object.assign() 使用原生的 Object.assign() 方法就可以实现引用类型的浅拷贝 let obj1 = { value: 'a' } let obj2 =...()方法只会拷贝对象的引用地址 #扩展运算符 使用 ES6 的扩展运算符也可以达到浅拷贝的效果 let arr1 = [1,2,3] let arr2 = [...arr1] console.log(arr1...这种比较试适合简单的单个数组或者对象使用,简单又方便 #深拷贝 #JSON.stringify() 如果要拷贝的对象中包含对象,就需要深拷贝了,一般使用原生的方法JSON.parse(JSON.stringify...console.log(obj1.obj === obj2.obj);// false 输出 false 就说明克隆成功了 这个也会有一些缺陷,比如 undefined 或者有函数的时候就会出现问题,最好的方法是使用递归函数
然后面试中经常会问、业务中也经常会遇到的问题就是深浅拷贝的问题了。 栈内存中简单数据类型直接拷贝就能得到一个副本,但是复杂数据类型的拷贝如果也想得到一个副本,就需要深拷贝了。...深拷贝 具体深拷贝就是要理解了复杂类型拷贝的缺点,然后再进行弥补。 既然想要复杂类型也像简单类型那样拷贝一个新数据的话,就不单单是拷贝地址了。...如果是简单类型,返回typeof方法返回的对应值即可。 这里特殊处理了null,因为他用typeof返回object。 然后对于复杂类型的数据,再深入判断其实array类型还是object类型。...:48:44 * @purpose 深度克隆 * @param {variateName} origin: 要克隆的对象变量名 * @output {对应值} 根据origin...如果循环过程中,数组中嵌套复杂类型,再次递归调用深拷贝方法。 对于对象,新建一个对象,然后for in遍历拷贝非原型值。如果循环过程中,对象中嵌套复杂类型,再次递归调用深拷贝方法。
1.区别: 深拷贝和浅拷贝的使用场景是在复杂对象里,即对象的属性还是对象; 浅拷贝是指只复制一层对象,当对象的属性是引用类型时,实质复制的是其引用,当引用指向的值改变时也会跟着变化;深拷贝是指复制对象的所有层级...对包含循环引用的对象(对象之间相互引用,形成无限循环)执行此方法,会抛出错误。 所有以 symbol 为属性键的属性都会被完全忽略掉,即便 replacer 参数中强制指定包含了它们。...不可枚举的属性会被忽略 对于引用类型:object,array,date,regexp,function,err,只能深拷贝对象和数组,对于其他种类的对象,会失真。...这种方法比较适合平常开发中使用,因为通常不需要考虑对象和数组之外的类型。...Object.assign() Underscore —— _.clone() lodash —— _.clone() 数组中concat和slice方法
浅拷贝 浅拷贝创建一个新对象,这个对象仅对原对象的属性进行拷贝,属性值是基本类型时,拷贝的是原数据,属性值是引用类型时,拷贝的是指针 实现浅拷贝的几种方法 Object.assign let
value[key]); } return result; } return _deepClone(obj); } 三、ES6扩展运算符,一维对象则是深拷贝...,二维及以上则是浅拷贝。
1. object.assign object.assign 是 ES6 中 Object 的一个方法,该方法可以用于JS 对象的合并等多个用途,其中一个用途就是可以进行浅拷贝。...该方法的第一个参数是拷贝的目标对象,后面的参数是拷贝的来源对象(也可以是多个来源)。...3. concat 拷贝数组 数组的 concat 方法其实也是浅拷贝,所以连接一个含有引用类型的数组时,需要注意修改原数组中的元素的属性,因为它会影响拷贝之后连接的数组。...slice 方法也比较有局限性,因为它仅仅针对数组类型。...实现深拷贝方法 下面是一个实现 deepClone 函数封装的例子,有几点需要注意下。
深复制实现代码如下: 可以从两个方法进行解决。...第一种方法、通过递归解析解决 var china = { nation : '中国', birthplaces:['北京','上海','广州'], skincolr :'yellow...return c } var result = {name:'result'} result = deepCopy(china,result) console.dir(result) 第二种方法
浅拷贝 只拷贝了基本类型数据和引用类型数据的指针,叫浅拷贝 被拷贝的对象里,如果没有引用类型的数据,可以使用浅拷贝,方便快捷。...如果有引用类型,那么存在被篡改的风险,更应该使用深拷贝 浅拷贝方法 1、手撸一个浅拷贝函数 1function shallowClone(obj) { 2 const newObj = {};...console.log("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 // 可能是对象或者普通的值 如果是函数的话是不需要深拷贝
其实在工作写代码和面试中,会经常碰到这两个概念:深拷贝,浅拷贝。但今天的重点是深拷贝。 下面我将简单介绍下什么是深拷贝,浅拷贝?...今天的重点是深拷贝,浅拷贝没啥可讲的。 talk is cheap,show me the code! 上浅拷贝代码: function shallowCopy(obj) { if (!...JSON.stringify(obj4)); console.log(obj5); obj5.introduce(); 运行截图: [deepCopy1.png] [deepCopy2.png] 可以看到采用这种方法...所以通过JSON.parse和JSON.stringify实现的深拷贝不完美。 那么我分享下我自己写的一个对象深拷贝的方法,这就是我个人比较常用的方案了。...} } } return newObj; } else { return obj; } } 可以看到,我写的这个方法中
领取专属 10元无门槛券
手把手带您无忧上云