JS 深拷贝和浅拷贝概念,以及实现深拷贝的三种方式
一、理解堆栈,基本数据类型与引用数据类型
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
JS 深拷贝和浅拷贝概念,以及实现深拷贝的三种方式的更多相关文章
- 手写面试编程题- 数组去重 深拷贝 获取文本节点 设置奇数偶数背景色 JS中检测变量为string类型的方法 第6题闭包 将两个数组合并为一个数组 怎样添加、移除、移动、复制、创建和查找节点? 继承 对一个数组实现随机排序 让元素水平 垂直居中的三种方式 通过jQuery的extend方法实现深拷贝
第1题==>实现数组去重 通过 new Set(数组名) // var arr = [12, 12, 3, 4, 5, 4, 5, 6, 6]; // var newarr1 = new Set ...
- js创建对象的三种方式和js工厂模式创建对象
文章地址: https://www.cnblogs.com/sandraryan/ 创建对象 创建对象的三种方式 构造函数 ,是一种特殊的方法.主要用来在创建对象时初始化对象 1. 调用系统的构造函数 ...
- js学习-DOM之动态创建元素的三种方式、插入元素、onkeydown与onkeyup两个事件整理
动态创建元素的三种方式: 第一种: Document.write(); <body> <input type="button" id="btn" ...
- js 函数定义三种方式
<p>Js 函数定义的三种方式:</p> <br> <p>方式一:function</p> <script type="te ...
- 前端js,css文件合并三种方式,bat命令
前端js,css文件合并三种方式,bat命令 前端js文件该如何合并三个方式如下:1. 一个大文件,所有js合并成一个大文件,所有页面都引用它.2. 各个页面大文件,各自页面合并生成自己所需js的大文 ...
- JavaScript 基础——使用js的三种方式,js中的变量,js中的输出语句,js中的运算符;js中的分支结构
JavaScript 1.是什么:基于浏览器 基于(面向)对象 事件驱动 脚本语言 2.作用:表单验证,减轻服务器压力 添加野面动画效果 动态更改页面内容 Ajax网络请求 () 3.组成部分:ECM ...
- JS中事件绑定的三种方式
以下是搜集的在JS中事件绑定的三种方式. 1. HTML onclick attribute <button type="button" id="upl ...
- JS弹出对话框的三种方式
JS弹出对话框的三种方式 我们用到了alert()方法.prompt()方法.prompt()方法,都是在网页有一个弹出框,那么就让我们探究一下他们之间的区别: 一.第一种:alert()方法 < ...
- 三种方式解决你的js加载乱码
第一种方式——编码统一 我们以前觉得出现乱码的原因是因为编码不统一,就是因为我们设置编码统一之后,就解决了问题,所以,让html和js的编码统一,是最简单的一个乱码解决方式,原因是什么,是因为,如果你 ...
- js获取时间戳的三种方式
js获取时间戳的三种方式 CreateTime--2018年5月23日08:44:10 Author:Marydon // 方式一:推荐使用 var timestamp=new Date().ge ...
随机推荐
- C#-基本语法(三)
关键词 关键字,是一些被C#规定了用途的重要单词 在Visual Studio的开发环境中,关键字被标识为蓝色 例如: using:导入命名空间 class:声明类 static:静态 void:无返 ...
- C#发布和调试WebService
一.编写并发布WebService服务 1.新建空web应用程序
- SQL Server的实例恢复解析
同Oracle一样,SQL Server在非一致性关闭的时候也会进行实例恢复(Instance Recovery),本文根据stack overflow的文章介绍一些SQL Server实例恢复的知识 ...
- 5. svg学习笔记-坐标系变换
之前我们编写图形元素的时候,编写好了位置大小就是固定的,通过坐标系变换,可以移动缩放,旋转图形,但必须声明的是,进行变换时是图形相对于坐标系的变化,就是图形是不发生变化的,而是坐标系发生了变化,比如缩 ...
- Node中的模块引入机制
1.如果模块在当前目录下,可以通过下面语句将模块引入进来,注意需要使用 "./"表示当前路径 const currency = require('./currency'); ←-- ...
- NodeJS二进制包安装和快捷键配置(适用于U盘版安装配置)
首先下载NodeJS二进制安装包:https://nodejs.org/dist/v10.15.3/node-v10.15.3-win-x64.zip 在D盘新建NodeJS文件夹,解压node-v1 ...
- LeetCode算法题-Reverse Bits(Java实现)
这是悦乐书的第185次更新,第187篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第44题(顺位题号是190).给定32位无符号整数,求它的反转位.例如: 输入:4326 ...
- Ecto 总结
ecto 简介 ecto 相当于 elixir 的 ORM,但是得益于 elixir 语言,和传统的 ORM 相比,更加简洁和强大. ecto 主要分为 4 部分: Repo: 这是和真正数据库交互的 ...
- UEditor学习笔记1
首先对于前段时间遇到的一些总结做下记录: 0 == '' => true transition,渐变属性,其值可以是某属性,也可以是all,如transition: all 0.3s:鼠标放到 ...
- 用H5开发微信还是开发APP?
用H5开发微信还是开发APP? 随着技术的飞速发展,HTML第五版技术标准的更新,在移动端,由于其相对较低的开发成本及强大的跨平台运行能力,越来越多的信息型产品也开始选择这样轻量级的H5页面进行快速迭 ...