一文带你了解js数据储存及深复制（深拷贝）与浅复制(浅拷贝)

背景

在日常开发中，偶尔会遇到需要复制对象的情况，需要进行对象的复制。

由于现在流行标题党，所以，一文带你了解js数据储存及深复制（深拷贝）与浅复制(浅拷贝)

理解

首先就需要理解 js 中的数据类型了
js 数据类型包含

  1. 基础类型:String、Number、 null、undefined、Boolean以及ES6引入的Symbol、es10中的BigInt
  2. 引用类型:Object

由于 js 对变量的储存是栈内存、堆内存完成的。

  • 基础类型将数据保存在栈内存中
  • 引用类型将数据保存在堆内存中

由于 js 在数据读取和写入的时候，对基础类型是直接读写栈内存中的数据，引用类型是将一个内存地址保存在栈内存中，读写都是修改栈内存中指向堆内存的地址

以如下代码为例

let obj = {
  a:1,
  arr:[1,3,5,7,9],
  b:2,
  c:{
    num:100
  }
}
let num = 10

在内存中的表现为


内存中的展示

我们声明个obj1

let obj1 = obj;
console.log(obj1 == obj);//true

因为这个赋值，把内存变成了这样

赋值后

然后，内存中只是给js栈内存新增了一个指向堆内存的地址而已，这种就叫做浅复制。因为如图可以看到，如果我们修改obj.a的话，实际修改的是堆内存0x88888888中的变量a，由于obj1也指向这个地址，所以obj1.a也被修改了

深复制是指，不单单复制引用地址，连堆内存都复制一遍，使obj和obj1不指向同一个地址。

代码

分开来看深复制与浅复制

浅复制

由上述图可知，浅复制只是复制第一层，也就是，基本类型复制新值，引用类型复制引用地址

浅复制可以使用的方案有循环赋值、扩展运算符、object.assign(),

let obj = {
  a:1,
  arr:[1,3,5,7,9],
  b:2,
  c:{
    num:100
  }
}
function clone1(obj){ // 使用循环赋值
  let b = {};
  for(let key in obj){
    b[key] = obj[key]
  }
  return b
}
function clone2(obj){ // 使用扩展运算符
  let b = {
    ...obj
  };
  return b
}
function clone3(obj){ // 使用object.assign()
  let b = {};
  Object.assign(b,obj)
  return b
}
let obj1 = clone1(obj);
let obj2 = clone2(obj);
let obj3 = clone3(obj);

console.log(obj1 === obj); //false 代表复制成功了
console.log(obj2 === obj); //false 代表复制成功了
console.log(obj3 === obj); //false 代表复制成功了
console.log('obj0.c.num修改前',obj.c.num); //100
console.log('obj1.c.num修改前',obj1.c.num); //100
console.log('obj2.c.num修改前',obj2.c.num); //100
console.log('obj3.c.num修改前',obj3.c.num); //100
obj0.c.num = 555;
console.log('obj0.c.num修改后',obj.c.num); //555
console.log('obj1.c.num修改后',obj1.c.num); //555
console.log('obj2.c.num修改后',obj2.c.num); //555
console.log('obj3.c.num修改后',obj3.c.num); //555

由于是浅复制，所以引用类型只是复制了内存地址，修改其中一个对象的子属性后，引用这个地址的值都会被修改。

浅克隆图解如下


浅克隆图解

深复制

由于浅复制只是复制第一层，为了解决引用类型的复制，需要使用深复制来完成对象的复制，基本类型复制新值，引用类型开辟新的堆内存。

深复制可以使用的方案有JSON.parse(JSON.stringify(obj))、循环赋值。

JSON.parse(JSON.stringify(obj))

let obj = {
  a:1,
  arr:[1,3,5,7,9],
  c:{
    num:100
  },
  fn:function(){
     console.log(1)
  },
  date:new Date(),
  reg:/\.*/g
}
function clone1(obj){ // 使用JSON.parse(JSON.stringify(obj))
  return JSON.parse(JSON.stringify(obj))
}
let obj1 = clone1(obj);
console.log(obj === obj1); //false 代表复制成功了
obj.c.num = 555;

console.log(obj.c.num,obj1.c.num) // 555,100

看起来是复制成功了！！~地址也变了，修改obj,obj1的引用地址不会跟着变化。

但是我们来console一下obj以及obj1

console.log(obj)
console.log(obj1)
打印结果

似乎发现了离奇的事情，只有obj.a以及obj.c正确的复制了，日期类型、方法、正则表达式均没有复制成功，发生了一些奇怪的事情

循环赋值 deepClone

那么为了解决这种事情，就需要写一个deepClone方法来完成深复制了，参考了许多开源库的写法，将所有的复制项单独拆出，方便未来对特殊类型进行扩展，也防止不同功能间的变量互相干扰

 //既然是深复制，一定要传入一个object，再return 一个新的 Object
