前文JavaScript由什么组成中讲述了JavaScript 的数据类型分为基本类型和引用类型,而区分两则的依据是基本类型是”轻量“的,它存在栈内存中,而引用类型比较重,它存在堆内存中。所以当基本类型拷贝时,能直接拷贝,引用类型拷贝时,拷贝的不是对象(引用类型有且只有一个数据类型——对象),而是该对象在内存中的地址
在一切皆对象中,我们曾经清晰地表达一个观点,在 JavaScript 的世界里,除去 undefined、null外,一切皆对象。对象在使用过程中频繁用到的一点是赋值拷贝,而当你拷贝出错时,情况会很糟糕。所以我们这节就是为讲解对象中的拷贝而生
正文
首先 JavaScript 没有不可变数据结构,不可变数据结构是函数式编程中必备的
可变的好处是节省内存或是利用可变性做一些事情,但是在复杂的开发中它的副作用远比好处大得多,于是有了浅拷贝和深拷贝
笔者这里有几个自问自答的解释
对象为什么是拷贝地址?
- 为了性能(节省内存),试想如果每个对象都是拷贝值,那对象一大/多,占用的内存就会几何上升
如何拷贝对象的值
- Object.assign
- 扩展运算符
- slice(数组方法)
- concat(数组方法)
- JSON.stringify
这五种方法都能拷贝对象的值,而前四者是浅拷贝,JSON.stringify 是深拷贝
什么是浅拷贝?什么又是深拷贝?
浅拷贝是创建一个新对象,这个对象对原始对象属性值进行复制
- 属性是基础类型,拷贝的就是基本类型的值,修改内容不影响
- 属性是引用类型,拷贝的就是内存地址,修改内容互相影响
- 深拷贝:整个对象拷贝到另一个内存中,修改内容互不影响
说得直白点,浅拷贝只拷贝一层,深拷贝直接复制对象
为什么要有浅拷贝,直接深拷贝代替不就好了。当然,这个问题同样有网友提出——JS的浅拷贝究竟有什么作用?,虽然笔者没找到相关资料,但怀疑还是因为性能,浅拷贝能应付很多场景,非不必要不用深拷贝。在设计上让开发者少用,无形中提高开发体验
Object.assign
Object.assign()方法可以把任意多个原对象自身的可枚举属性拷贝给目标对象,然后返回目标对象
它拷贝的是对象的属性的引用,而不是对象本身
是 ES6 中 Object 对象新增的方法
参数:
target:目标对象
sources: 任意多个原对象。
返回值:目标对象会被返回
适用对象:Object
案例一:
var obj1 = { a: 10, b: 20, c: 30 };
var obj2 = Object.assign({}, obj1);
obj2.b = 100;
console.log(obj1); // {a: 10, b: 20, c: 30}
console.log(obj2); // {a: 10, b: 100, c: 30}
案例二:
var obj = { a: { a: 'hello', b: 21 } };
var initialObj = Object.assign({}, obj);
initialObj.a.a = 'changed';
console.log(obj.a.a); // "change"
可以看出,Object 只能拷贝第一层对象,如果再往深一层拷贝,就有问题了。所以Object.assign 是浅拷贝
扩展运算符(...)
扩展运算符,可以在函数调用/数组构造时,将数组表达式或者 string 在语法层面展开;还可以在构造字面量对象时,将对象表达式按 key-value 的方式展开
诚然,我们都知道展开运算符的作用并不是为了拷贝。但无可厚非,浅拷贝也是展开运算符的功能点之一
适用对象:Object/Array
案例一:一维数组
var arr = [1, 2, 3];
var arr2 = [...arr];
arr2.push(4);
// arr2 [1, 2, 3, 4]
// arr1 不受影响
案例二:多维数组
var a = [
[1, 2],
[3, 4],
[5, 6],
];
var b = [...a];
b.shift().shift();
// b [[3, 4], [5, 6]]
// a [[2], [3, 4], [5, 6]]
扩展运算符也是浅拷贝
slice
slice() 方法返回一个新的数组对象,这一对象是一个由 begin
和 end
决定的原数组的浅拷贝(包括 begin
不包括 end
)。原始数组不会被改变
适用对象:Array
案例:
const family = [
'father',
'mother',
'brother',
['sister0', 'sister1', 'sister2'],
];
const copyFamily = family.slice();
copyFamily[0] = 'father1';
copyFamily[3][1] = 'brother1';
console.log(family); // ['father', 'mother', 'brother', ['sister0' , 'brother1', 'sister2']]
console.log(copyFamily); // ['father1', 'mother', 'brother', ['sister0' , 'brother1', 'sister2']]
// 复制一层,第二层开始引用
如上案例,slice 只能复制一层,第二层就是复制引用地址了,slice 也是浅拷贝
concat
concat() 方法用于合并两个或多个数组。此方法不会改变现有数组,而是返回一个新数组
适用对象:Array
const array1 = ['a', 'b', ['c0', 'c1', 'c2']];
const array2 = array1.concat();
array2[1] = 'B';
array2[2][1] = 'C1';
console.log(array1); // ['a', 'b', ['c0', 'C1', 'c2']]
console.log(array2); // ['a', 'B', ['c0', 'C1', 'c2']]
// 复制一层,第二层开始引用
concat 同 slice,都是针对数组的浅拷贝
如何实现浅拷贝
简单来说,浅拷贝只复制一层对象的属性
hasOwnProperty 的作用是判断对象自身属性中是否具有指定的属性
function shallowClone(source) {
if (typeof target === 'object' && target !== null) {
var target = Array.isArry(source) ? [] : {};
for (let prop in source) {
if (source.hasOwnProperty(prop)) {
target[prop] = source[prop];
}
}
return target;
} else {
return source;
}
}
综上分析,JavaScript 的浅拷贝有 4 种,针对数组的浅拷贝有 slice、concat,针对对象的 Object.assign() ,还有就是适用数组和对象的扩展运算符(...)
深拷贝的原理
浅拷贝只是创建一个新的对象,复制了原有对象的基本类型的值,而引用类型只拷贝了一层属性,再深层的就无法拷贝。深拷贝则不同,它会在堆内存中开辟一块内存地址,将原有对象完全复制过来
深拷贝的是将一个对象从内存中完整地拷贝出来一份给目标对象,并从堆内存中开辟一个全新的空间存放新对象,且新对象的修改并不会改变元对象,二者实现真正的分离
简单归纳:深拷贝是递归复制了所有层级中对象的属性
JSON.stringify
var arr = [1, 2, 3, 4, { value: 5 }];
var arr1 = JSON.parse(JSON.stringify(arr));
arr[4].value = 6;
console.log(arr1); //[1, 2, 3, 4, { value: 5 }]
var obj = {
name: "johan",
address: {city: "shanghai"}
}
var obj1 = JSON.parse(JSON.stringify(obj));
obj.address.city = "beijing";
console.log(obj1); //{name: "johan", address:{city: "shanghai"}
虽然 JSON.stringify 能实现对数组和对象的深拷贝,但它却有几个坑
- 它无法实现对函数、RegExp 等特殊对象的克隆
- 它会抛弃对象的 constructor,所有的构造函数会指向 Object
- 对象有循环引用,会报错
我们来测试一下这几个坑,
// 构造函数
function Person(name) {
this.name = name;
}
const Elaine = new Person('elaine');
// 函数
function say() {
console.log('hi');
}
const oldObj = {
a: say,
b: new Array(1),
c: new RegExp('ab+c', 'i'),
d: Elaine,
};
const newObj = JSON.parse(JSON.stringify(oldObj));
// 无法复制函数
console.log(newObj.a, oldObj.a); // undefined [Function: say]
// 稀疏数组复制错误
console.log(newObj.b[0], oldObj.b[0]); // null undefined
// 无法复制正则对象
console.log(newObj.c, oldObj.c); // {} /ab+c/i
// 构造函数指向错误
console.log(newObj.d.constructor, oldObj.d.constructor); // [Function: Object] [Function: person]
我们可以看到在对函数、正则对象。稀疏数组等对象克隆时会发生意外,构造函数指向也会发生错误
const oldObj = {};
oldObj.a = oldObj;
const newObj = JSON.parse(JSON.stringify(oldObj));
console.log(newObj.a, oldObj.a); // TypeError: Converting circular structure to JSON
对象的循环引用会抛出错误
JSON.stringify 深拷贝能解决现实中的大部分场景,但缺陷也让其成了面试中的常客,现在我们挑战下手写深拷贝
手写深拷贝
深拷贝的要领是递归+深拷贝
我们先实现一个针对数组和对象的深拷贝
function deepClone(source) {
// 针对基本数据类型
if (typeof source !== 'object' || source === null ) {
return source
}
// 判断它是数组还是对象
// 或者 let target = source instanceof Array ? [] : {}
let target = Array.isArray(source) ? [] : {}
// 循环遍历复制每个属性
for (let prop in source) {
// 自有属性才做拷贝
if (source.hasOwnProperty(prop)) {
// 判断自有属性是否是对象
target[prop] = typeof source[prop] === 'object' ? deepClone(source[prop]) : source[prop]
}
}
return target
}
以上是简单的深拷贝,与 JSON.stringify 的深拷贝效果大差不差。它们同样存在的缺点是:
- 对包含循环引用的对象(对象之间互相引用,形成无限循环)执行此方法,会抛出错误
- 以 Symbol 类型为属性值的属性都会被忽略掉
- 缺少针对其他的内置构造函数的兼容,如 Function、RegExp、Date、Set、Map
我们使用 WeakMap 来解决循环引用,如要其他数据类型,加上便是
这里说明一下为什么用 WeakMap 来解决循环引用,以及它与 Map 的区别
要想解决循环引用问题,可以额外开辟一块存储空间,来存储当前对象和拷贝对象的对应关系,当拷贝时,先从空间中找,找到直接返回,没有的话正常拷贝
而这类数据结构可以用 map、WeakMap 。两者的区别在于
- WeakMap 对象是一组键/值对的集合,其中的键是弱引用。其键必须是对象,而值可以是任意的。Map的键可以是任意的,包括函数、对象或任意基本类型
- WeakMap 是弱引用,可以被垃圾回收。Map 的键与内存绑定
- Map 可以被遍历,WeakMap 不能被遍历
简单来说,因为 WeakMap 是弱引用,所以在没有其他引用存在时垃圾回收能正常进行
function deepClone(source, storage = new WeakMap()) {
// 针对基本数据类型
if (typeof source !== 'object' || source === null) {
return source
}
// 是否是日期
if (source.constructor === Date) {
return new Date(source)
}
// 是否是正则
if (source.constructor === RegExp) {
return new RegExp(source)
}
// 是否是数组
let target = source instanceof Array ? [] : {}
// 循环引用 返回存储的引用数据
if (storage.has(source)) return storage.get(source)
// 开辟存储空间设置临时存储值
storage.set(source, target)
// 是否包含 Symbol 类型
let isSymbol = Object.getOwnPropertySymbols(source)
// 包含 Symbol 类型
if (isSymbol.length) {
isSymbol.forEach((item) => {
if (typeof source[item] === 'object') {
target[item] = deepClone(source[item], storage);
return
}
target[item] = source[item]
})
}
// 不包含 Symbol
for(let key in source) {
if (source.hasOwnProperty(key)) {
target[key] = typeof source[key] === 'object' ? deepClone(sourcep[key], storage) : source[key]
}
}
return target;
}
笔者的这个深拷贝肯定不是最全的,非大佬写出的让面试官惊艳的深拷贝可比。笔者只能说提供一丢丢深拷贝的思路
总结
深拷贝是前端面试中必考的一项,他若问你怎么手写,你若是只写了 JSON.parse(JSON.stringify(source))肯定是不合格的。写 hasOwnProperty 也只能靠边站,而如果解决循环引用、Symbol、各个数据类型拷贝等问题,才能说明你明白了深拷贝
参考资料
系列文章
- 深入理解JavaScript——开篇
- 深入理解JavaScript——JavaScript 是什么
- 深入理解JavaScript——JavaScript 由什么组成
- 深入理解JavaScript——一切皆对象
- 深入理解JavaScript——Object(对象)
- 深入理解JavaScript——new 做了什么
- 深入理解JavaScript——Object.create
- 深入理解JavaScript——拷贝的秘密
- 深入理解JavaScript——原型
- 深入理解JavaScript——继承
- 深入理解JavaScript——JavaScript 中的始皇
- 深入理解JavaScript——instanceof——找祖籍
- 深入理解JavaScript——Function
- 深入理解JavaScript——作用域
- 深入理解JavaScript——this关键字
- 深入理解JavaScript——call、apply、bind三大将
- 深入理解JavaScript——立即执行函数(IIFE)
- 深入理解JavaScript——词法环境
- 深入理解JavaScript——执行上下文与调用栈
- 深入理解JavaScript——作用域 VS 执行上下文
- 深入理解JavaScript——闭包
- 深入理解JavaScript——防抖与节流
- 深入理解JavaScript——函数式编程
- 深入理解JavaScript——垃圾回收机制
- 深入理解JavaScript——数组
- 深入理解JavaScript——循环都来这儿
- 深入理解JavaScript——字符串
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。