热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

理解并手写深拷贝函数

letobj1{name:dog,array:[1,2,3],son:{name:dogSon}}obj2obj1;obj2.namecat;obj

let obj1 = {    
  name:
'dog',
  array: [
1, 2, 3],
  son: {
    name:
'dogSon'
  }
}
obj2
= obj1;
obj2.name
= 'cat';
obj2.son.name
= 'catSon';
console.log(obj1.name);    
//cat
console.log(obj1.son.name);  //catSon
console.log(obj2.name);     //cat
console.log(obj2.son.name);  //catSon

相信大家都明白,因为对象的浅拷贝,修改obj2属性后,两个对象的值同时都被修改了。

不理解的小伙伴可以看下我之前写的 '从数据类型上理解深浅拷贝'。

除了调用已有方法,我们该如何手写自己的深拷贝呢?

我们的函数方法起名为cloneDeep,而拷贝肯定返回了一个新的对象newObj。

function cloneDeep(obj){
return newObj;
}

首先要判定拷贝是否是一个对象,如果不是还看它干嘛!直接return结束!

function cloneDeep(obj) {
 
// 判断要拷贝的是否为对象
  if (!obj instanceof Object) {
    
return;
  }
  
return newObj;
}

对要拷贝的对象进行判断,对返回的newObj设定数据类型。

function cloneDeep(obj) {
  
if (!obj instanceof Object) {
    
return;
  }
  
// 判断这个对象是否为数组
  let newObj = obj instanceof Array ? [] : {};
  
return newObj;
}

把对象进行遍历,然后开始进行拷贝。

function cloneDeep(obj) {
  if (!obj instanceof Object) {
    return;
  }
  let newObj
= obj instanceof Array ? [] : {};
  // 通过for...in遍历对象
  for (let key in obj) {
    newObj[key]
= obj[key];
  }
  return newObj;
}

如果此时执行代码进行验证,我们会发现,目前完成的仅仅是第一层对象的拷贝。

console.log(obj1.name);     //dog
console.log(obj1.son.name);  //catSon
console.log(obj2.name);     //cat
console.log(obj2.son.name);  //catSon

因此可以先判断拷贝的属性是否还是一个对象,进行深层次的递归。

function cloneDeep(obj) {
  
if (!obj instanceof Object) {
    
return;
  }
  let newObj
= obj instanceof Array ? [] : {};
  
for (let key in obj) {
    
// 如果对象的属性还是对象,就进行递归处理
    newObj[key] = obj[key] instanceof Object ? cloneDeep(obj[key]) : obj[key];
  }
  
return newObj;
}

这样我们的深拷贝就基本功能就完成了,不过缺点就是for in连带对象原型上的属性一起遍历了。

function cloneDeep(obj) {
  
if (!obj instanceof Object) {
    
return;
  }
  let newObj
= obj instanceof Array ? [] : {};
  
for (let key in obj) {
    
// 使用 .hasOwnProperty()判断一个对象是否包含自定义属性而不是原型链上的属性
    if (obj.hasOwnProperty(key)) {
      newObj[key]
= obj[key] instanceof Object ? cloneDeep(obj[key]) : obj[key];
    }
  }
  
return newObj;
}

最后来验证是否达到深拷贝的功能要求。

function cloneDeep(obj) {
  
if (!obj instanceof Object) {
    
return;
  }
  let newObj
= obj instanceof Array ? [] : {};
  
for (let key in obj) {
    
if (obj.hasOwnProperty(key)) {
      newObj[key]
= obj[key] instanceof Object ? cloneDeep(obj[key]) : obj[key];
    }
  }
  
return newObj;
}
let obj1
= {    
  name:
'dog',
  array: [
1, 2, 3],
  son: {
    name:
'dogSon'
  }
}
obj2
= obj1;
obj2.name
= 'cat';
obj2.son.name
= 'catSon';
console.log(obj1.name);    
//dog
console.log(obj1.son.name);  //dogSon
console.log(obj2.name);     //cat
console.log(obj2.son.name);  //catSon

 

