http://it.njjyzj.gov.cn

详解JS变量存储深拷贝和浅拷贝_JavaScript_网络编程

变量类型与存储空间 栈内存和堆内存

详解JS变量存储深拷贝和浅拷贝

基本数据类型

string、number、null、undKQgoGnuefined、boolean、symbol(ES6新增) 变量值存放在栈内存中,可直接访问和修改变量的值
基本数据类型不存在拷贝,好比如说你无法修改数值1的值

引用类型

Object Function RegExp Math Date 值为对象,存放在堆内存中
在栈内存中变量保存的是一个指针,指向对应在堆内存中的地址。
当访问引用类型的时候,要先从栈中取出该对象的地址指针,然后再从堆内存中取得所需的数据

图解存储空间

let a1 = 0; // 栈内存 let a2 = "this is string" // 栈内存 let a3 = null; // 栈内存 let b = { x: 10 }; // 变量b存在于栈中,{ x: 10 }作为对象存在于堆中 let c = [1, 2, 3]; // 变量c存在于栈中,[1, 2, 3]作为对象存在于堆中

详解JS变量存储深拷贝和浅拷贝

引用类型的赋值

let a = { x: 10,编程客栈 y: 20 } let b = a; b.x = 5; console.log(a.x); // 5

详解JS变量存储深拷贝和浅拷贝

深拷贝和浅拷贝 深拷贝

将一个对象从内存中完整的拷贝一份出来,从堆内存中开辟一个新的区域存放新对象,且修改新对象不会影响原对象

浅拷贝

浅拷贝是按位拷贝对象,它会创建一个新对象,这个对象有着原始对象属性值的一份精确拷贝。如果属性是基本类型,拷贝的就是基本类型的值;如果属性是内存地址(引用类型),拷贝的就是内存地址

对象的赋值

当我们把一个对象赋值给一个新的变量时,赋的其实是该对象的在栈中的地址,而不是堆中的数据。也就是两个对象指向的是同一个存储空间,无论哪个对象发生改变,其实都是改变的存储空间的内容,因此,两个对象是联动的。

三者对比

详解JS变量存储深拷贝和浅拷贝

浅拷贝的常用的五种方法 Object.assign()

Object.assign() 方法可以把任意多个的源对象自身的可枚举属性拷贝给目标对象,然后返回目标对象。但是 Object.assign()进行的是浅拷贝

Object.assign 会从左往右遍历源对象(sources)的所有属性,然后用 = 赋值到目标对象(target)

var obj = { a: {a: "kobe", b: 39},b:1 }; var initalObj = Object.assign({}, obj); initalObj.a.a = "wade"; initalObj.b = 2; console.log(obj.a.a); //wade console.log(obj.b); //1

扩展运算符

let obj = {a:1,b:{c:1}} let obj2 = {...KQgoGnuobj}; obj.a=2; console.log(obj); //{a:2,b:{c:1}} console.log(obj2); //{a:1,b:{c:1}} obj.b.c = 2; console.log(obj); //{a:2,b:{c:2}} console.log(obj2); //{a:1,b:{c:2}}

Array.prototype.slice

slice() 方法返回一个新的数组对象,这一对象是一个由 begin和 end(不包括end)决定的原数组的浅拷贝。原始数组的基本类型不会被改变,引用类型会被改变。

let arr = [1, 3, { username: ' kobe' }]; let arr3 = arr.slice(); arr3[0]=0; arr3[2].username = 'wade' console.log(arr);

Array.prototype.concat()

let arr = [1, 3, { username: 'kobe' }]; let arr2=arr.concat(); arr3[0]=0; arr2[2].username = 'wade'; console.log(arr);

手写浅拷贝

function shallowCopy(src) { var dst = {}; for (var prop in src) { if (src.hasOwnProperty(prop)) { dst[prop] = src[prop]; } } return dst; }

深拷贝的常用方法 ON.parse(jsON.stringify())

通过JSON.stringify实现深拷贝有几点要注意

拷贝的对象的值中如果有函数,undefined,symbol则经过JSON.stringify()序列化后的JSON字符串中这个键值对会消失

无法拷贝不可枚举的属性,无法拷贝对象的原型链

拷贝Date引用类型会变成字符串

拷贝RegExp引用类型会变成空对象

对象中含有NaN、Infinity和-Infinity,则序列化的结果会变成null

无法拷贝对象的循环应用(即obj[key] = obj)

let arr = [1, 3, { username: ' kobe' }]; let arr4 = JSON.parse(JSON.stringify(arr)); arr4[2].username = 'duncan'; console.log(arr, arr4)

手写乞丐版深拷贝

首先这个deepClone函数并不能复制不可枚举的属性以及Symbol类型

这里只是针对Object引用类型的值做的循环迭代,而对于Array,Date,RegExp,Error,Function引用类型无法正确拷贝

对象成环,即循环引用 (例如:obj1.a = obj)

function clone(target) { if (typeof target === 'object') { let cloneTarget = Array.isArray(target) ? [] : {}; for (const key in target) { cloneTarget[key] = clone(target[key]); } return cloneTarget; } else { return target; } };

皇帝版深拷贝

该实例来自ConardLi大佬的github,源地址:https://github.com/ConardLi/

郑重声明:本文版权归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。

上一篇:详解JS ES6变量的解构赋值_JavaScript_网络编程
下一篇:如何在Nodejs中使用模块fs文件系统_JavaScript_网络编程