位置: IT常识 - 正文

【JavaScript】手撕前端面试题:对象参数浅拷贝 | 简易深拷贝 | 完整深拷贝(javascript手机版)

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

推荐整理分享【JavaScript】手撕前端面试题:对象参数浅拷贝 | 简易深拷贝 | 完整深拷贝(javascript手机版),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:javascript手机编程,javascript手机编程,手机里javascript有什么用,javascripts,手机里javascript有什么用,javascript手机编程,javascript手机版,javascript手机版,内容如对您有帮助,希望把文章链接给更多的朋友!

🖥️ NodeJS专栏:Node.js从入门到精通 🖥️ 博主的前端之路(源创征文一等奖作品):前端之行,任重道远(来自大三学长的万字自述) 🖥️ TypeScript知识总结:TypeScript从入门到精通(十万字超详细知识点总结) 🧑‍💼个人简介:大三学生,一个不甘平庸的平凡人🍬 👉 你的一键三连是我更新的最大动力❤️!

文章目录1、浅拷贝要求思路代码2、简易深拷贝要求思路代码3、完整深拷贝要求思路代码1、浅拷贝要求

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

注意:

参数可能包含函数、正则、日期、ES6新对象是对对象的参数进行浅拷贝,并不是直接对整个对象进行浅拷贝(整个对象的浅拷贝直接赋值即可)思路先对参数进行判断,如果不是对象或者是null、函数、正则、日期、ES6新对象(Set和Map)中的一种就直接返回原参数。

通过对象上的constructor.name能够获取该对象的构造函数名,能够以此来判断该对象具体是什么。

console.log([].constructor.name); // Arrayconsole.log(new Date().constructor.name); // Dateconsole.log({}.constructor.name); // Objectconsole.log(new Set().constructor.name); // Setconsole.log(new Map().constructor.name); // Mapconsole.log(new RegExp().constructor.name); // RegExpfunction fn() {}console.log(fn.constructor.name); // Function再根据参数是数组还是对象来并创建相应数据类型的新变量。通过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代码,要求实现对象参数的深拷贝并返回拷贝之后的新对象。

注意:

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

这个思路与上一题《对象参数浅拷贝》类似,不同的是这题明确提出数据的类型仅在数组、普通对象({})、基本数据类型中,所以我们在开始时只需判断参数是否是对象或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】手撕前端面试题:对象参数浅拷贝 | 简易深拷贝 | 完整深拷贝(javascript手机版)

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

注意:

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

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

首先对函数参数进行判断,如果参数类型是函数,则创建一个新的函数并返回。

如果参数不是函数也不是“object”或者参数是“null”,则直接返回该参数。

如果参数是Error对象,不做处理直接返回即可。(这世界上应该没有对Error对象深拷贝的需求吧!)

获取到对象参数的构造函数名,判断是否为正则、日期、ES6新对象其中之一,如果是则直接返回通过该参数对象对应的构造函数生成的新实例对象。

在Map对象中获取当前参数对象,如果能获取到,则说明这里为循环引用,直接返回Map对象中该参数对象的值。

如函数到此还没结束,就根据该参数的数据类型是否为数组创建新变量。

保存该参数对象到Map中,值为上一步创建的新变量。

遍历该对象参数,将每一项递归调用该函数本身的返回值赋给新变量。

代码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新对象其中之一, // 如果是则直接返回通过该参数对象对应的构造函数生成的新实例对象。 return new obj.constructor(obj); }; // map用来存放存放循环引用的值,如map中存在以该对象为key的值,说明这个obj是循环引用的,直接返回它在map中对应的值 if (map.get(obj)) { return map.get(obj); }; // 创建一个新对象 let newObj = Array.isArray(obj) ? [] : {}; // 向map中添加,key为obj,值为newObj(obj的副本),这里存的newObj是地址,所以下面改变newObj时map中obj对应的值也能随之改变 map.set(obj, newObj); // 遍历 for (const key in obj) { // for in会遍历到原型链上的属性,但我们不需要原型链上的属性,可以使用hasOwnProperty排除 if (Object.hasOwnProperty.call(obj, key)) { // hasOwnProperty() 方法会返回一个布尔值,指示对象自身属性中是否具有指定的属性(也就是,是否有指定的键)。 newObj[key] = deepClone(obj[key], map); }; }; return newObj;};

