前几天撸项目代码时, 由一个技术点间接牵扯出了这东西. 所以就来总结一下.

深拷贝
  拷贝对象每个层级的属性.
  作用的对象是 js中引用类型的对象,基本类型没有涉及.
  本质上将引用类型的对象在堆上重新开辟一块新的空间进行存放.

 var p_1 = {name: '病猫', age: 22};
var p_3 = {name: p_1.name, age: p_1.age};
p_3.name = "迪迦";
console.log("p_1", p_1); //p_1 {name: "子川", age: 22}
console.log("p_3", p_3); //p_3 {name: "迪迦", age: 22}

浅拷贝
  对于引用类型的对象, 浅拷贝是在栈上重新定义了一个指针,指向的位置却依然是堆中同一对象.  

 var p_1 = {name: '病猫', age: 22};
var p_2 = p_1;
p_2.name = "子川";
console.log("p_1", p_1); //p_1 {name: "子川", age: 22}
console.log("p_2", p_2); //p_2 {name: "子川", age: 22}

实现方法

   ①: JSON的序列化与反序列化

 let o = JSON.parse(JSON.stringify(obj));
//但是obj中若含有 function, undefined, 正则表达式 时,
//o 中 function, undefined不存在, 正则表达式对应变成了 {};

   ②: 递归   (对日期和正则做了简单处理,)

 function deepHandle(obj) {
let tempObj = Array.isArray(obj) ? [] : {};
if (obj && typeof obj === "object") {
for (key in obj) {
if (obj.hasOwnProperty(key)) { //判断自身属性
if (obj[key] && typeof obj[key] === "object") { //是对象类型
let type = Object.prototype.toString.call(obj[key]).slice(8, -1); //具体对象类型
console.log("类型", type);
//Date 与 RegExp 不处理的话, 拷贝之后会成 {},
if (type === 'Date') {
tempObj[key] = new Date(obj[key]);
} else if (type === 'RegExp') {
tempObj[key] = new RegExp(obj[key]);
} else {
tempObj[key] = deepHandle(obj[key]);
}
} else {
tempObj[key] = obj[key];
}
}
}
}
return tempObj;
}
let obj = {
a: '于康',
b: {
age: 21,
city: "山西",
n: [1,2,3, new Date(), /234/igm]
},
c: undefined,
d: null,
e: true,
f: new Date(),
h: {},
i: /234/igm,
toEat: function() {
console.log("吃法")
}
}
let deepObj = deepHandle(obj);
let deepObj2 = JSON.parse(JSON.stringify(obj));
deepObj.i = /123/igm;
console.log("obj", obj);
console.log("deepObj", deepObj);
console.log("deepObj2", deepObj2);

补充一下数据类型
  基本数据类型 (number, string, boolean, null, undefined).
    ①:按值访问,即可操作保存在变量中的实际值.
    ②:值是不可变的,
    ③:名-值存储在栈内存中.
  let name = "病猫"; name = "迪迦"; //看似 name 的值发生了改变, 实际改变的是 指针指向;

  引用数据类型 (即对象类型Object type. 如: Object, Array, Function, Date等)
  let obj = {name: "病猫", age: 22}

    ①: 堆内存中存放引用数据类型的对象 (即 {name: "病猫", age: 22})
    ②: 栈内存中存放引用数据类型的变量名 (即 obj) 和 此对象的 引用地址(即 指针);
    ③: javascript 不允许直接访问与操作堆内存空间, 只能操作对象在栈中的引用地址

结尾

   以上内容是记录自己理解知识后的笔记, 若理解有误, 望您能指出. 感激不尽.      对于这个知识点,网上很多写的通俗易懂的文章(图文), 很Nice的.

