1、浅拷贝

要求

补全JavaScript代码，要求实现一个对象参数的浅拷贝并返回拷贝之后的新对象。

注意：

1. 参数可能包含函数、正则、日期、ES6新对象
2. 是对对象的参数进行浅拷贝，并不是直接对整个对象进行浅拷贝（整个对象的浅拷贝直接赋值即可）

思路

1. 先对参数进行判断，如果不是对象或者是null、函数、正则、日期、ES6新对象（Set和Map）中的一种就直接返回原参数。通过对象上的constructor.name能够获取该对象的构造函数名，能够以此来判断该对象具体是什么。

   console.log([].constructor.name); // Array
   console.log(new Date().constructor.name); // Date
   console.log({}.constructor.name); // Object
   console.log(new Set().constructor.name); // Set
   console.log(new Map().constructor.name); // Map
   console.log(new RegExp().constructor.name); // RegExp
   function fn() {
   }
   console.log(fn.constructor.name); // Function

    

2. 再根据参数是数组还是对象来并创建相应数据类型的新变量。
3. 通过for in循环向新变量中克隆原对象的参数值。

代码

const _shallowClone = target => {
// 补全代码
if (typeof target !== 'object' || target === null || /^(RegExp|Date|Set|Map|Function)$/.test(target.constructor.name)) {
return target
}
const cloneTarget = Array.isArray(target) ? [] : {};
for (const key in target) {
cloneTarget[key] = target[key]
}
return cloneTarget
}

2、简易深拷贝

要求

补全JavaScript代码，要求实现对象参数的深拷贝并返回拷贝之后的新对象。

注意：

1. 参数对象和参数对象的每个数据项的数据类型范围 仅在数组、普通对象（{}）、基本数据类型中 。
2. 无需考虑循环引用问题。

思路

这个思路与上一题《对象参数浅拷贝》类似，不同的是这题明确提出数据的类型仅在数组、普通对象（{}）、基本数据类型中，所以我们在开始时只需判断参数是否是对象或null即可。

因为是深拷贝，需要考虑到函数参数的属性值是引用类型的情况，所以在向新变量中克隆参数值时对参数值进行递归调用该函数即可。

代码

const _sampleDeepClone = target => {
// 补全代码
if (typeof target !== 'object' || target === null) {
return target
}
const cloneTarget = Array.isArray(target) ? [] : {};
for (const key in target) {
// 递归
cloneTarget[key] = _sampleDeepClone(target[key])
}
return cloneTarget
}

3、完整深拷贝

要求

补全JavaScript代码，要求实现对象参数的深拷贝并返回拷贝之后的新对象。

注意：

1. 需要考虑函数、正则、日期、ES6新对象
2. 需要考虑循环引用问题。

思路

根据题目要求，实现对象参数的深拷贝并返回拷贝之后的新对象，因为需要考虑参数对象和参数对象的每个数据项的数据类型可能包括函数、正则、日期、ES6新对象且必须考虑循环引用问题，所以需要引入ES6新对象Map（用来存放循环引用的值）并且详细的判断数据类型，核心步骤有：

1. 首先对函数参数进行判断，如果参数类型不是“object”或者参数是“null”，则直接返回该参数。
2. 获取到对象参数的构造函数名，判断是否为函数、正则、日期、ES6新对象其中之一，如果是则直接返回通过该参数对象对应的构造函数生成的新实例对象。
3. 在Map对象中获取当前参数对象，如果能获取到，则说明这里为循环引用，直接返回Map对象中该参数对象的值。
4. 如函数到此还没结束，就根据该参数的数据类型是否为数组创建新变量。
5. 保存该参数对象到Map中，值为上一步创建的新变量。
6. 遍历该对象参数，将每一项递归调用该函数本身的返回值赋给新变量。

代码

const _completeDeepClone = (target, map = new Map()) => {
// 补全代码
if (typeof target !== 'object' || target === null) {
return target
}
if (/^(RegExp|Date|Set|Map|Function)$/.test(target.constructor.name)) {
return new constructor(target)
}
if (map.get(target)) {
return map.get(target)
}
const cloneTarget = Array.isArray(target) ? [] : {};
// set() 方法为 Map 对象添加或更新一个指定了键（key）和值（value）的（新）键值对。
// target为key，cloneTarget为值，注意这个cloneTarget是引用赋值，所以之后cloneTarget改变后，map中target的值也会随之改变
map.set(target, cloneTarget)
for (const key in target) {
// 递归，注意将map向下传递
cloneTarget[key] = _completeDeepClone(target[key], map)
}
return cloneTarget
}

注意：第一次调用_completeDeepClone 时不加第二个参数。

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。本文链接：https://blog.csdn.net/m0_51969330/article/details/127604177