web前端面试-- js深拷贝的一些bug,特殊对象属性(RegExp,Date,Error,Symbol,Function)处理,循环引用weekmap处理

本人是一个web前端开发工程师,主要是vue框架,整理了一些面试题,今后也会一直更新,有好题目的同学欢迎评论区分享 ;-)

web面试题专栏:点击此处


文章目录

  • 深拷贝和浅拷贝的区别
    • 浅拷贝示例
    • 深拷贝示例
  • 特殊对象属性
    • obj对象
    • JSON转换对象
      • obj与JSON转换对象对比
    • 手写深拷贝
      • 封装好deepCopy
      • obj与deepCopy转换对象对比

深拷贝和浅拷贝的区别

在JavaScript中,深拷贝和浅拷贝是两种不同的对象复制方式。

浅拷贝是指将一个对象的引用复制给另一个对象,这意味着两个对象将共享相同的内存地址。当修改其中一个对象时,另一个对象也会受到影响。

深拷贝是指创建一个新的对象,并将原始对象的所有属性逐个复制到新对象中。这意味着两个对象是完全独立的,修改其中一个对象不会影响另一个对象。

浅拷贝示例

let obj1 = { name: "Alice", age: 25 };
let obj2 = obj1; // 浅拷贝obj2.name = "Bob";console.log(obj1.name); // 输出: Bob,因为obj1和obj2共享相同的引用

深拷贝示例

let obj1 = { name: "Alice", age: 25 };
let obj2 = JSON.parse(JSON.stringify(obj1)); // 深拷贝obj2.name = "Bob";console.log(obj1.name); // 输出: Alice,因为obj1和obj2是完全独立的对象

在上面的深拷贝示例中,我们使用 JSON.stringify() 将原始对象转换为字符串,然后使用 JSON.parse() 将字符串转换回对象。这样做可以创建一个新的对象,并将原始对象的属性逐个复制到新对象中,从而实现深拷贝。

需要注意的是,深拷贝有时可能会有性能和内存消耗的问题,尤其是对于包含循环引用或大量嵌套对象的复杂对象。因此,在选择深拷贝或浅拷贝时,需要根据具体情况进行权衡。


特殊对象属性

  • RegExp:不能拷贝
  • Date:时间对象会转换成字符串
  • Error:错误对象会转换成{}
  • Symbol:不能拷贝
  • Function:不能拷贝

测试对象如下:

var obj = {name: "penk",age: 30,boo: true,n: null,un: undefined,sy: Symbol("penk value"),// big: 10n, // 浏览器没这个,nodejs可以child: {name: "penk son",},arr: [1, 2, 3, 4],reg: /^\d+$/,fn: function () {console.log(this.name);},time: new Date(),err: new Error("蛋疼"),
};
JSON.parse(JSON.stringify(obj));

obj对象

在这里插入图片描述

JSON转换对象

虽说是深拷贝,但是有些属性不行。

在这里插入图片描述

obj与JSON转换对象对比

在这里插入图片描述

手写深拷贝

封装好deepCopy

  1. 处理了特殊对象属性的拷贝
  2. 对于循环引用,进行了(WeekMap)去重处理。
// 深拷贝函数
// 避免对象中存在重复应用的优化方案
// 通过set集合的方式,obj不同才会进行操作
function deepCopy(obj, treated = new WeakMap()) {// null 也是一个对象...// 不是对象就返回,数组也是对象~if (obj == null || typeof obj !== "object") return obj;// 对象的类型// console.log =>  '[object Object]'  '[object Array]'let string = Object.prototype.toString.call(obj);// 对象的构造函数let ctor = obj.constructor;// 如果有这个obj这个键名,则直接返回键值if (treated.has(obj)) return treated.get(obj);let newObj = {};// 是个复合数据类型,放的是地址treated.set(obj, newObj);if (string.includes("Object")) {// for of 不能遍历普通对象,只能遍历iterator 对象for (let i in obj) {newObj[i] = deepCopy(obj[i], treated);}return newObj;} else if (string.includes("Array")) {// 是数组for (let i = 0; i < obj.length; i++) {newObj[i] = deepCopy(obj[i], treated);}} else if (string.includes("RegExp")) {// 是正则对象newObj = new ctor(obj);} else if (string.includes("Date")) {// 是日期对象newObj = new ctor(obj);} else if (string.includes("Error")) {// 是Error对象newObj = new ctor(obj.message);} else if (string.includes("Symbol")) {// 是Symbol对象newObj = new ctor(obj.description);} else if (string.includes("Function")) {// 是方法newObj = function (...arg) {target.call(this, ...arg);};}return newObj;
}

