【JavaScript】手撕前端面试题：对象参数浅拷贝 简易深拷贝 完整深拷贝_深拷贝,函数、正则

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化资料的朋友，可以戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

通过对象上的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) {
    	// hasOwnProperty() 方法会返回一个布尔值，指示对象自身属性中是否具有指定的属性
    	// 因为for in循环会遍历到原型链上的属性，所以我们需要排除掉这些原型链上的属性
        if (Object.hasOwnProperty.call(target, key)) {
           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) {
    	// hasOwnProperty() 方法会返回一个布尔值，指示对象自身属性中是否具有指定的属性
    	// 因为for in循环会遍历到原型链上的属性，所以我们需要排除掉这些原型链上的属性
        if (Object.hasOwnProperty.call(target, key)) {
	    	// 递归
	        cloneTarget[key] = \_sampleDeepClone(target[key])
        }

    }
    return cloneTarget
}

3、完整深拷贝

要求

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

注意：

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

思路

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

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

代码

function deepClone(obj, map = new Map()) {
    // 1. obj是函数时 返回一个新函数
    if (typeof obj === "function") {
    	// new Function接收的参数是字符串
        return new Function('return ' + obj.toString())()
    };

    // 2. obj是原始类型时 返回原值
    if (typeof obj !== "object" || obj === null) {
        return obj
    };

    // 3. obj是Error对象时，不做处理 （这还要做处理那就真丧尽天良）
    if (obj.constructor.name === 'Error') {
        return obj
    };

    // 4. obj是除了函数和Error对象以外的引用类型
    // 以下涉及到原型链：obj对象实例 --> 构造函数的原型对象 <--> 构造函数 --> obj实例（obj对象实例是构造函数new出的）
    // 对象实例（obj）本身不存在constructor属性，该属性存在于创建obj实例的构造函数的原型对象上（即obj.\_\_proto\_\_上），
    // 这个属性指向创建obj实例的构造函数，所以obj.constructor.name指定就是创建obj实例的构造函数的名字
    if (/^(Date|RegExp|Map|Set)$/i.test(obj.constructor.name)) {
        // 获取到对象参数的构造函数名，判断是否为函数、正则、日期、ES6新对象其中之一，
        // 如果是则直接返回通过该参数对象对应的构造函数生成的新实例对象。


![img](https://img-blog.csdnimg.cn/img_convert/aaa44cc90068ead0aabbea5df62e33ca.png)
![img](https://img-blog.csdnimg.cn/img_convert/3cb8a785824bdd05c998abfaa48b29e0.png)
![img](https://img-blog.csdnimg.cn/img_convert/5a11f85ed584b761eab54718a2ec0995.png)

**既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上大数据知识点，真正体系化！**

**由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新**

**[需要这份系统化资料的朋友，可以戳这里获取](https://bbs.csdn.net/topics/618545628)**

小伙伴深入学习提升的进阶课程，涵盖了95%以上大数据知识点，真正体系化！**

**由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新**

**[需要这份系统化资料的朋友，可以戳这里获取](https://bbs.csdn.net/topics/618545628)**