在 JavaScript 中数据分为基本数据类型(基本类型)和对象数据类型(引用类型)。
基本类型:String, Number, Boolean, Null, Undefined,Symbol(ES6)引用类型:Object基本类型的特点:直接存储在栈(stack)内存中的数据 引用类型的特点:存储的是该对象在栈中引用,真实的数据存放在堆(heap)内存中 引用数据类型在栈中存储了指针,该指针指向堆中该实体的起始地址。当解释器寻找引用值时,会首先检索其在栈中的地址,取得地址后从堆中获得实体。
基本数据类型是指存放在栈中的简单数据段,数据大小确定,内存空间大小可以分配,它们是直接按值存放的,所以可以直接按值访问
var a = 10; var b = a; // 传值 b = 20; console.log(a); // 10 console.log(b); // 20引用类型是存放在堆内存中的对象,变量其实是保存的在栈内存中的一个指针(保存的是堆内存中的引用地址),这个指针指向堆内存。 引用类型数据在栈内存中保存的实际上是对象在堆内存中的引用地址。通过这个引用地址可以快速查找到保存中堆内存中的对象。 当我们把一个对象赋值给一个新的变量时,赋的其实是该对象的在栈中的地址,而不是堆中的数据。也就是两个对象指向的是同一个存储空间,无论哪个对象发生改变,其实都是改变的存储空间的内容,因此,两个对象是联动的。
var obj1 = { 'age' : 18 }; var obj2 = obj1; // 传址 obj2.name = "zhangsan"; console.log('obj1',obj1); // {age: 18, name: "zhangsan"} console.log('obj2',obj2); // {age: 18, name: "zhangsan"}深拷贝和浅拷贝最根本的区别在于是否是真正获取了一个对象的拷贝实体,而不是引用。 浅拷贝只拷贝一层对象的属性,而深拷贝则递归拷贝了所有层级。
深拷贝在计算机中开辟了一块新的内存地址用于存放拷贝的对象浅拷贝仅仅是指向被拷贝的内存地址,如果原地址中对象被改变了,那么浅拷贝出来的对象也会相应改变如果属性是基本类型,拷贝的就是基本类型的值; 如果属性是内存地址(引用类型),拷贝的就是内存地址 ,因此如果其中一个对象改变了这个地址,就会影响到另一个对象。
只适用于Object对象
var obj = { a: { b: 1 }, c: 3 }; var newObj = Object.assign({}, obj); // Object对象浅拷贝 newObj.a.b = 2; // 修改的newObj.a是引用类型,会影响原对象obj.a console.log(obj.a.b); // 2 newObj.c = 4; // 修改的newObj.c是基本类型,不会影响原对象obj.c console.log(obj.c); // 3.
只适用于Array数组 不修改原数组,只返回一个浅复制了原数组中的元素的一个新数组
var arr = [1, 2, [3, 4]]; var newArr = arr.slice(); // Array数组浅拷贝 // var newArr = arr.concat(); // 同理 // var newArr = Array.from(arr); // 同理 newArr[2][1] = 5; // 修改的newArr[2]是引用类型,会影响原数组arr[2] console.log(arr[2][1]); // 5 newArr[0]=6; // 修改的newArr[0]是基本类型,不会影响原数组arr[0] console.log(arr); // 5.
适用于Object对象和Array数组
var obj = { a: { b: 1 } }; var newObj = { ...obj }; // Object对象浅拷贝 newObj.a.b = 2; console.log(obj.a.b); // 2 /** -------------------------- **/ var arr = [1, 2, [3, 4]]; var newArr = [...arr]; // Array数组浅拷贝 newArr[2][1] = 5; console.log(arr[2][1]); // 5深拷贝则是开辟新的栈,两个对象对应两个不同的地址,修改一个对象的属性,不会改变另一个对象的属性。 可以利用递归思想(遍历对象、数组直到里边都是基本数据类型,然后再去复制,就是深度拷贝)来做,及省性能,又不会发生引用。 .
.
lodash
const _ = require('lodash'); _.clone(obj) // 浅拷贝 _.cloneDeep(obj) // 深拷贝.
jQuery
$.extend(obj1,obj2) // 浅拷贝 默认 $.extend(true,obj1,obj2) // 深拷贝