背景

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

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

理解

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

js 数据类型包含

  1. 基础类型:StringNumbernullundefinedBoolean以及ES6引入的Symboles10中的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也被修改了

深复制是指,不单单复制引用地址,连堆内存都复制一遍,使objobj1不指向同一个地址。

代码

分开来看深复制浅复制

浅复制

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

浅复制可以使用的方案有循环赋值扩展运算符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;
}

一文带你了解js数据储存及深复制(深拷贝)与浅复制(浅拷贝)的更多相关文章

  1. js中的深复制与浅复制

    前言 所谓深复制与浅复制(深拷贝与浅拷贝),乍一听感觉听高大上,像是一个非常难理解的概念,其实我们平常项目开发都是在用的,只是你可能不知道该怎么叫它的名字而已,就像你听熟了一首歌,就是不知道这首歌叫什 ...

  2. 也来谈一谈js的浅复制和深复制

    1.浅复制VS深复制 本文中的复制也可以称为拷贝,在本文中认为复制和拷贝是相同的意思.另外,本文只讨论js中复杂数据类型的复制问题(Object,Array等),不讨论基本数据类型(null,unde ...

  3. js的浅复制和深复制

    1.浅复制VS深复制 本文中的复制也可以称为拷贝,在本文中认为复制和拷贝是相同的意思.另外,本文只讨论js中复杂数据类型的复制问题(Object,Array等),不讨论基本数据类型(null,unde ...

  4. 11.1 js中级,数据类型、数据储存方式、作用域内存空间的区别以及例识别。

    一. 基本数据类型和引用数据类型的区别. 1.基本数据类型:基本数据类型就是简单的操作值. 2.引用数据类型:就是把引用的地址赋给变量. 堆内存: 就是存放代码块的,存放形式有两种 1)对象以键值对的 ...

  5. Ext JS 6学习文档-第4章-数据包

    Ext JS 6学习文档-第4章-数据包 数据包 本章探索 Ext JS 中处理数据可用的工具以及服务器和客户端之间的通信.在本章结束时将写一个调用 RESTful 服务的例子.下面是本章的内容: 模 ...

  6. 一文带你读懂zookeeper在大数据生态的应用

    一个执着于技术的公众号 一.简述 在一群动物掌管的世界中,动物没有人类聪明的思想,为了保持动物世界的生态平衡,这时,动物管理员-zookeeper诞生了. 打开Apache zookeeper的官网, ...

  7. 面试题汇总--数据储存/应用程序/UI控件/客户端的安全性与框架处理。。。

    一 数据储存  1.如果后期需要增加数据库中的字段怎么实现,如果不使用 CoreData 呢?编写 SQL 语句来操作原来表中的字段1)增加表字段ALTER TABLE 表名 ADD COLUMN 字 ...

  8. jquery.cookie 使用文档,$.cookie() 文档教程, js 操作 cookie 教程文档。

    jquery.cookie 使用文档,$.cookie() 文档教程, js 操作 cookie 教程文档. jquery.cookie中的操作: jquery.cookie.js是一个基于jquer ...

  9. Android 里的数据储存

    数据持久化 关于数据储存,这个话题已经被反复讨论过很多次了,我是不建议把网络存储这种方式纳入到数据储存的范围的,因为这个和Android没多少关系,因此就有如下的分类: 本地储存(也称之为数据持久化, ...

随机推荐

  1. search(11)- elastic4s-模糊查询

    很多时候搜索用户对查询语句具有模糊感觉,他们只能提供大约的描述.比如一个语句的部分,或者字句顺序颠倒等.通过模糊查询可以帮助用户更准确的找出他们希望搜索的结果. 模糊查询包括前后缀,语句(phrase ...

  2. 架构设计 | 分布式系统调度,Zookeeper集群化管理

    本文源码:GitHub·点这里 || GitEE·点这里 一.框架简介 1.基础简介 Zookeeper基于观察者模式设计的组件,主要应用于分布式系统架构中的,统一命名服务.统一配置管理.统一集群管理 ...

  3. Cassandra 简介

    Cassandra是云原生和微服务化场景中最好的NoSQL数据库.我信了~ 1. Cassandra是什么 高可用性和可扩展的分布式数据库 Apache Cassandra™是一个开源分布式数据,可提 ...

  4. Angular 从入坑到挖坑 - Router 路由使用入门指北

    一.Overview Angular 入坑记录的笔记第五篇,因为一直在加班的缘故拖了有一个多月,主要是介绍在 Angular 中如何配置路由,完成重定向以及参数传递.至于路由守卫.路由懒加载等&quo ...

  5. 【Spark】这一篇或许能让你大概了解如何通过JavaAPI实现DataFrame的相关操作

    文章目录 需求概述 步骤 一.创建Maven工程并导包 二.选用第一种方法:利用反射机制配合样例类构建DataFrame 开发代码 选用第二种方法:通过StrucType配合Row构建DataFram ...

  6. QtCreator MSVC 搭建 Debugger

    QtCreatorForWindows搭建Debugger QtCreator for windows选择mingw或者msvc: qt-opensource-windows-x86-msvc2015 ...

  7. Web_php_unserialize

    0x01 <?php class Demo { private $file = 'index.php'; public function __construct($file) { $this-& ...

  8. tp5.1的事务操作

    普通的事务操作很简单,最简单的方式是使用 transaction 方法操作数据库事务, 当闭包中的代码发生异常会自动回滚, 例如: Db::transaction(function () { Db:: ...

  9. PHP中面向对象特性实现

    PHP近些年来成为全球最流行的网页编程语言,该语言以弱类型.易兼容.门槛低.开发快.功能强著称,且听别人这么说,我在有了c和c#基础后学习PHP过程中也并不是很顺利,该语言的一些特殊的语法规则又是让我 ...

  10. babel转码时generator的regeneratorRuntime

    今天写generator函数时发现出错:regeneratorRuntime. 在stackoverflow网友说需是本地babel软件包没有安装完全. package.json: "dev ...