js实现深拷贝的几种方式

1、通过递归方式实现[深拷贝],比较全面的深拷贝,缺点是较为繁琐

vbnet 复制代码
function deepClone(obj) {
	var target = {};
	for (var key in obj) {
		if (Object.prototype.hasOwnProperty.call(obj, key)) {
			if (typeof obj[key] === 'object') {
				target[key] = deepClone(obj[key]);
			} else {
				target[key] = obj[key];
			}
		}
	}
	return target;
}

2、JSON.parse(JSON.stringify(obj)) 满足一般使用场景,缺点是无法实现对象中方法(function)的深拷贝

javascript 复制代码
let obj = {
	id: 1,
	name: '张三',
	age: 10,
}
let newObj = JSON.parse(JSON.stringify(obj))

3、jQuery的extend方法实现深拷贝

ini 复制代码
var array = [1,2,3,4];
var newArray = $.extend(true,[],array); // true为深拷贝,false为浅拷贝

4、Object.assign(obj1, obj2)实现深拷贝,只有一级属性为深拷贝,二级属性后就是[浅拷贝]

bash 复制代码
let obj = {
	id: 1,
	name: '张三',
	age: 10,
}
let newObj = Object.assign({}, obj)

5、[扩展运算符]实现深拷贝,只有一级属性为深拷贝,二级属性后就是浅拷贝

css 复制代码
var obj = {
    a: 1,
    b: 2
}
 
var obj1 = {...obj}

6、数组使用数组方法进行深拷贝(concat、slice)只有一级属性为深拷贝,二级属性后就是浅拷贝,如[1,2,3,[1,2,3]]

ini 复制代码
var arr1 = [1, 2, 3, 4]
var arr2 = arr1.concat()
var arr3 = arr1.slice(1)

7、使用Vue提供的观察者模式实现数组深度复制,需要复制的数组

ini 复制代码
let arr1 = [{name: "小明", age: 18}, {name: "小芳", age: 20}];
let arr2 = Vue.util.extend([], arr1);

8、使用ES6提供的扩展运算符实现数组深度复制

ini 复制代码
//需要复制的数组
let arr1 = [{name: "小明", age: 18}, {name: "小芳", age: 20}];
//使用ES6的扩展运算符实现数组深度复制
let arr2 = [...arr1];
相关推荐
鹏多多12 分钟前
前端音频兼容解决:音频神器howler.js从基础到进阶完整使用指南
前端·javascript·音视频开发
前端架构师-老李43 分钟前
12、electron专题(electron-builder)
前端·javascript·electron
艾小码1 小时前
这份超全JavaScript函数指南让你从小白变大神
前端·javascript
reembarkation1 小时前
vue 右键菜单的实现
前端·javascript·vue.js
gplitems1237 小时前
Consua WordPress Theme — Business Consulting Sites That Convert With Clarity
javascript
雾削木8 小时前
stm32解锁芯片
javascript·stm32·单片机·嵌入式硬件·gitee
2301_768350239 小时前
Vue第二期:组件及组件化和组件的生命周期
前端·javascript·vue.js
小周同学:9 小时前
Vue项目中将界面转换为PDF并导出的实现方案
javascript·vue.js·pdf
今天头发还在吗11 小时前
【React】TimePicker进阶:解决开始时间可大于结束时间的业务场景与禁止自动排版
javascript·react.js·ant design
今天头发还在吗11 小时前
【React】动态SVG连接线实现:图片与按钮的可视化映射
前端·javascript·react.js·typescript·前端框架