js-深拷贝浅拷贝
深拷贝浅拷贝可以考察一个人的很多方面,例如:基本功,逻辑能力,编码能力;
在实际工作中的应用:比如用于页面展示的数据状态,与需要传给后端的数据包中,有部分字段的值不一致的话,就需要在传参时根据接口文档覆写那几个字段的值。最常见的可能就是 status 这个参数了。界面上的展示需要 Boolean 值,而后端同学希望拿到的是 Number 值,1 或者 0。为了不影响展示效果,往往就需要深拷贝一下,再进行覆写,否则界面上就会因为某些值的变化,出现奇怪的现象。
一、赋值
JavaScript原始数据类型:number,string,boolean,null,undefind,symbol他们的赋值很简单,且赋值后两个变量互不影响;
let test1 = 'JavaScript';
let test2 = test1;
// test2: JavaScript
test1 = 'JavaScript_change';
// test2: JavaScript
// test1: JavaScript_change
另外的引用数据类型:object和array,深拷贝和浅拷贝的出现就与这两个数据类型有关。
const obj={a:1,b:2};
const obj2=obj;
obj2.a=3;
console.log(obj.a);//
依照赋值的思路,对 Object 引用类型进行拷贝,就会出问题。很多情况下,这不是我们想要的。这时,就需要用浅拷贝来实现了。
二、浅拷贝
理解:创建一个新的对象,把原有的对象属性值,完整地拷贝过来。其中包括了原始类型的值,还有引用类型的内存地址。
const obj = {a:1, b:2};
const obj2 = Object.assign({}, obj);
obj2.a = 3;
console.log(obj.a); //
改变了obj2:a的属性,但是obj:a的属性没有发生改变;
可是这样的拷贝还有瑕疵:
const arr = [{a:1,b:2}, {a:3,b:4}];
const newArr = [].concat(arr); newArr.length = 1; // 为了方便区分,只保留新数组的第一个元素
console.log(newArr); // [{a:1,b:2}]
console.log(arr); // [{a:1,b:2},{a:3,b:4}] newArr[0].a = 123; // 修改 newArr 中第一个元素的a
console.log(arr[0]); // {a: 123, b: 2},竟然把 arr 的第一个元素的 a 也改了
对象的object.assign(),数组的 Array.prototype.slice() Array.prototype.concat(),还有 ES6 的 扩展运算符
,都有类似的问题,它们都属于浅拷贝。这一点,在实际工作中处理数据的组装时,要格外注意。
所以浅拷贝可以这样理解:只拷贝第一层的原始类型值,和第一层的引用类型的地址。
三、深拷贝
我们希望当拷贝多层级的对象时也能实现互不影响的效果。所以,深拷贝的概念也就油然而生了。我们将深拷贝定义为:拷贝所有的属性值,以及属性地址指向的值的内存空间。
也就是说:当遇到对象时,就再新开一个对象,然后将第二层源对象的属性值,完整的拷贝到这个新开的对象中。
按照浅拷贝的思路,很容易就想到了递归调用。所以,就可以封装一个深拷贝的方法:
function deepClone(obj) {
if(!obj && typeof obj !== 'object'){
return;
}
var newObj= toString.call(obj) === '[object Array]' ? [] : {};
for (var key in obj) {
if (obj[key] && typeof obj[key] === 'object') {
newObj[key] = deepClone(obj[key]);
} else {
newObj[key] = obj[key];
}
}
return newObj;
}
结果:
let arr = [{a:1,b:2}, {a:3,b:4}];
let newArr = deepClone(arr); newArr.length = 1; // 为了方便区分,只保留新数组的第一个元素
console.log(newArr); // [{a:1, b:2}]
console.log(arr); // [{a:1, b:2}, {a:3, b:4}] newArr[0].a = 123; // 修改 newArr 中第一个元素的 a
console.log(arr[0]); // {a:1, b:2}
达到了想要的效果;
但是,这个方法貌似存在引用丢失问题,比如:
var b = {};
var a = {a1: b, a2: b}; a.a1 === a.a2 // true var c = clone(a);
c.a1 === c.a2 // false
四、利用JSON解决深拷贝问题
let newArr2 = JSON.parse(JSON.stringify(arr));
console.log(arr[0]); // {a:1, b:2}
newArr2[0].a = 123;
console.log(arr[0]); // {a:1, b:2}
JOSN.parse()方法将JSON字符串转化为对象,JSON.stringify()方法将JavaScript字符串转化为对象。
但是,JSON 内部用了递归的方式,数据一但过多,就会有递归爆栈的风险。
五、lodash的_.clone和_.deepclone
const _ = require('lodash');//*
本质上的原因是对象引用的是地址,直接赋值会把引用地址也复制给新值。
浅复制只会将对象的各个属性进行依次复制,会把引用地址也复制。
深拷贝是会递归源数据,把新值的引用地址给换掉。
const _ = require('lodash')
var objects = [{ 'a': 1 }, { 'b': 2 }];
var shallow = _.clone(objects);
shallow[0].a = 333;
console.log(shallow,objects)//a=333,a=333
console.log(shallow[0] === objects[0])//true
const _ = require('lodash')
var objects = [{ 'a': 1 }, { 'b': 2 }];
var shallow = _.cloneDeep(objects);
shallow[0].a = 333;
console.log(shallow,objects)//a=333,a=1
console.log(shallow[0] === objects[0])//false
object.assign方法:
object.assign方法用于对象的合并,将源对象(source)的所有可枚举属性,复制到目标对象(target)。
object.assign方法的第一个参数是目标对象,剩下所有的参数都是源对象。
如果目标对象与源对象有同名属性,或多个源对象有同名属性,则后面的属性会覆盖前面的属性。
如果只有一个参数该方法会直接返回该参数,若参数不是对象,则会先转成对象然后返回。
js-深拷贝浅拷贝的更多相关文章
- js 深拷贝和浅拷贝
js 深拷贝和浅拷贝 先举一下项目中遇到的两个例子: 例子1: var json = $.parseJSON(data.data);//data.data是接口返回的值var a = json.cha ...
- js对象浅拷贝和深拷贝详解
js对象浅拷贝和深拷贝详解 作者:i10630226 字体:[增加 减小] 类型:转载 时间:2016-09-05我要评论 这篇文章主要为大家详细介绍了JavaScript对象的浅拷贝和深拷贝代码,具 ...
- 老生常谈之js深拷贝与浅拷贝
前言 经常会在一些网站或博客看到"深克隆","浅克隆"这两个名词,其实这个很好理解,今天我们就在这里分析一下js深拷贝和浅拷贝. 浅拷贝 我们先以一个例子来说明 ...
- 关于JS深拷贝和浅拷贝
最近在前端开发中遇到一些问题,就是数组中的某个对象或某个对象的值改变之后,在不刷新页面的时候需要重新渲染值时,页面显示的还是原来的数据.比如: data{ A:[{id:1,num:1},{id:2, ...
- JS Object Deep Copy & 深拷贝 & 浅拷贝
JS Object Deep Copy & 深拷贝 & 浅拷贝 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Refe ...
- 理解JS深拷贝
前言: JS的拷贝(copy),之所以分为深浅两种形式,是因为JS变量的类型存在premitive(字面量)与reference(引用)两种区别.当然,大多数编程语言都存在这种特性. 众所周知,内存包 ...
- js深拷贝你还不会吗
js深拷贝 在讲正题之前我们要先了解数据存储的方式 数据存储方式 在讲之前我们要先知道值类型和引用类型的存储方式. 在JavaScript数据类型中有两种数据类型. 值类型:字符串(String).数 ...
- c# 内存的具体表现- 通用类型系统 深拷贝 浅拷贝 函数传参
c# 通用类型系统 及变量在 深拷贝 浅拷贝 函数传参 中的深层次的表现 在编程中遇到了一些想不到的异常,跟踪发现,自己对于c#变量在内存上的表现理解有偏差,系统的学习并通过代码实验梳理了各种情况下, ...
- python集合增删改查,深拷贝浅拷贝
集合 集合是无序的,不重复的数据集合,它里面的元素是可哈希的(不可变类型),但是集合本身是不可哈希(所以集合做不了字典的键)的.以下是集合最重要的两点: 去重,把一个列表变成集合,就自动去重了. 关系 ...
- JavaScript之深拷贝&浅拷贝
深拷贝&浅拷贝,说起来都明白,但是说不出所以然.今天就系统的整理下思绪,一点点的将其分析出所以然 废话不多说 浅拷贝 简单的说就是一个值引用,学生时代接触过编程的人都应该了解过指针,浅拷贝可以 ...
随机推荐
- 从《华为的冬天》到AI的冬天 | 甲子光年
知难不难,惶者生存. 作者 | DougLong 编辑 | 火柴Q.甲小姐 *本文为甲子光年专栏作家DougLong独家稿件.作者为AI从业者.Gary Marcus<Rebooting AI& ...
- 1041. Robot Bounded In Circle
本题题意: 一开始一个机器人站在了(0,0)上,面朝的方向是北,收到三个序列G,L,R. G:直走 L:向左转 R:向右转 按序执行,永远重复. 返回TRUE,如果处在一个圈. 第一个卡住的点: 1. ...
- Android SDK自带调试优化工具
Android sdk中自带了一些分析内存,界面调优的非常实用的工具,这对于分析和调试我们的应用十分有帮助,由于我使用的是linux版本的sdk,所以就以linux版本的工具做一个介绍,这些工具的具体 ...
- hi3559v100 sdk中双系统AMP架构的初步了解
hi3559v100是海思推出的camera soc处理器.采用的是双核处理器.一个是a7,运行的linux3.18内核.一个是a17使用的是huaweiliteos操作系统,Hi3559V100 系 ...
- 联邦学习 Federated Learning 相关资料整理
本文链接:https://blog.csdn.net/Sinsa110/article/details/90697728代码微众银行+杨强教授团队的联邦学习FATE框架代码:https://githu ...
- java面试填坑解惑篇
感谢原文出处:https://www.cnblogs.com/javazhiyin/ NO1.请简单描述JDK和JRE的区别? NO1.回答JDK和JRE的区别这道题,首先要回答两个名次的概念,JDK ...
- k8s中的client-go编译成功
要分版本的,好像1.4跟12差别好大. 1.4中用的模块管理还是vendor,12就换成mod了. 这个要记住差异. 一,从github上下载client-go的1.4版本 https://githu ...
- ora-01489 字符串连接的结果过长 解决方案
如下代码,使用listagg进行分组拼接时,常常会报 ora-01489 错误,造成该报错的主要原因是:oracle对字符变量的长度限制,正常情况下,oracle定义的varchar2类型变量的长度不 ...
- NN tutorials:
确实“人话”解释清楚了 ^_^ 池化不只有减少参数的作用,还可以: 不变性,更关注是否存在某些特征而不是特征具体的位置.可以看作加了一个很强的先验,让学到的特征要能容忍一些的变化.防止过拟合,提高模型 ...
- Koa 中间件的执行顺序
中间件工作原理 初始化koa实例后,我们会用use方法来加载中间件(middleware),会有一个数组来存储中间件,use调用顺序会决定中间件的执行顺序. 每个中间件都是一个函数(不是函数将报错), ...