本文来自博客园,作者:辉太狼`,转载请注明原文链接:https://www.cnblogs.com/HuiTaiLang1216/p/15981784.html



推荐阅读
  • JavaScript 中创建对象的多种方法
    本文详细介绍了 JavaScript 中创建对象的几种常见方式,包括对象字面量、构造函数和 Object.create 方法,并提供了示例代码和属性描述符的解释。 ... [详细]
  • 本文介绍了如何在 Node.js 中使用 `setDefaultEncoding` 方法为可写流设置默认编码,并提供了详细的语法说明和示例代码。 ... [详细]
  • PHP 过滤器详解
    本文深入探讨了 PHP 中的过滤器机制,包括常见的 $_SERVER 变量、filter_has_var() 函数、filter_id() 函数、filter_input() 函数及其数组形式、filter_list() 函数以及 filter_var() 和其数组形式。同时,详细介绍了各种过滤器的用途和用法。 ... [详细]
  • 本文详细探讨了HTML表单中GET和POST请求的区别,包括它们的工作原理、数据传输方式、安全性及适用场景。同时,通过实例展示了如何在Servlet中处理这两种请求。 ... [详细]
  • 算法题解析:最短无序连续子数组
    本题探讨如何通过单调栈的方法,找到一个数组中最短的需要排序的连续子数组。通过正向和反向遍历,分别使用单调递增栈和单调递减栈来确定边界索引,从而定位出最小的无序子数组。 ... [详细]
  • 在项目部署后,Node.js 进程可能会遇到不可预见的错误并崩溃。为了及时通知开发人员进行问题排查,我们可以利用 nodemailer 插件来发送邮件提醒。本文将详细介绍如何配置和使用 nodemailer 实现这一功能。 ... [详细]
  • 12月16日JavaScript变量、函数、流程、循环等***线上九期班
    12月16日JavaScript变量、函数、流程、循环等***线上九期班 ... [详细]
  • Symfony是一个功能强大的PHP框架,以其依赖注入(DI)特性著称。许多流行的PHP框架如Drupal和Laravel的核心组件都基于Symfony构建。本文将详细介绍Symfony的安装方法及其基本使用。 ... [详细]
  • 本文将继续探讨前端开发中常见的算法问题,重点介绍如何将多维数组转换为一维数组以及验证字符串中的括号是否成对出现。通过多种实现方法的解析,帮助开发者更好地理解和掌握这些技巧。 ... [详细]
  • JavaScript 中创建对象的多种方式
    本文介绍了 JavaScript 中创建对象的几种常见方法,包括字面量形式、构造函数、原型对象等。每种方法都有其特点和适用场景,通过对比分析,帮助开发者选择最适合的方式。 ... [详细]
  • 本文探讨了使用C#在SQL Server和Access数据库中批量插入多条数据的性能差异。通过具体代码示例,详细分析了两种数据库的执行效率,并提供了优化建议。 ... [详细]
  • 实用正则表达式有哪些
    小编给大家分享一下实用正则表达式有哪些,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下 ... [详细]
  • 本文介绍了如何使用JavaScript的Fetch API与Express服务器进行交互,涵盖了GET、POST、PUT和DELETE请求的实现,并展示了如何处理JSON响应。 ... [详细]
  • 深入理解Vue.js:从入门到精通
    本文详细介绍了Vue.js的基础知识、安装方法、核心概念及实战案例,帮助开发者全面掌握这一流行的前端框架。 ... [详细]
  • 本文探讨了如何利用HTML5和JavaScript在浏览器中进行本地文件的读取和写入操作,并介绍了获取本地文件路径的方法。HTML5提供了一系列API,使得这些操作变得更加简便和安全。 ... [详细]
author-avatar
手机用户2502854043
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有