js小拔高系列——写一个深拷贝

wslongchen 发布于2019-08-23 12:38 / 1149人阅读

摘要：实现首先可以写一个壳子函数，包裹一个将要反复递归调用自身的函数。如果是引用型，将对应的赋值为递归拷贝。另外在中需要使用进行判断，因为我们只想拷贝自身的属性。

最近想全职当码农，面试时候被问到了深拷贝，我噼里啪啦说了一通，感觉很牛逼，问我自己写过没有，我说没有，但是我可以写。其实我很心虚，估计现场写会卡壳。。。。。

思路

深拷贝需要迭代拷贝对象的所有属性，如果属性是引用型：Object,则继续递归迭代。

实现

首先可以写一个壳子函数，包裹一个将要反复递归调用自身的函数。

function deepCopy(obj) {
    const handleDeepCopy = obj=>{
       const clonedObj = obj instanceof Array? []:{}
      return clonedObj
    }
    return handleDeepCopy(obj)
}

clonedObj就是即将克隆返回的新对象
今后会这么使用它：let newobj = deepCopy(oldobj)
newobj就是经过深拷贝的新对象，这样在操作newobj的时候就不会对oldobj产生干扰了

接着完善递归拷贝逻辑。

用for in迭代数组和对象的属性。（若不用forin迭代，用foreach代码会比较多，数组和对象的处理方式会有所不同）

判断属性的类型，是否是引用型。

如果是引用型，将clonedObj对应的property赋值为handleDeepCopy（obj[property]）【递归拷贝】。

如果不是引用型，直接将clonedObj对应的property赋值为obj[property]。

function deepCopy(obj) {
    const handleDeepCopy = obj=>{
       const clonedObj = obj instanceof Array? []:{}
      // add for in logic here
      for (let keyOrIndex in obj) {
          if(obj[keyOrIndex] instanceof Object) {
              clonedObj[keyOrIndex] = handleDeepCopy(obj[keyOrIndex])
          } else {
              clonedObj[keyOrIndex] = obj[keyOrIndex]
          }
      }
      // for in logic over
      return clonedObj
    }
    return handleDeepCopy(obj)
}

以上逻辑还有疏忽的地方，没有在开始时判断传进的obj究竟是不是一个引用型，如果不是，就应该直接将obj返回。另外在for in中需要使用hasOwnProperty进行判断，因为我们只想拷贝obj自身的属性。为了节约篇幅，增加以上逻辑后修改的代码在：stackblitz

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/98883.html

js小拔高——写一个reduce

摘要：缘起最近看油管里面有一个关于面试的视频，里面提到了可能会让你写一写等函数，于是也来一起小拔高拔高。于是知道我们写的回调会被调用，并且传一个进来。其中累加值的初始值是我们传的，如果我们没传，那么累加值的初始值就会是数组的第一个元素。缘起：最近看油管里面有一个关于js面试的视频，里面提到了可能会让你写一写reduce等函数，于是也来一起小拔高拔高。先写写map 首先回忆平时是如何使...

ASCH 2019-08-23 12:39 评论0 收藏0
「读懂源码系列4」lodash 是如何实现深拷贝的（下）

摘要：用于检测自己是否在自己的原型链上如果是函数，则取出该函数的原型对象否则，取出对象的原型对象其中，的判断，是为了确定的类型是对象或数组。相当于，而的构造函数是一个函数对象。 showImg(https://segmentfault.com/img/bVbq2N1?w=640&h=437); 前言接着上一篇文章 lodash 是如何实现深拷贝的（上），今天会继续解读 _.cloneDee...

zombieda 2019-08-26 10:11 评论0 收藏0
前端经典文章

摘要：上周末看这篇文章时，偶有灵光，所以，分享出来给大家一起看看前端面试四月二十家前端面试题分享请各位读者添加一下作者的微信公众号，以后有新的文章，将在微信公众号直接推送给各位，非常感谢。前端切图神器 avocode 有了这个神器，切图再也腰不酸，腿不疼了。这一次，彻底弄懂 JavaScript 执行机制本文的目的就是要保证你彻底弄懂javascript的执行机制，如果读完本文还不懂，...

lowett 2019-08-22 13:58 评论0 收藏0
JavaScript系列--浅析JavaScript解析赋值、浅拷贝和深拷贝的区别

摘要：它将返回目标对象。有些文章说是深拷贝，其实这是不正确的。深拷贝相比于浅拷贝速度较慢并且花销较大。拷贝前后两个对象互不影响。使用深拷贝的场景完全改变变量之后对没有任何影响，这就是深拷贝的魔力。一、赋值（Copy）赋值是将某一数值或对象赋给某个变量的过程，分为： 1、基本数据类型：赋值，赋值之后两个变量互不影响 2、引用数据类型：赋址，两个变量具有相同的引用，指向同一个对象，相互之间有...

laznrbfe 2019-08-26 13:48 评论0 收藏0
前端数据扁平化与持久化

摘要：与持久化工程师花了年时间打造，与同期出现。有持久化数据结构，如等，并发安全。总结篇幅有限，时间也比较晚了，关于前端数据的扁平化与持久化处理先讲这么多了，有兴趣的同学可以关注下，后面有时间会多整理分享。 (PS: 时间就像海绵里的水，挤到没法挤，只能挤挤睡眠时间了~ 知识点还是需要整理的，付出总会有收获，tired but fulfilled~) 前言最近业务开发，从零搭建网页生成器，...

dreamtecher 2019-08-23 11:41 评论0 收藏0