注意:第一次调用deepClone 时不加第二个参数。

本文链接地址:https://www.jiuchutong.com/zhishi/297678.html 转载请保留说明!

上一篇:vue中使用唯一标识uuid——uuid.v1()-时间戳、uuid.v4()-随机数(vue指定)

下一篇:学习笔记:统计建模方法的比较分析(统计 α)

  • 企业微博营销推广 发布什么样的信息用户体验最好(企业微博营销有哪些运作模式)

    企业微博营销推广 发布什么样的信息用户体验最好(企业微博营销有哪些运作模式)

  • vivox70pro无线充电怎么打开(vivox70pro无线充电怎么充)

    vivox70pro无线充电怎么打开(vivox70pro无线充电怎么充)

  • 华为p30有视频通话美颜的吗

    华为p30有视频通话美颜的吗

  • 荣耀30pro耳机接口在哪(荣耀30pro耳机插上去没反应)

    荣耀30pro耳机接口在哪(荣耀30pro耳机插上去没反应)

  • pagedown键作用(pagedown快捷键)

    pagedown键作用(pagedown快捷键)

  • 手机进了水声音变杂了(手机进了水声音变了)

    手机进了水声音变杂了(手机进了水声音变了)

  • 手机断网怎么解决方法(手机断网怎么解决方法vivo)

    手机断网怎么解决方法(手机断网怎么解决方法vivo)

  • 网线断了打什么电话修(网线断了叫谁来修)

    网线断了打什么电话修(网线断了叫谁来修)

  • 淘花下单商家会知道吗(淘宝下单用淘花商家能看出来吗)

    淘花下单商家会知道吗(淘宝下单用淘花商家能看出来吗)

  • 笔记本jkl按出来是123怎么回事(笔记本按j出1)

    笔记本jkl按出来是123怎么回事(笔记本按j出1)

  • 快手账号异常需要激活(快手账号异常需要实名激活)

    快手账号异常需要激活(快手账号异常需要实名激活)

  • lofter举报人会不会显示昵称(lofter举报了作者会知道吗)

    lofter举报人会不会显示昵称(lofter举报了作者会知道吗)

  • 华为mate30语音助手在哪里(华为mate30语音助手怎么打开)

    华为mate30语音助手在哪里(华为mate30语音助手怎么打开)

  • 恢复3年前的qq好友(qq恢复3年前的说说)

    恢复3年前的qq好友(qq恢复3年前的说说)

  • 硬盘有问题会出现什么情况(硬盘有问题会导致死机吗)

    硬盘有问题会出现什么情况(硬盘有问题会导致死机吗)

  • 苹果订单待处理什么意思(苹果订单待处理已经扣费了 能退款吗)

    苹果订单待处理什么意思(苹果订单待处理已经扣费了 能退款吗)

  • 绑定pid是什么意思(绑定eip的作用)

    绑定pid是什么意思(绑定eip的作用)

  • 快手点了关注收不收费(快手725134关注了我)

    快手点了关注收不收费(快手725134关注了我)

  • 华为屏幕组件包括什么(华为屏幕组件包括电池吗)

    华为屏幕组件包括什么(华为屏幕组件包括电池吗)

  • 手机怎么看成为好友多少天(手机怎么看成为up主多少天)

    手机怎么看成为好友多少天(手机怎么看成为up主多少天)

  • 华为p30pro可以插内存卡吗(华为p30Pro可以插sd卡吗)

    华为p30pro可以插内存卡吗(华为p30Pro可以插sd卡吗)

  • 如何设定定时开关(如何设定定时开关机时间)

    如何设定定时开关(如何设定定时开关机时间)

  • 小米手环监控睡眠原理(小米手环监控睡觉能用吗)

    小米手环监控睡眠原理(小米手环监控睡觉能用吗)

  • 少年儿童沉迷网络游戏的原因分析及应对策略(少年儿童沉迷网络游戏现象)

    少年儿童沉迷网络游戏的原因分析及应对策略(少年儿童沉迷网络游戏现象)

  • 小米cc9怎么关机(小米cc9怎么关机重启)

    小米cc9怎么关机(小米cc9怎么关机重启)

  • 如何去掉Word文字下面的波浪线(如何去掉word文档中的波浪线)

    如何去掉Word文字下面的波浪线(如何去掉word文档中的波浪线)

  • 计提税额与实缴税额的区别是什么?
  • 企业所得税法允许税前扣除的费用划分为
  • 委托加工物资的消费税计入成本吗
  • 将自产货物赠送客户
  • 单位收到已交个税的劳务发票还需要申报个税吗
  • 通用机打发票内容可以随便写吗
  • 电子商务公司开业活动流程
  • 对公账户可以报一办几个
  • 银行销户余额取现怎么做分录
  • 普通发票不能抵扣进项税额怎么做账
  • 专用发票抵扣联丢失还能抵扣吗
  • 划转税务的非税收入2023
  • 企业向个人借款需要交印花税吗
  • 项目上发生伙食问题
  • 一般企业和行政事业单位的资产负债表是否一样
  • 以前的服务发票当期确认收入怎么做账
  • 会议费需要什么资料
  • 委任方名称代表的是什么意思?
  • 增值税多交可以在下一期直接抵吗
  • 劳务公司差额征收税率是多少
  • 应收账款一般按实际发生额入账
  • 农村合作社纳税零申报
  • 累积带薪缺勤怎么算
  • 外管证预缴增值税怎么抵扣
  • 佣金的规定方法有哪些
  • 承兑交单是什么的一种
  • 内置管理员无法打开此应用
  • PHP:imagepalettetotruecolor()的用法_GD库图像处理函数
  • 小规模与一般纳税人做账区别
  • 梅萨维德国家公园特点
  • 增值税专用发票丢了怎么补救
  • 企业残保金怎样申报
  • php使用什么开发工具
  • vue的内置组件
  • 【超用心整理】Markdown常用语法介绍,看这一个就够了
  • php登录流程
  • 企业的差旅费计入什么科目
  • 上个月未开票本月怎么算
  • 公司购进软件的账务处理
  • 坏账准备是什么性质的科目
  • 小规模纳税人成本含税吗
  • 电子税务局如何增加税种认定
  • 承兑汇票私人贴息双方都违法吗
  • 工资薪金的税务筹划
  • 建筑公司收到劳务发票会计分录
  • 休产假的工资扣个人所得税吗
  • 电脑入账如何做凭证
  • 领款单有法律效力吗
  • 普通发票记账联丢了怎么解决
  • 公司房产税如何避税
  • 收到损坏物品赔偿金如何入账
  • 电子汇票接收后怎么操作
  • 以前的房产证现在能过户吗
  • 企业签发转账支票
  • 什么是合法有效的继承证明
  • win7删除系统文件
  • 如何快速恢复么
  • 怎样恢复显示桌面图标
  • speedupmypc.exe - speedupmypc是什么进程
  • win101607升级1909
  • win7e盘不见了怎么恢复
  • unity如何合并物体
  • 判断一个点在三角形内部
  • jni静态注册和动态注册
  • linux更改
  • jquery mobile教程
  • unity怎么写接口
  • node 动态路由
  • unity3d图形学
  • 孙其功陪你学之——unity3d进程暂停
  • javascript的dom
  • python字符串的用法
  • jquery 触发点击
  • 酒店会场出租如何收费
  • 如何查询车辆购置税是否缴纳
  • 3000劳务报酬如何缴税
  • 网上缴费如何开票
  • 在电脑上怎样做word的文档
  • 代账公司盈利水平如何
  • 涠洲岛船票售完
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设