JS 手写 深拷贝

已于 2022-09-10 18:25:29 修改
阅读量252 收藏
点赞数
分类专栏： 代码 文章标签： js json javascript ecmascript 前端
于 2021-02-28 21:12:12 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47021982/article/details/114240067
版权
本文探讨如何在JavaScript中手写实现深拷贝的方法，详细解释其原理和步骤，以帮助理解对象复制的深层机制。
摘要由CSDN通过智能技术生成

JS 手写 深拷贝

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
    <script>
      var obj1 = {
        name: 'laowang',
        age: 18,
        do: function () {
          console.log('study')
        },
        hobby: ['唱', '跳', 'rap', [1, 2, 3]],
      }

      function checkType(obj) {
        return Object.prototype.toString.call(obj).slice(8, -1).toLowerCase()
      }

      // 深拷贝函数
      function deepClone(obj) {
        // 刚进入函数需要判断 当前要拷贝的值是什么类型
        if (checkType(obj) === 'object') {
          // 如果当前拷贝的是一个对象，则需要定一个新的对象
          var newObj = {}
        } else if (checkType(obj) === 'array') {
          // 如果当前拷贝的是一个数组，则需要定一个新的数组
          var newObj = []
        } else {
          // 如果当前拷贝的值既不是数组也不是对象，则直接返回即可
          return obj
        }

        // 开始拷贝
        // ["唱", "跳", "rap", [1, 2, 3]]

        for (var key in obj) {
          // 在拷贝之前 需要判断当前的obj[key]是一个对象还是数组，如果是对象或数组，则需要重新拷贝 再赋值
          newObj[key] = deepClone(obj[key])
        }

        return newObj
      }

      var obj2 = deepClone(obj1)
      console.log(obj1) // {name: 'laowang', age: 18, hobby: Array(4), do: ƒ}
      console.log(obj2) // {name: 'laowang', age: 18, hobby: Array(4), do: ƒ}
      console.log(obj2 === obj1) // false
      console.log(obj2.hobby === obj1.hobby) // false
      console.log(obj2.hobby[3] === obj1.hobby[3]) // false
    </script>
  </body>