打印如下:

在这里插入图片描述

obj与deepCopy转换对象对比

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/101698.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ODrive移植keil(五)—— 开环控制和电流变换

目录 一、开环控制1.1、控制原理1.2、硬件接线1.3、代码说明1.4、程序演示1.5、程序架构的体现 二、电流变换2.1、理论说明2.2、代码说明 ODrive、VESC和SimpleFOC 教程链接汇总&#xff1a;请点击 一、开环控制 在SimpleFOC系列中有开环控制的教程&#xff0c;SimpleFOC移植S…

linux修改docker容器时间

1.查看宿主机系统时间 date -R 2.进入docker容器查看时间 docker exec -it -u root 容器id /bin/bash cat /etc/timezone &#xff08;容器内部系统时区显示Etc/UTC即会造成时间错误&#xff09; 3.创建容器时间 echo Asia/Shanghai >/etc/timezone 4.退出容器 exit 5.复…

【C进阶】内存函数

strcpy拷贝的仅仅是字符串&#xff0c;但是内存中的数据不仅仅是字符&#xff0c;所以就有了memcpy函数 1. memcpy void *memcpy &#xff08;void * destination &#xff0c;const void * source , size_t num) 函数memcpy从source的位置开始向后拷贝num个字节的数据到desti…

基于nodejs+vue驾校预约管理系统

通过科技手段提高自身的优势&#xff1b;对于驾校预约管理系统当然也不能排除在外&#xff0c;随着网络技术的不断成熟&#xff0c;带动了驾校预约管理系统&#xff0c; 随着科学技术的飞速发展&#xff0c;各行各业都在努力与现代先进技术接轨&#xff0c;驾校预约管理系统&am…

1.go web之gin框架

Gin框架 一、准备 1.下载依赖 go get -u github.com/gin-gonic/gin2.引入依赖 import "github.com/gin-gonic/gin"3. &#xff08;可选&#xff09;如果使用诸如 http.StatusOK 之类的常量&#xff0c;则需要引入 net/http 包 import "net/http"二、基…

python之K线模式识别

1、晨星 晨星也称作早晨之星&#xff0c;它是一种三日形态的K线组合&#xff0c;第一日是阴线&#xff0c;第二日价格振幅较小&#xff0c;第三日出现阳线&#xff0c;它的一般形态如下图所示。晨星的K线组合形态一般出现在下跌的趋势之后&#xff0c;预示着价格的上升回调。其…

matlab 2ask 4ask 信号调制

1 matlab 2ask close all clear all clcL =1000;Rb=2822400;%码元速率 Fs =Rb*8; Fc=Rb*30;%载波频率 Ld =L*Fs/Rb;%产生载波信号 t =0:1/Fs:L/Rb;carrier&

Java架构师缓存架构设计

目录 1 导学2 高性能概述2.1 高性能的定义和衡量指标2.2 如何实现高性能的计算机系统或软件程序2.3 木桶理论2.4 如何实现计算机系统或软件程序的高性能3 多级缓存设计3.1 浏览器缓存3.2 CDN缓存3.3 负载均衡的缓存3.4 进程内缓存3.5 分布式缓存4 缓存技术方案5 如何进行缓存拆…

C++学习day5

目录 作业&#xff1a; 1> 思维导图 2> 多继承代码实现沙发床 1>思维导图 2> 多继承代码实现沙发床 #include <iostream>using namespace std; //创建沙发类 class sofa { private:string sitting; public:sofa(){cout << "sofa的无参构造函数…

luffy项目之后台项目搭建、目录调整、封装日志、全局异常、Response、数据库连接

luffy后台项目创建 在虚拟环境中创建luffy项目安装django&#xff1a;pip install django3.1.12命令创建项目django-admin startproject luffy_api也可以pycharm创建项目&#xff0c;创建项目时选则已经创建好的虚拟环境即可 luffy项目目录调整 """ ├── …