JS - 浅拷贝与深拷贝的理解以及简单实现方法的更多相关文章

  1. 关于js浅拷贝与深拷贝的理解

    前端开发中,一般情况下,很少会去在意深拷贝与浅拷贝的关系. 大家知道,js变量有2种数据类型:基本类型和引用类型.基本类型的拷贝是将整个值完全拷贝一份的,也就是深拷贝.就是开辟了新的堆内存.所以基本类 ...

  2. 理解js浅拷贝和深拷贝

    理解深拷贝和浅拷贝之前先了解下js中的基本类型和引用类型 1.基本类型: 在js中,数据的基本类型undefined,null,string,number,boolean,在变量中赋的实际值,基本类型 ...

  3. 关于JS浅拷贝和深拷贝

    在 JS 中有一些基本类型像是Number.String.Boolean,而对象就是像这样的东西{ name: 'Larry', skill: 'Node.js' },对象跟基本类型最大的不同就在于他 ...

  4. Java 浅拷贝和深拷贝的理解和实现方式

    Java中的对象拷贝(Object Copy)指的是将一个对象的所有属性(成员变量)拷贝到另一个有着相同类类型的对象中去.举例说明:比如,对象A和对象B都属于类S,具有属性a和b.那么对对象A进行拷贝 ...

  5. 【转】Java 浅拷贝和深拷贝的理解和实现方式

    Java中的对象拷贝(Object Copy)指的是将一个对象的所有属性(成员变量)拷贝到另一个有着相同类类型的对象中去.举例说明:比如,对象A和对象B都属于类S,具有属性a和b.那么对对象A进行拷贝 ...

  6. c#中浅拷贝和深拷贝的理解

    c#中拷贝有浅拷贝和深拷贝之分. 例如对象A,其中有值类型字段和引用类型字段: 1.浅拷贝: 对于值类型字段,直接逐位复制到新拷贝的副本对象中,修改副本的字段的值,不会影响源对象中字段的值: 对于引用 ...

  7. 浅谈Javascript 浅拷贝和深拷贝的理解

    javascript中存储对象都是存地址的. 浅拷贝:浅拷贝是都指向同一块内存区块,浅拷贝共用同一内存地址,你改值我也变.如果拷贝的对象里面的值是一个对象或者数组,它就是浅拷贝,拷贝的知识引用地址.  ...

  8. js 浅拷贝和深拷贝

    传值与传址 了解了基本数据类型与引用类型的区别之后,我们就应该能明白传值与传址的区别了.在我们进行赋值操作的时候,基本数据类型的赋值(=)是在内存中新开辟一段栈内存,然后再把再将值赋值到新的栈中.例如 ...

  9. 前端【JS】,深拷贝与浅拷贝的区别及详解!

    我是前端小白一枚,为了巩固知识和增强记忆,开始整理相关的知识,方便以后复习和面试的时候看看.OK,让我们进入正题~ 先说说浅拷贝和深拷贝的理解吧,个人是这样理解的:两个对象A.B, A有数据B为空,B ...

随机推荐

  1. C++基础 (2) 第二天 C++相对C的改进 命名空间 引用

    1 昨日回顾 2内联函数 3 默认参数和占位参数 4函数重载 函数重载 就是可以定义多个相同名字的函数 6 类和对象的基本语法 7 类的封装和访问控制 还有一个结论: 封装有两层含义: 把属性和方法进 ...

  2. docker数据卷的使用 -v --volumes--from

    总结一下docker数据管理的三种方法: 1.普通的挂在数据: -v docker run  -v /father/path:/child/path-v 参数会把当前系统的文件目录/father/pa ...

  3. Elasticsearch 入门 - 安装、启动和配置

    安装 请参阅elastic官网 :Installing Elasticsearch 启动 使用 ./bin/elasticsearch 命令即可启动 使用 ./bin/elasticsearch -d ...

  4. Spring Boot浅谈(是什么/能干什么/优点和不足)

    1. Spring Boot是什么,解决哪些问题 1) Spring Boot使编码变简单 2) Spring Boot使配置变简单 3) Spring Boot使部署变简单 4) Spring Bo ...

  5. 利用Tensorflow实现手写字符识别

    模式识别领域应用机器学习的场景非常多,手写识别就是其中一种,最简单的数字识别是一个多类分类问题,我们借这个多类分类问题来介绍一下google最新开源的tensorflow框架,后面深度学习的内容都会基 ...

  6. jQuery选择器补充

    ---------------------------------------------------------------------------------------------------- ...

  7. vue+Ueditor集成 [前后端分离项目][图片、文件上传][富文本编辑]

    后端DEMO:https://github.com/coderliguoqing/UeditorSpringboot 前端DEMO:https://github.com/coderliguoqing/ ...

  8. ASP.NET--Razor-model-compare属性用法

    学习使用model中的compare属性来判断两个密码之间是否相同 [Required] [StringLength(100, ErrorMessage = "The {0} must be ...

  9. Codeforces Round #464 (Div. 2)

    A. Love Triangle time limit per test: 1 second memory limit per test: 256 megabytes input: standard ...

  10. OpenFace Docker 使用简介

    在Docker中使用openface最大的问题是数据与主机的交互,下面我介绍几种方法来实现主机与Docker容器的数据交互. 1.第一种也是最方便的一种方法是在进入容器时使用-v参数将主机的目录挂载到 ...