📎js深度拷贝

方法1 定义方法clone

function clone(obj) {
  let copy;
  if (obj instanceof Array) {
    copy = [];
    let i = obj.length;
    while (i--) {
      copy[i] = clone(obj[i]);
    }
    return copy;
  } else if (obj instanceof Object) {
    copy = {};
    for (let k in obj) {
      copy[k] = clone(obj[k]);
    }
    return copy;
  } else {
    return obj;
  }
}

方法1缺点:无法拷贝函数

方法2 使用 JSON.stringify 和 JSON.parse 方法

var arr = ['old', 1, true, ['old1', 'old2'], {old: 1}]
var new_arr = JSON.parse( JSON.stringify(arr));
console.log(new_arr);   //  [ 'old', 1, true, [ 'old1', 'old2' ], { old: 1 } ]

方法2缺点:同样无法拷贝函数

方法3 定义deepClone函数

function deepClone(source) {
  // 递归终止条件
  if (!source || typeof source !== 'object') {
    return source;
  }
  var targetObj = source instanceof Array ? [] : {};
  for (var key in source) {
    // 该方法会忽略掉那些从原型链上继承到的属性。
    if (source.hasOwnProperty(key)){
    // 避免死循环对象属性
      if(source[key] === source){
        console.warn(new Error('circular object'))
      }else if (source[key] && typeof source[key] === 'object') {  //数组 typeof的结果也是object
        targetObj[key] = deepClone(source[key]);
      } else {
        targetObj[key] = source[key];
      }
    }
  }
  return targetObj;
}
var object1 = {'year':12, arr: [1, 2, 3], obj: {key: 'value' }, func: function(){return 1;}};
var object2 = [1,[2,[3,4,[5,6]]]]
var newObj= deepClone(object1);
var newObj2 = deepClone(object2)
console.log(newObj)  // { year: 12,arr: [ 1, 2, 3 ],obj: { key: 'value' }, func: [Function: func] }
console.log(newObj2) // [ 1, [ 2, [ 3, 4, [Array] ] ] ]
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • js 数组的深度拷贝 的四种实现方法 首先声明本人资质尚浅,本文只用于个人总结。如有错误,欢迎指正、共同提高。 v...
    yichen_china阅读 2,875评论 0 0
  • 深拷贝(deepClone) 对于一个引用类型,如果直接将它赋值给另一个变量,由于这两个引用指向同一个地址,这时改...
    三月孙记风阅读 2,600评论 2 0
  • 实现1: 由于JSON并不是支持所有js数据类型(如:Date,Function,Error,RegExp等都不支...
    stanf1l阅读 5,529评论 0 0
  • 写在前面 各类技术论坛关于深拷贝的博客有很多,有些写的也比我好,那为什么我还要坚持写这篇博客呢,之前看到的一篇博客...
    心_c2a2阅读 21,316评论 3 18
  • 函数和对象 1、函数 1.1 函数概述 函数对于任何一门语言来说都是核心的概念。通过函数可以封装任意多条语句,而且...
    道无虚阅读 10,125评论 0 5