一、赋值与赋址
赋值时将某一数值或对象赋给某个变量的过程，有两种情况：
1、基本数据类型：赋值，赋值之后两个变量互不影响
let a = "Julian";
let b = a;
console.log(b); // Julian
a = "change Julian";
console.log(a); // change Julian
console.log(b); Julian
2、引用数据类型：赋址，两个变量拥有相同的引用，指向同一个对象，相互之间有影响，即使是改变原对象中的基本数据类型
let a = {
name: "Julian",
otherKey: {
age: "18",
sex: "male"
}
}
let b = a;
console.log(b); // {name:"Julian", otherKey:{age: "18", sex: "male"}}
a.name = "change Julian";
a.otherKey.age= "30";
console.log(a); // {name:"change Julian", otherKey:{age: "30", sex: "male"}}
console.log(b); // {name:"change Julian", otherKey:{age: "30", sex: "male"}}
在实际开发中经常会遇到需要copy一个变量的情况，但又希望copy后的变量与原变量之间互不影响，简单的一个变量赋值给另一个变量不能解决这个问题，此时就需要用到深拷贝和浅拷贝了，这也就是为什么会存在深拷贝和浅拷贝。
二、浅拷贝（Shallow Copy）
1、定义：创建一个对象，这个对象有着原始对象属性值的一份精确拷贝。如果属性是基本类型，拷贝的就是基本类型的值；如果属性是引用类型，拷贝的就是内存地址，所以如果其中一个对象改变了这个地址，就会影响到另一个对象。或者说浅拷贝只是复制指向某个对象的指针，二部复制对象本身，新旧对象还是共享同一块内存
浅拷贝.png
上图中，SourceObject是原对象，其中包含基本类型属性field1和引用类型属性refObj，可以看出浅拷贝之后基本数据类型field2和field1是不同属性，互不影响。但引用类型refObj仍然是同一个，一个改变之后会影响另一个。换句话说就是浅拷贝只解决了第一层的问题，拷贝第一层的基本类型值，以及第一层的引用类型地址。
2、实现方法
（1）Object.assign()：该方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象，它将返回目标对象
let a = {
name: "Julian",
otherKey: {
age: "18",
sex: "male"
}
}
let b = Object.assign({}, a);
console.log(b); // {name:"Julian", otherKey:{age:"18", sex: "male"}}
a.name = "change Julian";
a.otherKey.age= "30";
console.log(a); // {name: "change Julian", otherKey:{age: "30", sex: "male"}}
console.log(b); // {name:"Julian", otherKey:{age:"30", sex: "male"}}
（2）展开语法Spread
let a = {
name: "Julian",
otherKey: {
age: "18",
sex: "male"
}
}
let b = {...a};
console.log(b); // {name: "Julian", otherKey: {age: "18", sex: "male"}}
a.name = "change Julian";
a.otherKey.age= "30";
console.log(a); // {name: "change Julian", otherKey: {age: "30", sex: "male"}}
console.log(b); // {name: "Julian", otherKey: {age: "18", sex: "male"}}
（3）Array.prototype.slice()：该方法返回一个新的数组对象，这个对象是由begin和end（不包括end）决定的原数组的浅拷贝，不会改变原数组。
let a = [0, "1", [2, 3]];
let b = a.slice(1);
console.log(b); // ["1", [2, 3]]
a[1] = "99";
a[2][0] = 4;
console.log(a); // [0, "99", [4, 3]]
console.log(b); // ["1", [4, 3]]
（4）concat()：同slice方法
三、深拷贝
1、定义：深拷贝会拷贝所有属性，并拷贝属性指向的动态分配的内存。当对象和其所引用的对象一起拷贝时发生深拷贝。深拷贝相比于浅拷贝速度较慢并且花销较大，拷贝前后两个对象互不影响。
深拷贝.png
2、实现方法
（1）JSON.parse(JSON.stringify(object))，即先反序列化，再序列化
let a = {
name: "Julian",
otherKey: {
age: "18",
sex: "male"
}
}
let b = JSON.parse(JSON.stringify(a));
console.log(b); // {name: "Julian", otherKey: {age: "18", sex: "male"}}
a.name = "change Julian";
a.otherKey.age= "30";
console.log(a); // {name: "change Julian", otherKey: {age: "30", sex: "male"}}
console.log(b); // {name: "Julian", otherKey: {age: "18", sex: "male"}}
let a = [0, "1", [2, 3]];
let b = JSON.parse(JSON.stringify( a.slice(1) ));
console.log(b); // ["1", [2, 3]]
a[1] = "99";
a[2][0] = 4;
console.log(a); // [0, "99", [4, 3]]
console.log(b); // ["1", [2, 3]]
解析：该方法存在如下问题：会忽略undefined、symbol、函数，不能序列化函数，不能解决循环引用的对象，不能正确处理new Date()，不能处理正则。
// 会忽略undefined、symbol、函数
let obj = {
name: 'Julian',
a: undefined,
b: Symbol('Julian'),
c: function() {}
}
console.log(obj); // {name: "Julian", a: undefined, b: Symbol(Julian), c: f()}
let b = JSON.parse(JSON.stringify(obj));
console.log(b); // {name: "Julian"}
// 循环引用会报错
let obj = {
a: 1,
b: {
c: 2,
d: 3
}
}
obj.a = obj.b;
obj.b.c = obj.a;
let b = JSON.parse(JSON.stringify(obj));
// Uncaught TypeError: Converting circular structure to JSON
// new Date()情况下，转换结果不正确
new Date();
// Mon Dec 24 2018 10:59:14 GMT+0800 (China Standard Time)
JSON.stringify(new Date());
// ""2018-12-24T02:59:25.776Z""
JSON.parse(JSON.stringify(new Date()));
// "2018-12-24T02:59:41.523Z"
解决方法是转换成字符串或时间戳
// 转换成字符串或时间戳
let date = (new Date()).valueOf();
// 1545620645915
JSON.stringify(date);
// "1545620673267"
JSON.parse(JSON.stringify(date));
// 1545620658688
// 不能处理正则，会转化成对象
let obj = {
name: "Julian",
a: /'123'/
}
console.log(obj); // {name: "Julian", a: /'123'/}
let b = JSON.parse(JSON.stringify(obj));
console.log(b); // {name: "Julian", a: {}}
（2）jQuery.extend()：用于将一个或多个对象的内容合并到目标对象，如果多个对象有相同的属性，则后者会覆盖前者的属性值
var object1 = {
apple: 0,
banana: {weight: 52, price: 100},
cherry: 97
};
var object2 = {
banana: {price: 200},
durian: 100
};
var targetObject = $.extend(object1, object2);
console.log(targetObject)
jquery.extend().png
（3）lodash.cloneDeep()：React中的一种方法，可以详细的了解一下，这里不做详细介绍
let obj1 = {
a: 1,
b: 2,
}
let obj2 = _.cloneDeep(obj1)
console.log(obj2)
四、总结
赋值、浅拷贝、深拷贝.png
网友评论