JS深拷贝和浅拷贝
1.js基本数据类型
- 基本数据类型： String,Boolean,Number,Undefined,Null\
- 引用数据类型：
Object(Array,Date,RegExp,Function)
基本数据类型和引用数据类型的区别：
- 保存位置不同: 基本数据类型保存在栈内存中，引用数据类型保存在堆内存中，然后在栈内存中保存了一个对堆内存中实际对象的引用，即数据在堆内存中的地址，js对引用数据类型的操作都是操作对象的引用而不是实际对象，如果obj1拷贝了obj2，那么这两个引用数据类型就指向了同一个堆内存对象，具体操作是obj1将栈内存的引用地址复制了一份给obj2，因而他们指向了一个共同的堆内存对象；
为什么基本类型保存在栈中，引用数据类型保存堆中？
- 堆比栈大，栈比堆的速度快
- 基本数据类型比较稳定，相对来说占用的内存小
- 引用数据类型大小是动态的，而且是无限的
- 堆内存是无序存储，可以根据引用直接获取
按引用访问： js不允许直接访问保存早堆内存中的对象，所以访问一个对象时，首先得到的是这个对象在栈内存中的地址，然后在按照这个地址去获得这个对象的值。
ECMAScript中所有函数的参数都是按值传递的，对于原始值，只要把变量里的值传递给参数，之后参数和这个变量互不影响，对于引用值，对象变量里面的值就是这个对象在堆内存中的内存地址，因此它传递的值是这个内存地址，这也就是为什么函数内部对这个参数修改会体现在外部的原因，因为他们指向的是同一个对象。
-
基本数据类型使用typeof可以返回基本数据类型，但是null会返回一个object，因此null表示一个空对象指针；引用数据类型使用typeof会返回object，此时就需要用instanceof来检测引用数据类型。
-
定义引用数据类型需要使用new操作符，后面跟一个构造函数来创建。
1） 使用new操作符创建对象；
var obj = new Object();
obj.name = "Lusen"
2） 使用对象字面量创建对象
var obj = { name: "Lusen" }
- 可以使用点表示法访问对象属性，也可以使用[]访问对象属性（[]可以包含变量和非法字符）
- ES6新增数据类型：Map, Set, Generator, Symbol
深拷贝和浅拷贝
浅拷贝和深拷贝都只针对引用数据类型，浅拷贝只复制指向某个对象的指针，而不复制对象本身，新旧对象共享同一块内存；但深拷贝会创造一个一样的对象，不会和原来的对象共享内存，修改新对象不会改变原对象。
区别：浅拷贝只复制对象的第一层属性、深拷贝可以对对象的属性进行递归复制；
- Object.assign第一级属性是深拷贝，第一级以下浅拷贝
let person = {
name: 'Lusen',
speak: {
chinese: 'good',
english: 'bad'
}
}
let person2 = Object.assign({}, person)
person2.name = 'engline'
person2.speak.chinese = 'greet'
console.log(person.name); // Lusen
console.log(person2.name); // engline
console.log(person.speak.chinese); // greet
console.log(person2.speak.chinese); // greet
- 递归实现深拷贝
function deepCopy(obj) {
var _obj = Array.isArray(obj) ? [] : {};
if (obj && typeof _obj === 'object') {
for (var i in obj) {
var prop = obj[i] // 避免互相引用造成死循环
if (prop === obj) {continue};
if (obj.hasOwnProperty(i)){
// 如果子属性为引用数据类型，则递归复制
if (prop && typeof prop === 'object') {
_obj[i] = deepCopy(prop)
}else {
// 基本数据类型，直接简单复制
_obj[i] = prop
}
}
}
}
return _obj;
}
var obj1 = {
a: 1,
b: 2,
c: {
d: 3
}
}
var obj2 = deepCopy(obj1);
obj2.a = 3;
obj2.c.d = 4;
alert(obj1.a); // 1
alert(obj2.a); // 3
alert(obj1.c.d); // 3
alert(obj2.c.d); // 4
- 使用JSON.stringify和JSON.parse实现深拷贝：先把对象转化为字符串，在转成新的对象
function deepCopy(obj1){
let _obj = JSON.stringify(obj1);
let obj2 = JSON.parse(_obj);
return obj2;
}
var a = [1, [1, 2], 3, 4];
var b = deepCopy(a);
b[1][0] = 2;
alert(a); // 1,1,2,3,4
alert(b); // 2,2,2,3,4
缺点: 会抛弃对象的constructor，深拷贝之后，不管这个对象原来的构造函数是什么，都会变成Object。这种方法只能处理对象只有Number,String,Boolean,Array,扁平对象，也就是说只有可以转成json格式的对象才能这样用，function就没办法
let obj1 = {
fun:function(){
alert(123);
}
}
let obj2 = JSON.parse(JSON.stringify(obj1));
console.log(typeof obj1.fun); // function
console.log(typeof obj2.fun); // undefined
- lodash函数库有提供方法做深拷贝
var _ = require('lodash');
var obj1 = {
a: 1,
b: { f: { g: 1 } },
c: [1, 2, 3]
};
var obj2 = _.cloneDeep(obj1);
console.log(obj1.b.f === obj2.b.f); // false
- slice只有对一级属性的数组对象深拷贝
// 一级属性数组使用slice
var a = [1,2,3,4];
var b = a.slice();
b[0] = 2;
alert(a); // 1,2,3,4
alert(b); // 2,2,3,4
// 对有多层属性的数组对象使用slice
var a = [1,[1,2],3,4];
var b = a.slice();
b[1][0] = 2;
alert(a); // 1,2,2,3,4
alert(b); // 1,2,2,3,4
- Object.create
var obj1 = {
a: 1,
b: {
c: 2
}
}
var obj2 = Object.create(obj1)
obj2.a = 22
obj2.b.c = 333
console.log(obj1.a); // 1
console.log(obj2.a); // 22
console.log(obj1.b.c); // 333
console.log(obj2.b.c); // 333
