【JavaScript】手撕前端面试题：对象参数浅拷贝 | 简易深拷贝 | 完整深拷贝

🖥️ NodeJS专栏：Node.js从入门到精通
🖥️ 博主的前端之路（源创征文一等奖作品）：前端之行，任重道远（来自大三学长的万字自述）
🖥️ TypeScript知识总结：TypeScript从入门到精通（十万字超详细知识点总结）
🧑‍💼个人简介：大三学生，一个不甘平庸的平凡人🍬
👉 你的一键三连是我更新的最大动力❤️！
🏆分享博主自用牛客网🏆：一个非常全面的面试刷题求职网站🍬

文章目录

前言

向大家推荐一款博主一直在用的面试刷题求职网站：牛客网

牛客网不仅具有公司真题、专项练习、面试题库、在线编程等功能，还具有非常强大的AI模拟面试功能，简直是求职者的福音！

牛客网里的题库非常全面的，无论你是前端还是后端，是想要备考还是准备面试又或者是想要提高自己，你都能在牛客网上找到适合自己的题，赶快点击链接去注册登录吧：点击进入牛客网

牛客网牛客网
本篇文章所有示例参考自牛客网

题库/在线编程/JS篇

。

1、浅拷贝

要求

补全

JavaScript

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

注意：

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

思路

1. 先对参数进行判断，如果不是对象或者是null、函数、正则、日期、ES6新对象（Set和Map）中的一种就直接返回原参数。 > 通过对象上的> > constructor.name> > 能够获取该对象的构造函数名，能够以此来判断该对象具体是什么。console.log([].constructor.name);// Arrayconsole.log(newDate().constructor.name);// Dateconsole.log({}.constructor.name);// Objectconsole.log(newSet().constructor.name);// Setconsole.log(newMap().constructor.name);// Mapconsole.log(newRegExp().constructor.name);// RegExpfunctionfn(){}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
}

2、完整深拷贝

要求

补全

JavaScript

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

注意：

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

思路

根据题目要求，实现对象参数的深拷贝并返回拷贝之后的新对象，因为需要考虑参数对象和参数对象的每个数据项的数据类型可能包括函数、正则、日期、

ES6

新对象且必须考虑循环引用问题，所以需要引入

ES6

新对象

Map

（用来存放循环引用的值）并且详细的判断数据类型，核心步骤有：

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

代码

const _completeDeepClone =(target, map =newMap())=>{// 补全代码if(typeof target !=='object'|| target ===null){return target
    }if(/^(RegExp|Date|Set|Map|Function)$/.test(target.constructor.name)){returnnewconstructor(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

时不加第二个参数。

结语

这篇文章的所有内容都出自于牛客网的JS篇题库：

牛客网的

JS

题库非常贴合实际的，在写的过程查漏补缺能收获了很多，强烈将牛客网推荐给大家！

如果本篇文章对你有所帮助，还请客官一件四连！❤️

基础不牢，地动山摇！ 快来和博主一起来牛客网刷题巩固基础知识吧！