</html>
木森林哥哥
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS 手写深拷贝
weixin_43736435的博客
05-02 278
var oldObj = { name: '范德彪', age: '43', designation: ['水库浪子','彪记靓汤总经理','彪哥解梦馆'], relationship: { jiefu: '马大帅', girl: '桂英', } } function deepClone(obj) { if(typeof obj !== 'object' || obj == null){ return obj; } let result = unde
javascript深拷贝、浅拷贝和循环引用深入理解
10-18
JavaScript中的深拷贝和浅拷贝是编程中常见的概念，主要涉及到对象和数组的复制。在JavaScript中，数据类型分为基本数据类型（如Number、String、Boolean等）和引用数据类型（如Object、Array等）。基本类型直接存储...
js手写深拷贝
yuanqi3131的博客
12-12 3845
JS手写深拷贝 深拷贝：假设我有一个对象A，我赋值给B，无论怎么改变B，A都不会发生任何的改变，即为深拷贝 浅拷贝：假设我有一个对象A，我赋值给B，改变一下B，A就会跟着改变，A，B对象的地址指向一个地方，只是简单的赋值，即为浅拷贝。 网上有很多说数组的slice、concat方法对数组使用，或者对象使用Object.assign()和ES6的扩展运算符(…)可以实现深拷贝，这是不对的，以上的方法只能对一层的对象有用，多层嵌套的是不起作用的，什么是多层嵌套，下面是两层，obj对象属性name也是一个对象，还
手写JS—深拷贝
Florenza的博客
12-08 2294
一个引用对象一般来说由两个部分组成：一个具名的Handle，也就是我们所说的声明（如变量）和一个内部（不具名）的对象，也就是具名Handle的内部对象。它在Manged Heap（托管堆）中分配，一般由新增引用对象的New方法是进行创建。深拷贝是指源对象与拷贝对象互相独立，其中任何一个对象的改动都不会对另外一个对象造成影响。比较典型的就是Value（值）对象，如预定义类型Int32，Double，以及结构（struct），枚举（Enum）等。一般简单来说我们都会这么写但是 会有循环引用的问题。
(JS)手写深拷贝
u014572617的博客
08-02 428
JS手写深拷贝 const obj1 = { age: 20, name: "xxx", address: { city: "earth" } }; /** * * @param obj {Object} */ function deepClone(obj = {}) { if (typeof obj !== "object" || obj == null) { return obj; } let result; if (obj instanceof Array) { r
JavaScript 深拷贝 递归 手写
01-08
今天的学习笔记写在了自己的网页笔记本上，没有记录到博客，但是学到一个有关深拷贝的实现方法，为加深印象，这里给大家分享一下： 深拷贝：就是拷贝到最底层的属性。 function deepCopy(object){ //这里传入一个...
深拷贝.js(考虑最全的深拷贝函数)
06-27
js考虑最完善的深拷贝函数,可以深拷贝引用对象和基本对象
js中的深拷贝和浅拷贝总结
01-08
2、深拷贝 二、实现方式 1、浅拷贝的实现方式 1.1 Object.assign(target,source)方法 1.2 Array.prototype.concat()方法 1.3 Array.prototype.slice(start,end)方法 2、深拷贝的实现方式 2.1 JSON.parse(JSON....
30_手写防抖节流-深拷贝-事件总线1
08-04
"手写防抖节流函数" 防抖和节流是前端开发中两个非常重要的概念，它们可以帮助我们解决频繁的事件处理问题，提高系统的性能。在本文中，我们将详细介绍防抖和节流的概念、原理、应用场景和实现过程。 防抖函数...
JavaScript 手写深拷贝
Sun_blog
08-09 569
浅拷贝 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&gt
手写JS数据深拷贝
Yetian_2000的博客
08-25 242
深拷贝与浅拷贝的区别：深拷贝是拷贝的变量改变时不会影响原数据的值，浅拷贝是拷贝的变量改变时原数据也会同时被改变。深拷贝主要是对于引用类型的数据，对于值类型数据的拷贝不涉及到深拷贝。 说明：在写js代码中经常用到关于变量的处理，特别是处理引用类型数据（主要是数组和对象两类）如果只是简单的使用“=”赋值，则会导致改变一个变量时，另外一个变量就会被“偷偷”的改变。这种情况是我们常常头疼的事，我们需要避免这原数据的改变。 深拷贝代码见下： const arr1 = { name:‘lishi’, age:23, c
手写JS深拷贝
阿嚏乱码的地方
02-14 367
源码： 支持拷贝String、Number、Boolean、Null、Undefined、Object（Function、Array、RegExp、Date、环） class deepCloner { constructor() { this.cache = [] } clone(source) { if (source instanc...
手写个JS深拷贝
弟弟的博客
02-03 270
手写JS深拷贝 function deepClone(obj) { // 1.递归 先写递归的结束条件，直到基本数据类型(和null)才能拷贝赋值 // 用typeof判断基本数据类型 和 判断null if (typeof obj !== "object" || typeof obj === null) { return obj; } // 2.初始化返回结果 var objClone = Array.isArray(obj) ? [] : {}; // 3.fo
手写js深拷贝
weixin_42959000的博客
04-20 727
// 定义一个深拷贝方法 function deepClone(obj = {}){ // 判断传入的数据是否是引用类型(一般为对象或者数组) if(typeOf obj !== 'object' || obj == null){ // 如果不是，那么返回该数据 return obj; } // 定义一个拷贝后的结果，用来当返回值 let result; // 判断结果值为数组还是对象 if(obj instanceOf Array){ result = [] }else{
【手撕代码系列】JS手写实现深拷贝
CreatorRay的博客
05-19 1287
在本篇博客中，我们介绍了如何手写实现深拷贝。我们实现了一个递归遍历对象的函数，同时处理了函数和循环引用的情况。这个方法虽然比较简单，但是它可以很好地处理大部分情况，避免在修改对象时对原始对象产生影响。需要注意的是，手写实现深拷贝可能会带来一些性能上的问题。因为递归地遍历对象需要消耗大量的时间和内存。在处理大型对象或者嵌套层次很深的对象时，可能会出现性能问题。因此，建议在实际开发中，使用成熟的深拷贝库，如lodash的cloneDeep方法，可以更好地处理性能问题。
js 手写深拷贝和浅拷贝
最新发布
09-06
所以，通过手写深拷贝和浅拷贝，可以更好地理解递归、循环引用、weakMap、创建各种引用类型的方法、判断数据类型、箭头函数与普通函数的区别、正则表达式等知识。<span class="em">1</span><span class="em">2...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值