js拷贝的三种方式对比(深拷贝、浅拷贝、递归拷贝)

   let obj = {
        name: "Aj",
        age: 18,
        num: undefined,
        say: function () {
          console.log("say函数>>>");
        },
        arr: ["数组1", "数组2"],
        objOption: {op01:'jack',op02:2022},
      };
      let newObj = JSON.parse(JSON.stringify(obj))
      console.log("obj>>>", obj);
      console.log("newObj>>>", newObj);
      newObj.age = 24;
      newObj.objOption.op02=2023
      console.log("obj>>>", obj);
      console.log("newObj>>>", newObj);

let obj = {
        name: "Aj",
        age: 18,
        num: undefined,
        say: function () {
          console.log("say函数>>>");
        },
        arr: ["数组1", "数组2"],
        objOption: {op01:'jack',op02:2022},
      };
      let newObj = {...obj}
      console.log("obj>>>", obj);
      console.log("newObj>>>", newObj);
      newObj.age = 24;
      newObj.objOption.op02=2023
      console.log("obj>>>", obj);
      console.log("newObj>>>", newObj);

/**
 * 深拷貝-递归实现
 * @param {*} data
 * @returns
 */
const cloneDeep = (data) => {
  const newData = Array.isArray(data) ? [] : {};
  for (let key in data) {
    if (data[key] && typeof data[key] === "object") {
      newData[key] = cloneDeep(data[key]);
    } else {
      newData[key] = data[key];
    }
  }
  return newData;
};
/**
 * 拷贝对象 优化方案
 * @param {*} obj 原对象
 * @param {*} cloneOjb 返回拷贝对象
 */
const cloneDeepObj = (obj) => {
  if (obj === undefined) {
    throw new TypeError("param is not undefined");
  }
  //判断拷贝对象只有一层及属性值都不是对象,使用Object.assign()
  if (!isObjectValue(obj)) {
    return { ...obj };
  }
  //判断类型,如果不是Function或undefined使用JSON方式
  if (!isFunctionOrUndefined(obj)) {
    return JSON.parse(JSON.stringify(obj));
  }

  return cloneDeep(obj);
};
/**
 * 递归判断数据类型
 *   Function或undefined返回为true
 */
const isFunctionOrUndefined = (data) => {
  for (let key in data) {
    if (data[key] === undefined) {
      return true;
    } else if (
      data[key] &&
      Object.prototype.toString.call(data[key]) === "[object Function]"
    ) {
      return true; //Function
    } else if (data[key] && typeof data[key] === "object") {
      isFunctionOrUndefined(data[key]);
    }
  }
};
/**
 * 判断对象属性值是否有对象
 * @param {} data
 * @returns
 */
const isObjectValue = (data) => {
  for (let key in data) {
    if (data[key] && typeof data[key] === "object") {
      if (
        Object.prototype.toString.call(data[key]) !== "[object Function]"
      ) {
        return true;
      }
    }
  }
};

const testCloneDeepObj = () => {
  const obj = {
    name: "jack",
    age: 18,
    hobby: { swiming: "游泳" },
    arr: [{ score: 98 }],
    say: function () {
      console.log(this.name);
    },
    number: undefined,
  };
  const cloneObj = cloneDeepObj(obj);
  cloneObj.name = "rose";
  cloneObj.age = 20;
  cloneObj.hobby.swiming = "不会游泳";
  cloneObj.arr[0].score = 100;
  console.log("obj :", obj, "\n cloneObj :", cloneObj);
  cloneObj.say();
  obj.say();
};

testCloneDeepObj();