分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 软件开发

js深拷贝与浅拷贝的区别及实现

发布时间:2023-09-06 02:06责任编辑:胡小海关键词:js

1. 对于基本数据类型

其值在内存中占据着固定大小的空间,并被保存在栈内存中。当一个变量向另一个变量复制基本类型的值,会创建这个值的副本,并且我们不能给基本数据类型的值添加属性。其为深拷贝。

2. 对于引用类型

 浅拷贝:只复制指向某个对象的指针,而不复制对象本身,新旧对象共享一块内存; 改变一个对象,另一个会随之改变;
 深拷贝:复制并创建一个一模一样的对象,不共享内存,修改新对象,旧对象保持不变。

01 浅拷贝的实现

var arr = [1, 2, 3, ‘4‘];var arr2 = arr;arr2[1] = "test"; console.log(arr); // [1, "test", 3, "4"]console.log(arr2); // [1, "test", 3, "4"]

我们可以看到,简单的赋值便是浅拷贝,一个对象改变,另一个也随之改变。

02 深拷贝的实现

1.使用JSON.stringfy();

var obj1 = { a: { b: 10 } };var obj2 = JSON.parse(JSON.stringify(obj1));obj2.a.b = 20;console.log(obj1); //{ a: { b: 10 } } ?console.log(obj2); //{ a: { b: 20 } }console.log(obj1 === obj2); ??// falseconsole.log(obj1.a === obj2.a); ??// false

2.使用递归实现

function deepClone(obj){ ???let objClone = Array.isArray(obj)?[]:{}; ???if(obj && typeof obj==="object"){ ???????for(key in obj){ ???????????if(obj.hasOwnProperty(key)){ ???????????????//判断ojb子元素是否为对象,如果是,递归复制 ???????????????if(obj[key]&&typeof obj[key] ==="object"){ ???????????????????objClone[key] = deepClone(obj[key]); ???????????????}else{ ???????????????????//如果不是,简单复制 ???????????????????objClone[key] = obj[key]; ???????????????} ???????????} ???????} ???} ???return objClone;} ???let a=[1,2,3,4],b=deepClone(a);a[0]=2;console.log(a);//[2, 2, 3, 4] console.log(b);// [1, 2, 3, 4]

3.JQuery的extend()。

$.extend( [deep ], target, object1 [, objectN ] )

deep表示是否深拷贝,true为深拷贝,false为浅拷贝;

target object类型 目标对象,其他对象的成员属性将被附加到该对象上。

object1  objectN可选。 Object类型 第一个以及第N个被合并的对象。 

let a=[0,1,[2,3],4], ???b=$.extend(true,[],a);a[0]=-1;a[2][0]=-1;console.log(a);//[-1,1,[-1,3],4]console.log(b);//[0,1,[2,3],4]

特别说明:concat(),slice()不是深拷贝,因为其只是一级属性是深拷贝,二级属性就不是了。

let a=[0,1,[2,3],4], ???????b=a.slice();a[0]=-1;a[2][0]=-1;console.log(a);//[-1,1,[-1,3],4]console.log(b);//[0,1,[-1,3],4]
let a=[0,1,[2,3],4], ???????b=[].concat(a);a[0]=-1;a[2][0]=-1;console.log(a);//[-1,1,[-1,3],4]console.log(b);//[0,1,[-1,3],4]

js深拷贝与浅拷贝的区别及实现

原文地址:https://www.cnblogs.com/sunmarvell/p/9384948.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved