JS数据类型
在JS语言中，数据类型分为以下两种：
- 基本数据类型：
nullundefinednumberstringbooleansymbol - 引用数据类型：
ArrayFunctionObject等
基本数据类型数据存放在栈中，栈中存放的就是数据的值，可以直接访问到数据
引用数据类型数据存放在堆中，我们定义的变量实际上是一个存放在栈中的指针，指针指向该变量在堆内存中的地址。
举个例子：
//基本数据类型
let num = 1;
let str = 'bob';
let bool = true;
//引用数据类型
let obj = {name:'rudy'};
上面的变量在内存中的存储方式则类似于下面这张图：
在栈内存中存放的FF25 是一个指向堆内存空间的地址，通过该地址才可以访问到存储在堆内存中的引用类型数据
浅拷贝和深拷贝
那么什么是浅拷贝和深拷贝呢？
首先我们要明确的是，浅拷贝和深拷贝是针对于引用类型数据来说的，另外特别注意的是，赋值操作(=)和浅拷贝不是一个概念
赋值操作
先上代码:
//基本数据类型
let a = 1;
let b = a;
a++;
console.log(a); //11
console.log(b); //10
//引用数据类型
let c = {};
var d = c;
c.name = 'rudy';
console.log(c.name); //rudy
console.log(d.name); //rudy
先来解释基本数据类型，基本数据类型的赋值操作，实际上是重新开辟一段内存空间，在把值放到新开辟的内存空间中，因此a和 b实际上在不同的内存空间,互不影响
对于引用数据类型，赋值操作实际上进行的仅仅是复制了一份指向堆内存的指针，归根结底c 和d 只是都指向了一份内存空间，因此改变c 也会同时改变d
浅拷贝
那么浅拷贝和赋值操作的区别是什么呢？看下面的代码
var obj1 = {
'name' : 'zhangsan',
'age' : '18',
'language' : [1,[2,3],[4,5]],
};
//通过赋值得到obj2
var obj2 = obj1;
//通过浅拷贝得到obj3
var obj3 = shallowCopy(obj1);
function shallowCopy(src) {
var dst = {};
for (var prop in src) {
if (src.hasOwnProperty(prop)) {
dst[prop] = src[prop];
}
}
return dst;
}
obj2.name = "lisi";
obj3.age = "20";
obj2.language[1] = ["二","三"];
obj3.language[2] = ["四","五"];
console.log(obj1);
//obj1 = {
// 'name' : 'lisi',
// 'age' : '18',
// 'language' : [1,["二","三"],["四","五"]],
//};
console.log(obj2);
//obj2 = {
// 'name' : 'lisi',
// 'age' : '18',
// 'language' : [1,["二","三"],["四","五"]],
//};
console.log(obj3);
//obj3 = {
// 'name' : 'zhangsan',
// 'age' : '20',
// 'language' : [1,["二","三"],["四","五"]],
//};
通过打印出来的输出，我们会发现以下现象：
- 改变
obj2的name属性值,obj1也发生改变 - 改变
obj3的age属性值,obj1不会发生改变 - 改变
obj2和obj3的language属性值都会导致obj1发生改变
第一种现象很好解释，obj2和obj1共同指向同一内存空间，因此改变obj2也会导致obj1发生变化
第二种现象可以得出的结论是：通过浅拷贝得到的obj3是一个重新创建的对象，依次复制obj1的属性值放到新创建的对象中
第三种现象：因为浅拷贝仅仅只复制了一层对象属性(要不怎么叫浅拷贝，是挺浅的)，并不包括对象里面的为引用类型的数据,所以会出现改变obj3 language里面的数据时，原始数据也发生了改变
深拷贝：将 B 对象拷贝到 A 对象中，包括 B 里面的子对象
浅拷贝：将 B 对象拷贝到 A 对象中，但不包括 B 里面的子对象
浅拷贝的实现方式
Object.assign()
let obj = {
name:"rudy",
info:{
"age":18,
"sex":"male"
}
}
let obj2 = Object.assign({},obj);
obj2.info.age = 24;
console.log(obj.info.age) // 24
Array.prototype.concat()
let arr = [1,2,{
name:"rudy"
}];
let arr2 = arr.concat();
arr2[2].name = "tony";
console.log(arr[2]) // {name:"tony"}
Array.prototype.slice()
let arr = [1,2,{
name:"rudy"
}];
let arr3 = arr.slice();
arr3[2].name = "tony";
console.log(arr[2]) // {name:"tony"}
深拷贝
JSON.parse(JSON.stringify())
let obj = {
name:"rudy",
info:{
sex:"male",
age:18
}
}
let deepObj = JSON.parse(JSON.stringify(obj));
deepObj.info.age = 24;
console.log(obj.info.age) // 18
原理是 JSON.stringify() 会先把一个JS对象转为一个JSON字符串,然后JSON.parse() 会再把JSON字符串重新转化为JS对象,但这种方式的问题在于不能处理函数
let arr = [1, 3, {
username: 'tony'
},function(){}];
let arr2 = JSON.parse(JSON.stringify(arr));
arr2[2].username = 'rudy';
console.log(arr[3]) //null
这是因为JSON.stringify() 方法是将一个JavaScript值(对象或者数组)转换为一个 JSON字符串，不能接受函数
- 手动遍历实现深拷贝
function deepCopy(obj) {
if (!obj && typeof obj !== 'object') {
throw new Error('error arguments');
}
const targetObj = Array.isArray(obj) ? [] : {};
//遍历每一项的值
for (let key in obj) {
//判断结构里每一项值是否存在
if (obj.hasOwnProperty(key)) {
if (obj[key] && typeof obj[key] === 'object') {
targetObj[key] = deepCopy(obj[key]);
} else {
targetObj[key] = obj[key];
}
}
}
return targetObj;
}
jQuery.extend( [deep], target, object1 [, objectN ] )
第一个参数为true时,该方法为深拷贝,但不意味着第一个参数为false为浅拷贝
实际上，不支持第一个参数传false，否则不会发生合并操作
var obj1 = {
a: 1,
b: { b1: 1, b2: 2 }
};
var obj2 = {};
$.extend(true, obj2, obj1);
obj2.b.b1 = 5;
console.log(obj1.b.b1) // 1