一.JS中浅拷贝的手段有哪些?
1.什么是拷贝?
我们来看下面一个例子,帮助大家区分赋值与拷贝的区别:
- let arr = [1, 2, 3];
- let newArr = arr;
- newArr[0] = 100;
- console.log(arr); // [100, 2, 3]
这是直接赋值的情况,不涉及任何拷贝。当改变newArr的时候,由于是同一个引用,arr指向的值也跟着改变。
现在进行浅拷贝:
- let arr = [1, 2, 3];
- let newArr = arr.slice();
- newArr[0] = 100;
- console.log(arr); //[1, 2, 3]
当我们修改newArr的时候,arr的值并不改变,这是因为newArr是arr浅拷贝后的结果,newArr和arr现在是两个不同的引用地址了。
但我们再来看一个潜在的问题:
- let arr = [1, 2, {val: 4}];
- let newArr = arr.slice();
- newArr[2].val = 1000;
- console.log(arr);//[ 1, 2, { val: 1000 } ]
这里我们明显看到,浅拷贝虽然只能复制一层内容。但如果复制的第一层内容中,有复杂数据类型(数组/对象),那么浅拷贝将失效,这也是浅拷贝最大的限制所在了。
但幸运的是,深拷贝就是为了解决这个问题而生的,它能解决无限层级的对象嵌套问题,实现彻底的拷贝。深拷贝我们在下一道题中介绍。
接下来,我们来归纳一下JS中实现的浅拷贝都有哪些方法呢?
2.手动实现
- const shallClone = (target) => {
- if (typeof target === 'object' && target !== null) {
- const cloneTarget = Array.isArray(target) ? [] : {};
- for (let prop in target) {
- if (target.hasOwnProperty(prop)) { // 遍历对象自身可枚举属性(不考虑继承属性和原型对象)
- cloneTarget[prop] = target[prop];
- }
- return cloneTarget;
- } else {
- return target;
- }
- }
3.Object.assign
但是需要注意的是,Object.assgin() 拷贝的是对象的属性的引用,而不是对象本身。
- let obj = { name: 'sy', age: 18 };
- const obj2 = Object.assign({}, obj, {Newname: 'sss'});
- console.log(obj2); // {name: "sy", age: 18, Newname: "sss"}
4.concat()浅拷贝数组
- let arr = [1, 2, 3];
- let newArr = arr.concat();
- newArr[1] = 100;
- console.log(arr); //[ 1, 2, 3 ]
5.slice()浅拷贝
开头例子就是!!
6. ...展开运算符
- let arr = [1, 2, 3];
- let newArr = [...arr]; //跟arr.slice()是一样的效果
二.JS中深拷贝的手段有哪些?
在实现一个完整版的深拷贝函数之前,看看有没有某个api能帮助我们完成深拷贝?
1.api版-简易版
- JSON.parse(JSON.stringify());
从下面例子中,我们可以看出简易版的深拷贝,已经做到了。
- let arr = [10, [100, 200], { x: 10, y:20}];
- let newArr = JSON.parse(JSON.stringify(arr));
- console.log(newArr[2] === arr[2]; // false
其实,上面的api,它所使用的是暴力法,什么是暴力法呢,在这里给大家解释一下:
暴力法:把原始数据直接变为字符串,再把字符串变为对象,(此时浏览器会重新开辟所有的内存空间),实现深拷贝。
但是直接供我们使用的api,往往会有一些自己的弊端,比如我们看下面这个例子
- let obj = {
- a: 100,
- b: [10, 20, 30],
- c: {
- x: 10
- },
- d: /^\d+$/,
- // d: function() {}
- // d: new Date()
- // d: BigInt('10')
- // d: Symbol('f')
- };
- let newObj = JSON.parse(JSON.stringify(obj));
- console.log(newObj);
- /*
- {a: 100, b: Array(3), c: {…}, d: {…}}
- a: 100
- b: (3) [10, 20, 30]
- c: {x: 10}
- d: {}
- __proto__: Object
- }
- */
从上面例子的输出结果中,我们可以看出,正则属性直接变成了空对象。
那假如我们再把最后一个属性,换成其它类型试一试,我们同理也可以发现,JSON.parse(JSON.stringify()) 都是有弊端的。我们总结一下:
正则属性会变为空对象
函数会直接消失
日期直接字符串
Symbol直接消失
BigInt('10'),直接报错
undefined会直接消失
所以当对象中没有以上形式的属性时,可以用JSON.parse(JSON.stringify())。
但是此方法还有一个弊端,那就是循环引用问题,举个例子:
- const a = {value: 2},
- a.target = a;
拷贝a会出现系统栈溢出,因为出现了无限递归的情况。
2.实现简易版深拷贝
发现上面弊端后,我们来手写一版深拷贝
此种方法,不考虑循环引用问题,也不考虑特殊对象的问题
- function deepClone(target) {
- if (target === null) return null;
- if (typeof target !== 'object') return target;
- const cloneTarget = Array.isArray(target) ? [] : {};
- for (let prop in target) {
- if (target.hasOwnProperty(prop)) {
- cloneTarget[prop] = deepClone(target[prop]);
- }
- }
- return cloneTarget;
- }
现在我们以发现的几个问题为导向,依次完善深拷贝函数
3.解决循环引用
问题如下:
- let obj = { value: 100 };
- obj.target = obj;
- deepClone(obj); //报错: RangeError: Maximum call stack size exceeded
这就是循环引用。我们怎么来解决这个问题呢?
创建一个Map(Map类似于对象,也是键值对的集合,但是“键”可以是对象),记录下已经拷贝过的对象,如果已经拷贝过,那直接返回就行了.
其原理是每次拷贝引用类型的时候,都设置一个true作为标记,等下次再遍历该对象的时候,就知道它是否已经拷贝过。
- const isObject = (target) => (typeof target === 'object' || typeof target === 'function') && target !== null;
- function deepClone (target, map = new Map()) {
- // 先判断该引用类型是否被 拷贝过
- if (map.get(target)) {
- return target;
- }
- if (isObject(target)) {
- map.set(target, true);
- const cloneTarget = Array.isArray(target) ? [] : {};
- for (let prop in target) {
- if (target.hasOwnProperty(props)) {
- cloneTarget[prop] = deepClone(target[props], map);
- }
- }
- return cloneTarget;
- } else {
- return target;
- }
- }
现在我们就可以到已经成功了:
- const a = {val:2};
- a.target = a;
- let newA = deepClone(a);
- console.log(newA)//{ val: 2, target: { val: 2, target: [Circular] } }
好像是没有问题了, 拷贝也完成了。但还是有一个潜在的坑, 就是map 上的 key 和 map 构成了强引用关系,这是相当危险的。我给你解释一下与之相对的弱引用的概念你就明白了:
在计算机程序设计中,弱引用与强引用相对, 是指不能确保其引用的对象不会被垃圾回收器回收的引用。一个对象若只被弱引用所引用,则被认为是不可访问(或弱可访问)的,并因此可能在任何时刻被回收。--百度百科
说的有一点绕,我用大白话解释一下,被弱引用的对象可以在任何时候被回收,而对于强引用来说,只要这个强引用还在,那么对象无法被回收。拿上面的例子说,map 和 a一直是强引用的关系,在程序结束之前,a所占的内存空间一直不会被释放,便会造成严重的内存泄漏问题。
怎么解决这个问题呢?
很简单,让 map 的 key 和 map 构成弱引用即可。ES6给我们提供了这样的数据结构,它的名字叫WeakMap,它是一种特殊的Map, 其中的键是弱引用的。其键必须是对象,而值可以是任意的。
稍微改造一下极课:
- const deepClone = (target, map = new WeakMap()) => {
- //...
- }
4.解决特殊对象问题(RegExp,Date...)
如果传入的对象格式满足,正则或日期格式的话,返回一个新的正则或日期对象的实例
- function deepClone (target, map = new Map()) {
- // 检测当前对象target是否与 正则、日期格式对象匹配
- if (/^(RegExp|Date)$/i.test(target.constructor.name)){
- new constructor(target);
- }
- }
5.完整版深克隆实现源码
- const isObject = (target) => (typeof target === 'object' || typeof target === 'function') && target !== null;
- function deepClone (target, map = new Map()) {
- // 先判断该引用类型是否被 拷贝过
- if (map.get(target)) {
- return target;
- }
- // 检测当前对象target是否与 正则、日期格式对象匹配
- if (/^(RegExp|Date)$/i.test(target.constructor.name)){
- new constructor(target);
- }
- if (isObject(target)) {
- map.set(target, true);
- const cloneTarget = Array.isArray(target) ? [] : {};
- for (let prop in target) {
- if (target.hasOwnProperty(props)) {
- cloneTarget[prop] = deepClone(target[props], map);
- }
- }
- return cloneTarget;
- } else {
- return target;
- }
- }
补充:Object.keys(obj)只遍历私有属性(原型上可能有公共的方法,无法遍历)