美文网首页
JavaScript 原生js深拷贝的实现

JavaScript 原生js深拷贝的实现

作者: 这名字真不对 | 来源:发表于2017-06-06 17:48 被阅读0次

这次的学习深拷贝参考了子匠大大的文章:《JavaScript中对象的深拷贝》

JSON.parse()&JSON.stringify()

通过JSON的两个方法使对象重新构造成新的对象实现深拷贝,它的问题在于会丢弃对象的constructor,同时必须保证处理的对象为能够被json数据结构表示,比如Number,String,Boolean,Array,扁平对象,否则无法处理。

function deepCopy(initalObject){
    var finalObject = {}
    try {
        finalObject = JSON.parse(JSON.stringify(initalObject))
    }
    return finalObject
}

递归的方法

function deepCopy(initalObject,finalObject){
  var finalObject = finalObject || {}
  for(var key in initalObject){
    if(typeof initalObject[key] === "object"){
      finalObject[key] = (initalObj[key].constructor === Array) ? [] : {}  // 区分是数组还是对象
      arguments.callee(initalObject[key],finalOjbect[key]) //调用自身函数方法
    }else{
      finalObject[key] = initalObject[key]
    }
  }
  return finalObject
}

参考文章中,提到相互引用对象死循环的情况,则有下面的优化.

function deepCopy(initalObject,finalObject){
  var finalObject = finalObject || {}
  for(var key in initalObject){
    var tempProperty = initalObject[key]
    if(tempProperty === initalObject){
      continue //
      当自身属性引用自己的时候,跳过执行,不拷贝,避免相互引用导致内存溢出的情况
    }
    if(typeof initalObject[key] === "object"){
      finalObject[key] = (initalObject[key].constructor === Array) ? [] : {}  //区分构造函数
      arguments.callee(initalObject[key],finalObject[key]) //调用自身函数方法
    }else{
      finalObject[key] = initalObject[key]
    }
  }
  return finalObject
}

ps:参考文章中的方法有误,应该是if(prop === initalObj){continue}

Object.create()

使用object.create()的问题在于避开了递归,但是数组则无法做下一步处理,如果是一些特殊的构造函数实例比如正则对象同样存在这个问题

function deepCopy(initalObject,finalObject){
  var finalObject = finalObject || {} 
  // 处理未输入新对象的情况
  for(var key in initalObject){
    if(initalObject[key] === initalObject){
      continue
    }
    if(typeof initalObject[key] === "object"){
      finalObject[key] = (initalObject[key].constructor === Array) ? [] : Object.create(initalObject[key])  //通过Object.create()方法构造新的对象
    }else{
      finalObject[key] = initalObject[key]
    }
  }
  return finalObject
}

参考文章:
http://www.dengzhr.com/js/1180
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/arguments/callee

相关文章

  • JavaScript 原生js深拷贝的实现

    这次的学习深拷贝参考了子匠大大的文章:《JavaScript中对象的深拷贝》 JSON.parse()&JSON....

  • 浅拷贝和深拷贝

    本文参考:JavaScript中的浅拷贝和深拷贝js 深拷贝 vs 浅拷贝深入剖析 JavaScript 的深复制...

  • js浅拷贝深拷贝

    js浅拷贝,深拷贝的简单实现 基础数据 浅拷贝 深拷贝

  • Javascript中的深拷贝

    JS 中深拷贝的几种实现方法 1、使用递归的方式实现深拷贝 //使用递归的方式实现数组、对象的深拷贝 functi...

  • JS 中深拷贝的几种实现方法

    JS 中深拷贝的几种实现方法 1、使用递归的方式实现深拷贝 方法二 2、通过 JSON 对象实现深拷贝 缺点 (1...

  • 手写代码系列

    深拷贝 html转码 手写promise.all 有哪些实现数组扁平化的方法 原生js 运用flat方法 redu...

  • js 原生 深拷贝

    function deepCopy(obj) {var result = Array.isArray(obj) ?...

  • JS深拷贝的实现

    JS深拷贝, 即传值拷贝, 需要新建一处内存,实现拷贝,具体实现如下: //ES5深拷贝 (1)循环递归: fun...

  • 原生JS实现对象数组深拷贝

    原生JS实现对象数组深拷贝已经是一个老生常谈的面试题了,下面我将方法总结出来

  • Javascript实现深拷贝

    Type函数 首先我们要实现一个getType函数对元素进行类型判断: 深拷贝(DeepClone) 对于一个引用...

网友评论

      本文标题:JavaScript 原生js深拷贝的实现

      本文链接:https://www.haomeiwen.com/subject/fjknfxtx.html