位置: 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指定)

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

  • iqoo8pro怎么取消录制王者荣耀时的弹窗(iQOO8Pro怎么取消按键震动)

    iqoo8pro怎么取消录制王者荣耀时的弹窗(iQOO8Pro怎么取消按键震动)

  • win11怎么隐藏桌面图标(win11怎么隐藏桌面应用图标)

    win11怎么隐藏桌面图标(win11怎么隐藏桌面应用图标)

  • 抖音动态壁纸如何设置(抖音动态壁纸如何设置成锁屏)

    抖音动态壁纸如何设置(抖音动态壁纸如何设置成锁屏)

  • 苹果xr手机相册权限怎么开启(苹果xr手机相册删除了怎么在备份里找回)

    苹果xr手机相册权限怎么开启(苹果xr手机相册删除了怎么在备份里找回)

  • 手机密码忘记了怎么解(手机密码忘记了怎么刷机)

    手机密码忘记了怎么解(手机密码忘记了怎么刷机)

  • 什么样的万能钥匙能打开所有的网(什么样的万能钥匙能破解密码)

    什么样的万能钥匙能打开所有的网(什么样的万能钥匙能破解密码)

  • 抖音注销不了怎么回事(抖音注销不了怎么回事儿)

    抖音注销不了怎么回事(抖音注销不了怎么回事儿)

  • 苹果11屏坏了只能用原装吗(iphone11屏坏了)

    苹果11屏坏了只能用原装吗(iphone11屏坏了)

  • csv数据包是什么意思(csv数据文件下载)

    csv数据包是什么意思(csv数据文件下载)

  • powerpoint主要用途是什么(powerpoint主要用于制作什么的软件)

    powerpoint主要用途是什么(powerpoint主要用于制作什么的软件)

  • 开热点看电视耗流量吗(开热点看电视耗流量大吗)

    开热点看电视耗流量吗(开热点看电视耗流量大吗)

  • 微信连麦静音对方会听到吗(微信连麦静音对方会看见吗)

    微信连麦静音对方会听到吗(微信连麦静音对方会看见吗)

  • 微信滴滴是自动付款吗(微信滴滴是自动接单吗)

    微信滴滴是自动付款吗(微信滴滴是自动接单吗)

  • 抖音怎么只允许一个人看(抖音怎么只允许关注的人评论)

    抖音怎么只允许一个人看(抖音怎么只允许关注的人评论)

  • ipad怎么输入中文(ipad输入法怎么输入中文)

    ipad怎么输入中文(ipad输入法怎么输入中文)

  • 电脑开始菜单取消隐藏(电脑开始菜单里)

    电脑开始菜单取消隐藏(电脑开始菜单里)

  • data是啥意思(DATA是啥意思)

    data是啥意思(DATA是啥意思)

  • 显卡插在主板什么位置(显卡插在主板什么位置好)

    显卡插在主板什么位置(显卡插在主板什么位置好)

  • 微信图片怎么打印a4(微信图片怎么打印?)

    微信图片怎么打印a4(微信图片怎么打印?)

  • 如何修改实名认证(如何修改实名认证?)

    如何修改实名认证(如何修改实名认证?)

  • 应用磁贴是什么意思(什么是电脑应用磁贴)

    应用磁贴是什么意思(什么是电脑应用磁贴)

  • 三星S7死机怎么办(三星s7手机死机解决方法)

    三星S7死机怎么办(三星s7手机死机解决方法)

  • 芒果tv咋取消手机绑定(芒果tv怎么关闭绑定手机号)

    芒果tv咋取消手机绑定(芒果tv怎么关闭绑定手机号)

  • 小米应用商店无法联网(小米应用商店无法升级软件)

    小米应用商店无法联网(小米应用商店无法升级软件)

  • 情人节海报怎么设计(情人节海报怎么画简单)

    情人节海报怎么设计(情人节海报怎么画简单)

  • 矿产资源补偿费计入管理费用吗
  • 如何理解增值税中性特点
  • 小规模纳税人应交增值税明细科目
  • 发票没有纳税人识别号怎么重开
  • 受托加工开票如何选名称
  • 怎么导出银行对账单流水
  • 个税抵扣未及时填报
  • 超定额废品损失会计分录
  • 当月没有发生购销合同还要报印花税吗
  • 一般纳税人初次购入税控系统的分录怎么做
  • 小额贷款业务涉及哪些法律
  • 工会经费如何做会计分录科目
  • 本季度盈利可以当季弥补以前亏损吗
  • 预收电费结转成本怎么办
  • 研发加计扣除税率
  • 购进货物的价税怎么算
  • 什么时候计提资本成本
  • 跨省非独立核算分公司如何报税
  • 购物发票的税是由谁承担
  • 扩大税收来源什么意思
  • 钻井采用的主要设备
  • 研发支出的台账由谁做
  • 单位撤销无力支付怎么办
  • 中国的农业成本为什么高
  • 中介公司收取中介费过高违法吗
  • 税率抵扣计算公式
  • 有限公司注册资金多少好
  • 预付账款坏账处理流程
  • 小企业会计准则没有以前年度损益调整科目
  • 按产量和单价计算工业总产值
  • php7.3
  • php使用redis缓存技术
  • 发行债券会计分录怎么写
  • dmc32.dll
  • 出租设备的租金收入应计入什么科目
  • 外汇业务的核算ppt
  • 普利特维采湖群国家公园天气
  • 认缴没有实缴怎么做账
  • 先发货再开票
  • 使用二氧化碳灭火器时人应该站在什么位置
  • php比较大小的函数
  • 小微企业普惠性税收减免政策2022
  • 材料报废及处置方案
  • 冲掉应收账款
  • 收费公路通行费补费平台
  • 帝国cms怎么用
  • 公司必须要申报工资流水吗
  • 织梦生成出现500
  • 公司有残疾人如何申报残保金
  • excel内账报表
  • 小规模纳税人购买原材料会计分录
  • 出售其他债权投资产生的收益为什么计入留存收益
  • 管理费用如何冲减
  • 应收账款管理制度
  • 支付商业承兑汇票怎么做
  • 企业里面不征税的有哪些
  • 纳税申报利润总额计算公式
  • 收到投资款怎么做凭证
  • mysql中文乱码解决的命令
  • 数据库时区与url连接设置的时区
  • centos环境搭建
  • 电脑删除ie后怎么恢复
  • 苹果系统数据怎么清掉
  • 丢失msvcr80.dll
  • Win7系统如何清理本地硬盘
  • win8电脑d盘不见了怎么恢复
  • win7系统怎么修改开机密码
  • linux Intel 845集成显示驱动下载
  • linux安装glibc.i686
  • BootStrap glyphicons 字体图标实现方法
  • 微信小程序模板框架
  • Node.js中的全局变量有哪些
  • 批处理列出文件名
  • jquery插件开发方法
  • python 脚本
  • 民间非营利组织包括哪些单位
  • 上海市国家税务局官网网站
  • 电子专票红字信息表
  • 研发费用加计扣除2022政策
  • 广东税务社保缴费查询
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设