function deepClone(obj){
    let newObj;
    if(obj instanceof Array){ // 数组的话，要new一个数组
      newObj = []
    }else if(obj instanceof Object){  // 对象的话，要new一个对象
      newObj = {}
    }
    if(obj === null) {
      return cloneNull(obj)
    }
    if(typeof obj=='function'){
        return cloneFunction(obj)
    }
    if(typeof obj!='object') {
        return cloneOther(obj)
    }
    if(obj instanceof RegExp) {
        return cloneRegExp(obj)
    }
    if(obj instanceof Date){
        return cloneDate(obj)
    }
    if(obj instanceof Array){
        for(let index in obj){
            newObj[index] = deepClone(obj[index]); // 对数组子项进行复制
        }
    }
    if(obj instanceof Object){
        for(let key in obj){
            newObj[key] = deepClone(obj[key]); // 对对象子项进行复制
        }
    }
    return newObj;
}
function cloneNull(obj){ // 复制NULL
  return obj
}
function cloneFunction(obj){ // 复制方法，
  //这个方法待完善，暂时未找到能够完美复制function的方案，如果有方案，望指出
  return obj
}
function cloneOther(obj){ // 复制非对象的数据
  return obj
}
function cloneRegExp(obj){ // 复制正则对象
  return new RegExp(obj)
}
function cloneDate(obj){ // 复制日期对象
  return new Date(obj)
}

这样一个基本上满足功能的深复制就完成了。先测试一下

let obj = {
  a:1,
  arr:[1,3,5,7,9],
  c:{
    num:100
  },
  fn:function(){
     console.log(1)
  },
  date:new Date(),
  reg:/\.*/g
}

let obj1 = deepClone(obj);
console.log(obj.c === obj1.c); // false  代表复制成功
console.log(obj.fn === obj1.fn);// true   由于方法单纯修改了引用的地址，所以这里是浅复制
console.log(obj.date === obj1.date);// false  代表复制成功
console.log(obj.reg === obj1.reg);// false  代表复制成功

再console一下

console.log(obj)
console.log(obj1)
打印结果

这样，就完成了deepClone深复制方法

经过深复制后，图解如下


深复制后内存图解

优化 deepClone

上述代码还有优化空间，参考了lodash库，在进行 new 对象时，可以使用 constructor构造函数 来进行创建新的实例，这样

  1. 可以不用判断递归中，是数组还是对象
  2. 如果深复制的某一项是某个原型的实例，深复制完成后，依然是该原型的实例
function deepClone(obj){
    let newObj = new obj.constructor;
    if(obj === null) {
      return cloneNull(obj)
    }
    if(typeof obj=='function'){
        return cloneFunction(obj)
    }
    if(typeof obj!='object') {
        return cloneOther(obj)
    }
    if(obj instanceof RegExp) {
        return cloneRegExp(obj)
    }
    if(obj instanceof Date){
        return cloneDate(obj)
    }
    if(obj instanceof Array){
        for(let index in obj){
            newObj[index] = deepClone(obj[index]); // 对数组子项进行复制
        }
    }
    if(obj instanceof Object){
        for(let key in obj){
            newObj[key] = deepClone(obj[key]); // 对对象子项进行复制
        }
    }
    return newObj;
}
function cloneNull(obj){ // 复制NULL
  return obj
}
function cloneFunction(obj){ // 复制方法，
  //这个方法待完善，暂时未找到能够完美复制function的方案，如果有方案，望指出
  return obj
}
function cloneOther(obj){ // 复制非对象的数据
  return obj
}
function cloneRegExp(obj){ // 复制正则对象
  return new RegExp(obj)
}
function cloneDate(obj){ // 复制日期对象
  return new Date(obj)
}

最终版本 deepClone

然后可以有一个合并版本的，比较节省代码，将下方区分开的复制方法，合并到deepClone中，可以极大地减少代码体积

function deepClone(obj){ //
    let newObj = new obj.constructor;
    if(obj === null) return obj
//  if(typeof obj=='function') return obj
//  由于typeof obj=='function'也符合下方的typeof obj!='object'，所以此条可以省略
    if(typeof obj!='object') return obj
    if(obj instanceof RegExp) return new RegExp(obj)
    if(obj instanceof Date) return new Date(obj)
    // 运行到这里，基本上只存在数组和对象两种类型了
    for(let index in obj){
        newObj[index] = deepClone(obj[index]); // 对子项进行递归复制
    }
    return newObj;
}
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 156,757评论 4赞 359
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 66,478评论 1赞 289
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 106,540评论 0赞 237
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 43,593评论 0赞 203
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 51,903评论 3赞 285
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 40,329评论 1赞 210
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 31,659评论 2赞 309
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 30,383评论 0赞 195
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 34,055评论 1赞 238
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,337评论 2赞 241
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,864评论 1赞 256
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 28,227评论 2赞 251
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 32,820评论 3赞 231
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,999评论 0赞 8
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,750评论 0赞 192
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 35,365评论 2赞 269
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 35,260评论 2赞 258