前言
此文解决的痛点:网上有很多关于对象深度克隆的文章资料,但是很多讲得都不太全!
我的目的是:需要深度克隆对象中所有可能出现的数据类型,包括function
和symbol
类型!
为了不乱,我将本文结构分成两个部分:
- 梳理几种常见的深度克隆方式
- 手写实现深度克隆,包含所有类型的值,如对象中的
function
和symbol
。(这部分将是本文重点,也是本文的出现意义所在!)
梳理几种常见的深度克隆方式
这里简单说下3种深度克隆对象的方式
- 通过扩展运算符...
var a = {name:"aaa"}
var b = {...a}
- 通过合并对象的方法Object.assign
var newObj = Object.assign([],oldObj);
- 通过json的方法实现
var obj = {a:1};
var str = JSON.stringify(obj); //序列化对象
var newobj = JSON.parse(str); //还原
他们有各自的缺点,比如:
...
是后面新增的;
Object.assign
只实现第一层深度拷贝,后续层次还是浅拷贝;
通过json
的方法实现深度克隆时,如果obj
里面有时间对象,则JSON.stringify
后再JSON.parse
的结果,时间将只是字符串的形式。而不是时间对象;如果obj
里有RegExp
、Error
对象,则序列化的结果将只得到空对象;如果obj
里有function
、undefined
,则序列化的结果会把函数或 undefined
丢失;如果obj
里有NaN
、Infinity
和-Infinity
,则序列化的结果会变成null
而且还都没考虑symbol
手写实现深度克隆
思路
我的思路很简单,首先梳理对象中可能出现的数据类型,然后逐一克隆
梳理数据类型
为了不乱,我将JavaScript
的数据类型分两大类:
- 原始值类型,包括
number
、string
、boolean
、null
、undefined
- 引用值类型,包括
object
、function
、array
当然ES6 引入的新的数据类型symbol
,也要考虑进来
下面我们将实现上述8
种数据类型的克隆
实现
原始值的克隆
事实上,对于原始值的赋值,本质就是值的拷贝
所以,我们需要将对象中的原始类型属性遍历出来,思路如下:
- 通过
for in
遍历出对象身上的所有属性,但是for in
会遍历到原型上的 - 通过
hasOwnProperty
过滤掉原型上的属性 - 通过
typeof
除去object
、function
、symbol
,剩下都是直接赋值的原始值,包括number
、string
、boolean
因此,你要先自己学会这三个技术哦