【js记录】递归进行深拷贝时对于Object遍历方法的思考【深浅拷贝+object县官属性介绍+类型判断方法+for...in+for...of】

news2024/11/17 5:57:07

一、 前言:本文使用的 类型判断方法介绍

通过手写instaceof更好理解其作用及使用

1、 typeof

  • 判断一个实例属于哪种类型
    在这里插入图片描述

2、 instance

  • 判断一个实例是否属于某种类型
    let person = function(){
    }
    let no = new person();
    no instanceof person;    // true
    

3、 原型链判断某实例是否在对象的原型链上

哥们,可以先好好了解一下原型链,上面网址里头有原型链的介绍

  • 学东西就像一个环,真正学明白的时候绝对是知识积累足够完整的时候

二、 借助深浅拷贝讲解object的相关属性

关于深浅拷贝的介绍
阮一峰ES6教程 对象扩展

简单介绍一下for…in和for…of,详细自己了解去吧,我以前没有博客介绍 ,就不往出贴了😂

  • of: 得到的是属性value
  • in: 得到的是属性key
    靠谱文章

2-1 Object.keys

自身非继承的可枚举属性

在这里插入图片描述

        let obj = {
            a: 1,
            b: 2,
            c: {
                c: 1,
                d: 2
            }
        }
    
        // 方法二
        function deepClone(obj) {
            let objClone = Array.isArray(obj) ? [] :  {}
            if(obj && typeof obj === 'object') {
            //    console.log(Object.keys(obj));
                for(key of Object.keys(obj)) {
                    if(obj[key] && typeof obj[key] === 'object') {
                        objClone[key] = deepClone(obj[key])
                    } else {
                        objClone[key] = obj[key]
                    }
                }
            }
            return objClone;
        }
        console.log(deepClone(obj)); 

2-2 for-in

自身和继承的可枚举属性(除Symbol)

奇怪,这也没遍历圆形脸上可枚举的属性呀??

  • log的还是自身属性呀???,🤔

在这里插入图片描述

        // 浅拷贝
        // Object.assign()
        let obj = {
            a: 1,
            b: 2,
            c: {
                c: 1,
                d: 2
            }
        }
    
        方法二
        function deepClone(obj) {
            let objClone = Array.isArray(obj) ? [] :  {}
            if(obj && typeof obj === 'object') {
                for(key in obj) {
                    if(obj.hasOwnProperty(key)) {
                        // 判断obj子元素是否为对象,如果是,递归复制
                        if(obj[key] && typeof obj[key] === "object") {
                                    objClone[key] = deepClone(obj[key])
                        } else {
                            objClone[key] = obj[key];
                        }
                    }
                }
            }
            return objClone;
        }
        console.log(deepClone(obj)); 


2-3 Object.getOwnPropertyNames()

自身所有属性键名(包括不可枚举、除Symbol)

在这里插入图片描述


        let obj = {
            a: 1,
            b: 2,
            c: {
                c: 1,
                d: 2
            }
        }
    
        // 方法二
        function deepClone(obj) {
            let objClone = Array.isArray(obj) ? [] :  {}
            if(obj && typeof obj === 'object') {
                 console.log(Object.getOwnPropertyNames(obj));
                for(key of Object.getOwnPropertyNames(obj)) {
                    if(obj[key] && typeof obj[key] === 'object') {
                        objClone[key] = deepClone(obj[key])
                    } else {
                        objClone[key] = obj[key]
                    }
                }
            }
            return objClone;
        }
        console.log(deepClone(obj)); 

2-4 Object.getOwnPropertySymbols()

自身的所有 Symbol 属性的键名

2-5 Reflect.ownKeys()

自身的所有键名

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

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

相关文章

IT分销商未来在哪里?南京创瑞丰向复合型产品方案商转型

在一个充满不确定性的市场中,思变求新是企业的唯一出路。 诚如IT分销领域,云计算、大数据、人工智能等技术的兴起,加速企业数字化转型的同时,亦对于传统IT分销市场的未来产生了深远影响。过去“搬箱子”、打价格战的方式方法正在…

Python中文件操作(读、写、关闭)

目录 一.什么是文件 二.python文件操作 1.open()打开函数 注意 mode常用的三种基础访问模式 2.读操作相关方法 read()方法: readlines()方法: readline()方法 for…

Linux性能学习(1.1):CPU_CPU缓存

文章目录1 简介2 工作机制3 Cache Line参考资料: 1. https://www.makeuseof.com/tag/what-is-cpu-cache/ 2. https://zhuanlan.zhihu.com/p/80672073 3.CPU Cache 机制以及 Cache miss 4.性能优化方法和技巧 在日常的嵌入式开发中,查看一些SOC的datashe…

想学习编程,该怎么开始,需要多长时间?

想学习编程,该怎么开始,需要多长时间? 其实学编程也没有啥特别的方法,和我们没基础学驾照差不多。 考A照、B照还是C照,我们先得拎清,它们的用途存在一定差异 。一样的,学编程是学C,Java、Pyth…

命令行在服务器的Oracle新建、修改用户并授权

1.前提解说 由于我是使用docker拉取的Oracle,这里截图的Oracle用户是原本安装好的Oracle用户。 2.步骤 1.Linux服务器切换到Oracle su oracle 2. 进入SQL sqlplus / as sysdba 3.新建用户(一定要加“;”) create user 用户名 identified by 密码; 若是修…

