js实现浅拷贝和深拷贝

一.数据类型

数据分为基本数据类型和引用数据类型

基本数据类型(String, Number, Boolean, Null, Undefined，Symbol)

引用数据类型（Object[Array属于Object]）

基本数据类型的特点：直接存储在栈(stack)中的数据
引用数据类型的特点：存储的是该对象在栈中引用，真实的数据存放在堆内存里

引用数据类型在栈中存储了指针，该指针指向堆中该实体的起始地址。当解释器寻找引用值时，会首先检索其在栈中的地址，取得地址后从堆中获得实体。

二.深拷贝与浅拷贝

1.浅拷贝

浅拷贝只复制指向某个对象的指针，而不复制对象本身，新旧对象还是共享同一块内存。

1.浅拷贝是按位拷贝对象，它会创建一个新对象，有着原始对象属性值的一份精确拷贝。
2.如果属性是基本类型，拷贝的就是基本类型的值；如果属性是内存地址（引用类型），拷贝的就是内存地址，因此如果其中一个对象改变了这个地址，就会影响到另一个对象。

2.深拷贝

深拷贝会另外创造一个一模一样的对象，新对象跟原对象不共享内存，修改新对象不会改到原对象，是“值”而不是“引用”（不是分支）

1.拷贝第一层级的对象属性或数组元素
2.递归拷贝所有层级的对象属性和数组元素
深拷贝会拷贝所有的属性,并拷贝属性指向的动态分配的内存。当对象和它所引用的对象一起拷贝时即发生深拷贝。深拷贝相比于浅拷贝速度较慢并且花销较大。

三.js实现深拷贝和浅拷贝

1.浅拷贝

    <script>var obj = {id: 1,name: 'andy',msg: {age: 18,color: ['pink', 'blue']}};var o = {}for (var k in obj) {// k 是属性名 obj[k] 是属性值o[k] = obj[k];}console.log(o);o.msg.age = 20;console.log(obj);// Object.assign(o, obj) // 浅拷贝语法糖// console.log(o);// o.msg.age = 20;// console.log(obj);</script>

浅拷贝只复制指向某个对象的指针，而不复制对象本身，新旧对象还是共享同一块内存，因此如果修改其中一个对象，另一个也会跟着改变。

2.深拷贝

    <script>var obj = {id: 1,name: 'andy',msg: {age: 18},color: ['pink', 'red']};var o = {};// 用递归的方式完成深拷贝// 封装函数function deepCopy(newobj, oldobj) {// 遍历oldobj的属性名for (var k in oldobj) {// 判断属性属于哪种数据类型// 1.获取属性值 oldobj[k]var item = oldobj[k];// 2.判断是否属于数组(因为数组也属于对象，所以必须先判断数组)if (item instanceof Array) {newobj[k] = []; // (1)先给newobj添加一个属性k，同oldobj里的kdeepCopy(newobj[k], item) // (2)再用oldobj[k]赋值给newobj[k]} else if (item instanceof Object) {// 3.判断是否属于对象newobj[k] = {};deepCopy(newobj[k], item)} else {// 4.属于简单数据类型newobj[k] = item}}}deepCopy(o, obj)console.log(o);</script>

深拷贝会另外创造一个一模一样的对象，新对象跟原对象不共享内存，修改新对象不会影响到原对象。

参考：浅拷贝与深拷贝的区别（详解）_Mark sheng的博客-CSDN博客_浅拷贝深拷贝

js实现浅拷贝和深拷贝相关推荐

js之浅拷贝和深拷贝
js数据类型主要分基本数据类型和引用数据类型.前者包括Number,String等,后者主要是Object,因此以下会针对不同的数据类型来分析,需要的朋友可以参考一下 1.js内存 js内存,或者说大 ...
【js】浅拷贝与深拷贝
一.理解 1.浅拷贝:只是拷贝一层,更深层次对象级别的只拷贝了地址. 浅拷贝的时候如果数据是基本数据类型,那么就如同直接赋值那种,会拷贝其本身,如果除了基本数据类型之外还有一层对象,那么对于浅拷贝而言 ...
小tips：JS之浅拷贝与深拷贝
浅拷贝: function extendCopy(p) {var c = {};for (var i in p) {c[i] = p[i];}return c; } 深拷贝: function dee ...
js 对象浅拷贝和深拷贝
var model={name:"boy",age:13}; var CopyModel=model; console.log(CopyModel.name); model.nam ...
JS中浅拷贝和深拷贝的使用，深拷贝实现方法总结
1.浅拷贝:两个对象经过拷贝后虽然具有相同的属性,但是他们都指向同一个内存空间.操作会引起引用,同一地址的变量一起改变. let a = {x: 1} let b = a b.x = 2 consol ...
js对象浅拷贝与深拷贝
一.简介浅拷贝是拷贝一层,如果数据是基本数据类型,会拷贝其本身,如果除了基本数据类型之外还有一层对象,那么只能拷贝其引用,对象的改变会反应到拷贝对象上. 深拷贝是拷贝多层,每一层的数据都 ...
js关于浅拷贝、深拷贝，数组的深拷贝
说说JS中的浅拷贝与深拷贝
outline: 为什么要说JS中深拷贝与浅拷贝 JS对类型的分类 immutable与mutable 简单类型检测浅拷贝VS深拷贝为什么要说JS中深拷贝与浅拷贝近来在研读underscore的 ...
js 浅拷贝直接赋值_JS中实现浅拷贝和深拷贝的代码详解
(一)JS中基本类型和引用类型 JavaScript的变量中包含两种类型的值:基本类型值和引用类型值,在内存中的表现形式在于:前者是存储在栈中的一些简单的数据段,后者则是保存在堆内存中的一个对象. ...

js实现浅拷贝和深拷贝

一.数据类型

二.深拷贝与浅拷贝

1.浅拷贝

2.深拷贝

三.js实现深拷贝和浅拷贝

1.浅拷贝

2.深拷贝

js实现浅拷贝和深拷贝相关推荐

最新文章

热门文章