知乎：js中的深拷贝和浅拷贝？
掘金: js 深拷贝 vs 浅拷贝
前言
首先深拷贝与浅拷贝只针对 Object, Array 这样的复杂对象的。
深拷贝和浅拷贝的主要区别就是其在内存中的存储类型不同。
栈（stack）为自动分配的内存空间，它由系统自动释放；而堆（heap）则是动态分配的内存，大小不定也不会自动释放。
浅拷贝只复制指向某个对象的指针，而不复制对象本身，新旧对象还是共享同一块内存。但深拷贝会另外创造一个一模一样的对象，新对象跟原对象不共享内存，修改新对象不会改到原对象。
简单来说，浅复制只复制一层对象的属性，并不包括对象里面的为引用类型的数据。而深复制则递归复制了所有层级。
示意图如下：
[图片上传失败...(image-5f246e-1550149849273)]
JS中的数据类型
基本数据类型
undefined，boolean，number，string，null
它们有如下特点：
- 基本数据类型存放在栈中
- 基本数据类型值不可变
javascript中的原始值（undefined、null、布尔值、数字和字符串）与对象（包括数组和函数）有着根本区别。原始值是不可更改的：任何方法都无法更改（或“突变”）一个原始值。对数字和布尔值来说显然如此 —— 改变数字的值本身就说不通，而对字符串来说就不那么明显了，因为字符串看起来像由字符组成的数组，我们期望可以通过指定索引来假改字符串中的字符。实际上，javascript 是禁止这样做的。字符串中所有的方法看上去返回了一个修改后的字符串，实际上返回的是一个新的字符串值。
- 基本类型的比较是值的比较 (==比较时会进行类型转换)
引用类型
- 引用类型存放在堆中
引用类型（object）是存放在堆内存中的，变量 实际上是一个存放在栈内存的 指针，这个指针指向 堆内存中的地址。每个空间大小不一样，要根据情况开进行特定的分配。
- 引用类型值可变
- 引用类型的比较是引用的比较
var a = [1,2,3];
var b = [1,2,3];
console.log(a === b); // false
传值与传址
在我们进行赋值操作的时候，基本数据类型的赋值（=）是在内存中新开辟一段栈内存，然后再把再将值赋值到新的栈中。基本类型的赋值的两个变量是两个独立相互不影响的变量。
但是 引用类型的赋值是传址。只是改变指针的指向，也就是说引用类型的赋值是对象保存在栈中的地址的赋值，这样的话两个变量就指向同一个对象，因此两者之间操作互相有影响
var a = {}; // a保存了一个空对象的实例
var b = a; // a和b都指向了这个空对象
a.name = 'jozo';
console.log(a.name); // 'jozo'
console.log(b.name); // 'jozo'
浅拷贝
1.函数实现
// 浅拷贝函数实现
/**
*
* @param {object} source
* @returns targetObj
*/
function shallowCopy(source) {
if (!source || typeof source !== 'object') {
throw new Error('error arguments');
}
let targetObj = source.constructor === Array ? [] : {};
for (const key in source) {
if (source.hasOwnProperty(key)) {
targetObj[key] = source[key];
}
}
return targetObj;
}
Object.assign()拷贝的是属性值。假如源对象的属性值是一个对象的引用，那么它也只指向那个引用。
let a = {
age: 1
}
let b = Object.assign({}, a)
a.age = 2
console.log(b.age) // 1
3.展开运算符 「...」
let a = {
age: 1
}
let b = { ...a }
a.age = 2
console.log(b.age) // 1
深拷贝
- 通过JSON解析解决
let a = {
age: 1,
jobs: {
first: 'FE'
}
}
let b = JSON.parse(JSON.stringify(a))
a.jobs.first = 'native'
console.log(b.jobs.first) // FE 没被改到
局限性-会忽略如下情况
- undefined
- Function
- Symbol
- 不能解决循环引用的对象
2.函数实现
// 深拷贝
function deepClone(obj) {
// 判断是否为引用类型
function isObject(o) {
return (typeof o === 'object' || typeof o === 'function' && o !== null);
}
if(!isObject(obj)) {
throw new Error('error arguments')
}
let isArray = Array.isArray(obj);
// 先潜复制一遍
let newObj = isArray ? [...obj] : {...obj};
// Reflect.ownKeys 获取对象所有 key 包括 Symbol
Reflect.ownKeys(newObj).forEach(key => {
// 判断value 是否为引用类型 => 递归调用
newObj[key] = isObject(obj[key]) ? deepClone(obj[key]) : obj[key];
});
return newObj;
}
示例：
let obj = {
a: [1, 2, 3],
b: {
c: 2,
d: 3
}
}
let newObj = deepClone(obj)
newObj.b.c = 1
console.log(obj.b.c) // 2
网友评论