一、 数据类型
js的数据类型分为基本数据类型(String, Number, Boolean, Null, Undefined,Symbol)和引用数据类型。
- 基本数据类型:直接存储在栈中的数据。
- 引用数据类型:栈中存储的是该对象的引用地址,真实的数据存放在堆内存中。引用数据类型在栈中存储了指针。当解释器寻找引用值时,会首先检索其在栈中的地址,取到地址后从堆中获得实体。
- 保存在栈内存的必须是大小固定的数据,引用类型的大小不固定,只能保存在堆内存,把它的地址写在栈内存供访问。
- 如果是基本数据类型,是按值访问,操作的就是变量保存的值。如果是引用类型的值,只能通过保存在变量中的引用类型地址来操作实际对象。
二、赋值、浅拷贝和深拷贝
只准对 object 和 array 这样的引用数据类型的。
赋值:当我们把一个对象赋值给一个新的变量时,赋的其实是该对象的在栈中的引用地址,而不是堆中的数据。两个对象指向的是同一个存储空间,无论哪个对象发生改变,其实都是改变的存储空间的内容,因此,两个对象是联动的。
-
浅拷贝:浅拷贝只复制指向某个对象的指针,而不复制对象本身,新旧对象共享一块内存。浅拷贝只能拷贝一层的基本数据类型,多层后就无法拷贝到了。浅拷贝比赋值多了一层。
function shallowCopy(obj) { var prop = {}; for (var i in obj) { if (obj.hasOwnProperty(i)) { prop[i] = obj[i]; } } return prop; }
深拷贝:深拷贝会在堆内存中开辟一个新的区域存放新的值,新值和旧值不共享内存。修改新值不影响原值。
三、实现方式
-
浅拷贝的实现方式
(1)Object.assign():可以把任意多个的源对象自身的可枚举属性拷贝给目标对象,然后返回目标对象。
(2)lodash的clone方法
(3)扩展...操作符
(4)Array.prototype.concat,数组的拼接方法
(5)Array.prototype.slice,数组的截取方法
(6)手写浅拷贝
-
深拷贝的实现方式
(1)JSON.parse(JSON.stringify()):可以处理数组和对象的深拷贝,但是不能处理函数和正则等
如果obj里存在***时间对象***,得到的是***字符串*** 存在***RegExp、Error***对象,得到的是***空对象*** 存在***函数、undefined***,会把函数和undefined***丢失*** 存在***NaN、Infinity和-Infinity***,会变成***null*** 存在***构造函数***生成的,构造函数会被***丢弃***; 对象中存在循环引用(环形变量)会报错
(2)lodash的cloneDeep函数
(3)jQuery.extend函数
(4)手写递归实现
四、使用场景
深拷贝
在前台发请求从后台获取数据的时候,获取的一般都是json格式的对象,我们一般要对这些数据进行操作,但是这些数据可能有其他地方也需要使用,就可能会造成很多隐性问题,对数据做一次深拷贝,就能让我们更安全的操作数据了,就不会出现原数据的破坏。
从服务器fetch到数据之后我将其存放在store中,通过props传递给界面,然后我需要对这堆数据进行修改,那涉及到修改就一定有保存和取消,所以我们需要将这堆数据拷贝到其他地方。