JavaScript对象类型数据深拷贝方法【主要解决JSON.parse(JSON.stringify()会去掉函数属性的问题】

JavaScript对象类型数据深拷贝方法【主要解决JSON.parse(JSON.stringify()会去掉函数属性的问题】

正常情况下，在js中我们要对一个数组做深拷贝，最新想到的方法是JSON.parse(JSON.stringify(arr))，但是JSON.parse(JSON.stringify()会去掉属性中为函数的属性。

例如：

let arr = [
  {
    a: 1,
    b: 2,
    c: function () {
      console.log('111');
    }
  }
]
arr1 = JSON.parse(JSON.stringify(arr))
arr1[0].a = 100
console.log(arr, arr1);
// [ { a: 1, b: 2, c: [Function: c] } ] 
// [ { a: 100, b: 2 } ]

手写对象类型数据深拷贝方法deepClone

代码如下：

function deepClone(originValue) {
  // 如果不是对象类型且是null则直接将当前值返回
  if (typeof originValue !== 'object' || originValue == null) {
    return originValue;
  }

  const newObject = Array.isArray(originValue) ? [] : {}
  for (const key in originValue) {
    //  因为javascript没有将hasOwnProperty作为一个敏感词，所以我们很有可能将对象的一个属性命名为hasOwnProperty，
    // 这样一来就无法再使用对象原型的 hasOwnProperty 方法来判断属性是否是来自原型链。
    // 所以采用 Object.prototype.hasOwnProperty.call
    if (Object.prototype.hasOwnProperty.call(originValue, key)) {
      // 若是对象类型属性，递归调用deepClone，若是其他类型属性，则直接赋值
      if (typeof originValue[key] === 'object' && originValue[key] !== null) {
        newObject[key] = deepClone(originValue[key]);
      } else {
        newObject[key] = originValue[key];
      }
    }
  }

  return newObject
}

let arr = [
  {
    a: 1,
    b: 2,
    c: function () {
      console.log('111');
    }
  }
]
arr1 = deepClone(arr)
// arr1 = JSON.parse(JSON.stringify(arr))
arr1[0].a = 100
console.log(arr, arr1);
// [ { a: 1, b: 2, c: [Function: c] } ] 
// [ { a: 100, b: 2, c: [Function: c] } } ]
arr1[0].c() // 111

小结

如果对象数组中属性没有函数属性，可以使用JSON.parse(JSON.stringify()，但是如果有函数属性值，则使用自己写的deepClone方法。