Tableau可视化设计案例-02Tableau数据处理、折线图

文章目录Tableau可视化设计案例02Tableau数据处理、折线图1.数据前处理2.绘制折线图2.1 创建电影数据变化折线图2.2创建电影票房变化折线图2.3 20215年的电影数量与票房比较分析Tableau可视化设计案例 本文是Tableau的案例,为B站视频的笔记,B站视频 参考…

Java集合/泛型面试题

✅作者简介:热爱国学的Java后端开发者,修心和技术同步精进。 🍎个人主页:Java Fans的博客 🍊个人信条:不迁怒,不贰过。小知识,大智慧。 💞当前专栏:Java面试题…

作为文科生,如何才能学好一门编程语言?

学习新知识的过程总是痛苦和逆人性的,古往今来皆是如此,否则也不会有十年寒窗苦读一说。 相信此刻看这篇文章的你,经历的寒窗绝对不止十年。 从小学开始算起到大学毕业,绝大多数人起码经历了16年(跳级的神童与学霸除…

5G无线技术基础自学系列 | 单站点验证测试

素材来源:《5G无线网络规划与优化》 一边学习一边整理内容,并与大家分享,侵权即删,谢谢支持! 附上汇总贴:5G无线技术基础自学系列 | 汇总_COCOgsta的博客-CSDN博客 单站点验证工作是通过测试来进行功能性…

二级MS Office真题第8套完整解析

全国计算机等级考试二级新增预测第一套 一、文字处理 公司将于今年举办“创新产品展示说明会”,市场部助理小王需要将会议邀请函制作完 成,并寄送给相关的客户。现在,请你按照如下需求,在Word.docx文档中完成制作工作:…

非零基础自学Golang 第11章 文件操作 11.1 目录基本操作 11.1.1 列目录

非零基础自学Golang 文章目录非零基础自学Golang第11章 文件操作11.1 目录基本操作11.1.1 列目录第11章 文件操作 计算机文件是以硬盘为载体的信息存储集合,文件可以是文本、图片、程序等。在编写程序时,我们经常会和文件打交道,比如从文件读…

推送github一直超时以及输入密码提示2021年8月以后密码不能用解决

最近推送github常常出现443端口超时,查询了很多办法最后用了如下方法解决 首先电脑设置里面搜索代理服务器设置,记住这个端口 用上面的地址和端口运行如下命令 git config --global http.proxy http://127.0.0.1:31181 git config --global https.pro…

小学生C++画图 Go C 编程 第8课 魔法计时器(魔法学院的奇幻之旅 Go C编程绘图)

Goc编程第一课 Goc编程第一课_哔哩哔哩_bilibili Goc编程第一课扩展加复习 Goc编程第一课扩展加复习_哔哩哔哩_bilibili Goc编程第二课 Goc编程第二课_哔哩哔哩_bilibili Goc编程第三课 Goc编程第三课_哔哩哔哩_bilibili Goc编程第四课 Goc编程第四课_哔哩哔哩_bilibili G…

JSCharting JavaScript 3.3.X 12/17/2022 Crack

JSCharting JavaScript 图表库 每个 JSCharting 许可证包括全套 150 多种高级图表类型以及交互式股票图表、无缝网格和日历支持、JavaScript 地图、甘特图、JavaScript 组织结构图和微型图表,企鹅Ω578867473。 画廊 在每台设备上满足每一种需求的图表类型! 包括条形…

【前端开发学习】6.MySQL

文章目录1 MySQL 指令1.1 数据库管理(文件夹)1.2 数据表管理(文件)1.3 数据行操作总结2 案例:员工管理2.1 创建表结构2.2 Python 操作 MySQL1. 创建数据2. 查询数据3. 删除4. 修改总结3 案例: Flask 前端 …

JVM类加载/双亲委派模型

类加载是一个复杂的过程, 那么我们平时说的类加载到底是干啥的呢? 一. 类加载是干啥的 我们都知道Java程序在运行之前, 需要进行编译, 由 .java > .class文件(二进制字节码文件) , 而在运行的时候呢, Java进程(JVM), 就会读取对应的 .class文件, 并且解析他的内容, 在内存…

MySQL --- 函数大全 8

目录 1.返回一个字符串在出现指定数量的分隔符之前的子字符串 SUBSTRING_INDEX() 2.减去时间 SUBTIME() 3.返回总和 SUM() 4.返回函数执行的时间 SYSDATE() 5.返回参数的切线 TAN() 6.提取表达式传递的时间部分 TIME() 7.格式…

ZY_BMP280大气压模块的使用和stm32程序

在搞设计时,用到了大气压模块BMP280,这玩意也不难,主要是淘宝店老板特别der一问三不知,真服了,而且资料里面没有给例程,只有51的例程,利用IIC通信,而且给的例程里面,乱七…

说说 fiber、DOM、ReactElement、实例对象之间的引用关系

大家好,我是前端西瓜哥。 本文探究 fiber、DOM、ReactElement、类组件实例之间的引用关系说明。 React 版本为 18.2.0 原生组件 fiber 原生组件 fiber,指的就是 type 为 “span”、“div” 的 fiber。 fiber.stateNode 指向真实 DOM 节点;n…