Docker系列--网络的配置

原文网址&#xff1a;Docker系列--网络的配置_IT利刃出鞘的博客-CSDN博客 简介 说明 本文介绍Docker的网络的配置。 官网网址 https://docs.docker.com/engine/reference/commandline/network/ 网络的默认设置 Docker启动之后&#xff0c;系统中会产生一个名为docker0的…

如何调整 Kubernetes StatefulSet 卷的大小

Kubernetes StatefulSet用于在集群内部署有状态应用程序。StatefulSet 中的每个 Pod 都可以访问即使在重新调度后仍坚持使用的本地持久卷。这使得 Pod 能够维护与其集合中的邻居不同的单独状态。 不幸的是,这些卷有一个很大的限制:Kubernetes 没有提供从 StatefulSet 对象调整…

【AI】Interesting Applications

文章目录 【盘古】【嗜睡检测】【3D AI 生成】多模态——指哪打哪【AlphaDev&#xff1a;汇编版 AlphaZero】【ChatExcel】 【盘古】 2023年7月&#xff0c;华为正式发布盘古大模型3.0&#xff0c;并提出3层模型架构。 L0&#xff1a;基础大模型&#xff0c;包括自然语言、视觉…

塑胶材料检测对激光焊机的作用

塑胶材料的激光焊接已经普遍用于各种零配件&#xff0c;而塑料的透光率是焊接工艺质量的一个重要指标。针对这类塑胶材料推出这款专门检测塑胶材料近红外透光率特性的透光率检测仪&#xff0c;对注塑件的透光率进行全画面扫描。 全球工业致力于贯彻绿色环保、节能减排发展理念&…

Selenium+Pytest自动化测试框架

前言 selenium自动化 pytest测试框架 本章你需要 一定的python基础——至少明白类与对象&#xff0c;封装继承 一定的selenium基础——本篇不讲selenium&#xff0c;不会的可以自己去看selenium中文翻译网 测试框架简介 测试框架有什么优点呢&#xff1a; 代码复用率高&…

CocosCreator 面试题(八)Cocos Creator 中如何做资源管理

在 Cocos Creator 中&#xff0c;可以采取以下方法来进行良好的资源管理&#xff1a; 加载远程资源 使用 Cocos Creator 提供的 cc.assetManager.loadRemote 方法加载远程服务器上的资源。 cc.assetManager.loadRemote(http://example.com/images/image.png, (err, texture) &g…

Shell 脚本面试指南

包含 20 多个中级到高级 Linux shell 脚本面试问题的主题&#xff0c;并附有示例和答案&#xff1a; 1、问题&#xff1a;shell 脚本开头的 “#!” 的用途是什么&#xff1f;举个例子。 答案&#xff1a;是shebang 指定脚本的解释器。 示例&#xff1a;#!/bin/bash 表示脚本正…

16+sci,多重免疫组织化学+CIBERSORTx 鉴定成纤维细胞亚群。

今天给同学们分享一篇单细胞多重免疫组织化学数字细胞学&#xff08;CIBERSORTx&#xff09;的生信文章“Single-cell analysis reveals prognostic fibroblast subpopulations linked to molecular and immunological subtypes of lung cancer”&#xff0c;这篇文章于2023年1…

springboot就业信息管理系统springboot32

大家好✌&#xff01;我是CZ淡陌。一名专注以理论为基础实战为主的技术博主&#xff0c;将再这里为大家分享优质的实战项目&#xff0c;本人在Java毕业设计领域有多年的经验&#xff0c;陆续会更新更多优质的Java实战项目&#xff0c;希望你能有所收获&#xff0c;少走一些弯路…

nodejs+vue宠物店管理系统

例如&#xff1a;如何在工作琐碎,记录繁多的情况下将宠物店管理的当前情况反应给管理员决策,等等。在此情况下开发一款宠物店管理系统小程序&#xff0c; 困扰管理层的许多问题当中,宠物店管理也是不敢忽视的一块。但是管理好宠物店又面临很多麻烦需要解决,于是乎变得非常合乎时…