手写深拷贝的思想及代码

news/2024/7/11 1:43:43 标签: javascript, css, css3, jquery

接上文,为手写深拷贝,首先需要了解一些知识,首先如何判断数据类型,我们可能知道typeof可判断数据类型,但其实它只能区分基本类型,即:number、string、undefined、boolean、object。 而对于null、array、function、object来说,使用typeof都会统一返回object字符串。
要想区分对象{}、数组[]、函数function、单纯使用typeof是不行的。在JS中,可以通过Object.prototype.toString方法,判断某个对象之属于哪种内置类型。
分为null、string、boolean、number、undefined、array、function、object、date、math。
(作者:公子七
链接:https://www.jianshu.com/p/585926ae62cc
来源:简书)
当然你可以通过下面代码验证各种数据类型是否识别成功。

      console.log(Object.prototype.toString.call(null)); // "[object Null]"
      console.log(Object.prototype.toString.call(undefined)); // "[object Undefined]"
      console.log(Object.prototype.toString.call('abc')); // "[object String]"
      console.log(Object.prototype.toString.call(123)); // "[object Number]"
      console.log(Object.prototype.toString.call(true)); // "[object Boolean]"

深拷贝的思想主要是:
要判断当前拷贝是什么数据类型,来决定函数要返回什么样的数据类型。如果是对象,遍历对象的每一个属性,对每个属性进行克隆。
通过递归的思想来实现,如果确定是对象数据类型之后再判断里面是否还有引用类型的数据,若有则重复之前的步骤直到拷贝对象为基本数据类型。
1、判断数据类型的函数

function cloneType(target){
	return Object.prototype.toString.call(target).slice(8,-1);

2、深拷贝

function cloneDeep(target) {
        let result;
        if (cloneType(target) === 'Object') {
          result = {};
        } else if (cloneType(target) === 'Array') {
          result = [];
        } else {
          result = target;
        }
        for (let i in target) {
          let item = target[i];
          if (cloneType(item) === 'Object' || cloneType(item) === 'Array') {
            result[i] = cloneDeep(item);
          } else {
            result[i] = item;
          }
        }
        return result;
      }

检测深拷贝是否生效

oldObj = {
        name: 'zhangsan',
        age: 13,

        option: {
          sex: 'man',

          fav: 'football',
        },
      };
      let newObj = cloneDeep(oldObj);
      console.log(newObj);
      console.log('-------------------');
      newObj.option = {
        sex: 'women',
        fav: 'basketball',
      };
      console.log(oldObj);

只需要检测拷贝后,改变新数组中俄引用类型,旧数组是否跟着改变,如果不改变则深拷贝成功!
在这里插入图片描述


http://www.niftyadmin.cn/n/1263247.html

相关文章

asp.net DotNetTextBox编辑器使用中的常见问题FAQ

Q:控件能不能输出符合XHTML1.0规范的网页代码? A:商业版支持,商业版提供一个xhtml属性,只要将属性设置为xhtmltrue就可以让控件在输出内容的时候自动将所有代码转换为符合XHTML1.0格式的网页代码。 Q:为什么会出现使用主题 css 文件要求页上有标头控件。(例如 <head runat&…

git将maste拉取过来合并

一般master上有其他人上传的代码&#xff0c;为避免冲突&#xff0c;需要将master拉取过来&#xff0c;在你的分支上合并。 步骤&#xff1a; 1、git checkout master --------首先切到master上 2、git pull----------拉取最新代码 3、git commit -m 合并‘ 4、git checkout da…

提升C#和Visual Studio生产率的10个提示【转自www.bitsCN.com】

学习快捷键 网管u家www.bitscn.net 明显而又简单&#xff0c;但是节省时间&#xff0c;尤其是对于那些你每天都要执行上百次的操作&#xff0c;例如构建和调试。下面是一些每个Visual Studio都应该知道的一些基本的快捷键&#xff1a; 中国网管联盟bitsCN.com 构建: CTRL S…

this指向问题详解及显式改变this指向

this在前端开发中可以说是最常见的概念了&#xff0c;它其实也不难&#xff0c;但经常有人问起我this&#xff0c;我却不知从何说起&#xff0c;直到旁边的老哥跟我手敲代码解释起来&#xff0c;我终于对它的理解更加深刻了&#xff0c;下面想总结一下。 1、this的默认绑定场景…

Flv视频编辑软件FlvEditor

主要把FlvJoiner和FlvSplitter的功能整合在了一起&#xff0c;用起来更加方便了。点击下载 特点&#xff1a;可以很方便地对Flv视频进行分割、合并操作。没有画质损耗&#xff0c;速度也非常的快。 使用方式及注意事项和FlvSplitter相同&#xff0c;如果不能使用&#xff0c;请…

项目中遇到的原型解惑

原型链这个之前面试经常问&#xff0c;可我只知道概念&#xff0c;后来在公司做了项目后感觉对这个概念又深刻了一些&#xff0c;以此记录一下。对于创建对象&#xff0c;可能比较熟悉的是构造函数&#xff0c;通过new实例化创建不同的对象&#xff0c;可它有个缺点就是每个实例…

.NET中的文件监视类

<转> <发布地址>192.168.0.198</发布地址> 最近做的一个项目&#xff0c;涉及到对某个目录的操作的监视&#xff0c;其实在.NET中&#xff0c;使用.NET中的文件监视类&#xff0c;就可以轻松实现对某个目录&#xff0c;以及其子目录的文件监视。比如新建文件…

帅辉数据结构讲的怎么样_一个基于运气的数据结构,你猜是啥?

排行榜懂行的老哥一看这个小标题&#xff0c;就知道我要以排行榜作为切入点&#xff0c;去讲 Redis 的 zset 了。是的&#xff0c;经典面试题&#xff0c;请实现一个排行榜&#xff0c;大部分情况下就是在考验你知不知道 Redis 的 zset 结构&#xff0c;和其对应的操作。当然了…