文档章节

JS 深拷贝和浅拷贝概念,以及实现深拷贝的三种方式

o
 osc_y8yehimr
发布于 2019/03/20 15:53
字数 753
阅读 12
收藏 0

精选30+云产品,助力企业轻松上云!>>>

一、理解堆栈,基本数据类型与引用数据类型

  1、堆栈

    栈(stack):系统自动分配的内存空间,内存会由系统自动释放,用来存放函数的参数值,局部变量的值等,特点是先进后出。

    堆(heap):系统动态分配的内存,内存大小不一,内存不会自动释放。一般由程序员分配释放,主要负责像Obejct这种变量类型的存储。

  2、基本数据类型

    概念:存放在栈内存中的简单数据段,数据大小确定,内存空间大小确定。

    6种基本数据类型:Undefined、Null、Boolean、Number、String、Symbol

  3、引用数据类型

    概念:存放在堆内存中的数据,如对象、数组、函数等。名存在栈内存,值存在堆内存,栈内存会提供一个引用的地址指向堆内存中的值

 

二、深拷贝与浅拷贝

  1、浅拷贝

    概念:子对象复制父对象,父子对象发生关联,两者属性值指向同一内存空间。简单来讲,就是改变其中一个对象,另一个对象也会跟着改变。

    举例:

let a = [0,1,2],
     b = a;

a[0] = 3;

console.log(a,b) // [3,1,2] [3,1,2]
  2、深拷贝

     概念:拷贝对象各个层级的属性。简单的讲,就是复制出来的每个对象都有属于自己的内存空间,不会互相干扰。

 

三、实现深拷贝的几种方式

  1、封装深拷贝函数

function deepClone(obj) {
    let objClone = Array.isArray(obj) ? [] : {};
    if(obj && typeof obj === "object") {
        for(key in obj) {
            if(obj.hasOwnProperty(key)) {
                 // 判断 obj 是否是对象,如果是,递归复制
                 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] = 5;
console.log(a,b)
   

 

2、借用JSON对象的 parse 和 stringify

function deepClone(obj){
    let newObj = JSON.stringify(obj);
    let objClone = JSON.parse(newObj);
    return objClone;  
}

let a=[0,1,[2,3],4],
    b=deepClone(a);
a[0]=1;
a[2][0]=1;
console.log(a,b);

 

原理:基本类型拷贝是直接在栈内存新开空间,直接复制一份名-值,两者互不影响。
而引用数据类型,比如对象,变量名在栈内存,值在堆内存,拷贝只是拷贝了堆内存提供的指向值的地址,而JSON.stringify()巧就巧在能将一个对象转换成字符串,也就是基本类型,那这里的原理就是先利用JSON.stringify()将对象转变成基本数据类型,然后使用了基本类型的拷贝方式,再利用JSON.parse()将这个字符串还原成一个对象,达到了深拷贝的目的。

 

3、借用 JQ 的 extend 方法实现深拷贝。

  $.extend([deep], target, ...object);

  deep 表示深拷贝,Boolean

   target 目标对象

   ...object 需要进行合并的对象

 

 

本文是对于深浅拷贝的学习笔记整理记录。感谢 听风是风 博主的分享!
原文链接:https://www.cnblogs.com/echolun/p/7889848.html

 

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。
javascript简单实现深浅拷贝(附带详细讲解)

深浅拷贝知识在我们的日常开发中还算是用的比较多,但是之前的状态一直都是只曾听闻,未曾使用(其实用了只是自己没有意识到),所以今天来跟大家聊一聊js的深浅拷贝;   首先我们来了解一...

有梦想的咸鱼前端
2019/09/26
4
0
javascript简单实现深浅拷贝(附带详细讲解)

深浅拷贝知识在我们的日常开发中还算是用的比较多,但是之前的状态一直都是只曾听闻,未曾使用(其实用了只是自己没有意识到),所以今天来跟大家聊一聊js的深浅拷贝;   首先我们来了解一...

osc_snzhxf3u
2019/09/05
2
0
javascript 中的深拷贝与浅拷贝的区别,实现深拷贝的几种方法

如何区分深拷贝与浅拷贝,简单点来说,就是假设B复制了A,当修改A时,看B是否会发生变化,如果B也跟着变了,说明这是浅拷贝,拿人手短,如果B没变,那就是深拷贝,自食其力。 此篇文章中也会...

IrisHuang
2018/12/19
18
0
浅探js深拷贝和浅拷贝

原文:浅探js深拷贝和浅拷贝 作者:william 对象和数组的拷贝对我来说一直都是一个比较模糊的概念,一直有点一知半解,但是在实际工作中又偶尔会涉及到,有时候还会一不小心掉坑里,不知道大...

Fundebug
2018/11/15
0
0
JavaScript深浅拷贝

基本类型 & 引用类型 ECMAScript中的数据类型可分为两种: 基本类型:undefined,null,Boolean,String,Number,Symbol 引用类型:Object,Array,Date,Function,RegExp等 不同类型的存储方式: ...

棕小渐
2018/05/20
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Eclipse_JavaEE_Tomcat_MySQL环境配置

安装java环境,配置系统变量(JAVA_HOME,绝对路径) 下载eclipse+Tomcat+mysql window——》preference——》server——》runtime——》tomcat环境 项目右键build path 配mysql jar ,libra...

愿有时光可回首
21分钟前
20
0
MySQL原理 - InnoDB引擎 - 行记录存储 - Redundant行格式

本文基于 MySQL 8 在上一篇:MySQL原理 - InnoDB引擎 - 行记录存储 - Compact格式 中,我们介绍了什么是 InnoDB 行记录存储以及 Compact 行格式,在这一篇中,我们继续介绍其他三种行格式。 ...

zhxhash
42分钟前
17
0
leetcode面试题 17.13(恢复空格)--Java语言实现

求: 哦,不!你不小心把一个长篇文章中的空格、标点都删掉了,并且大写也弄成了小写。像句子"I reset the computer. It still didn’t boot!"已经变成了"iresetthecomputeritstilldidntboo...

拓拔北海
50分钟前
19
0
B站跨年晚会究竟做对了什么?

燃财经(ID:rancaijing)原创 作者 | 赵磊 编辑 | 周昶帆 “补课”是《bilibili晚会 二零一九最美的夜》这个视频中,观众在前两分钟刷得最多的弹幕,寓意着观众是在元旦之后回来补看跨年晚会...

子乾建建_Jeff
01/07
45
0
关于Scrapy爬虫项目运行和调试的小技巧(上篇)

点击上方“Python爬虫与数据挖掘”,进行关注 回复“书籍”即可获赠Python从入门到进阶共10本电子书 今 日 鸡 汤 迟日江山丽,春风花草香。泥融飞燕子,沙暖睡鸳鸯。 扫除运行Scrapy爬虫程序...

yuhan336
04/02
26
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部