方法一:把原来对象的属性遍历一遍,赋给一个新对象

  //深复制对象方法    
  var cloneObj = function (obj) {
    var newObj = {};
    if (obj instanceof Array) {
      newObj = [];
    }
    for (var key in obj) {
      var val = obj[key];
      newObj[key] = typeof val === 'object' ? cloneObj(val) : val;
    }
    return newObj;
  };
  //测试
  var obj = {
      func: function () {
        console.log(this.objMsg.name)
      },
      objMsg: {
        name: 'sun'
      },
      arrMsg: [1, 2]
    } //设置一个对象  
  newObj = cloneObj(obj); // 复制对象
  console.log(newObj)// {arrMsg: [1, 2],func: ƒ (),objMsg: {name: 'small sun'}}
  newObj.objMsg.name = 'small sun'; // 给新对象赋新值
  obj.func(); // sun,不受影响
  newObj.func(); // small sun

方法二:
现将对象转化成字符串,然后再解析成对象:JSON.parse(JSON.stringify(obj))
注意:如果对象中有函数function和undefined类型的属性,则不能正确复制;
Date类型会被转换成字符串

  var obj = {
      func: function () {
        console.log(this.objMsg.name)
      },
      objMsg: {
        name: 'sun'
      },
      arrMsg: [1, 2],
      undeObj: undefined,
      dateObj: new Date()
    } //设置一个对象
  newObj = JSON.parse(JSON.stringify(obj)); // 复制对象
  console.log(newObj)
  // {arrMsg: [1, 2],dateObj: "2022-01-10T08:32:06.168Z",objMsg: {name: 'small sun'}}
  newObj.objMsg.name = 'small sun'; // 给新对象赋新值
  console.log(obj.objMsg.name) // sun
  console.log(newObj.objMsg.name) // small sun

方法三: 扩展运算符
注意:用扩展运算符对数组或者对象进行拷贝时,只能扩展和深拷贝第一层的值,对于第二层极其以后的值,扩展运算符将不能对其进行打散扩展,也不能对其进行深拷贝,即拷贝后和拷贝前第二层中的对象或者数组仍然引用的是同一个地址,其中一方改变,另一方也跟着改变。

  var obj = {
    simpleObj: 1,
      func: function () {
        console.log(this.objMsg.name)
      },
      objMsg: {
        name: 'sun'
      },
      arrMsg: [1, 2],
      undeObj: undefined,
      dateObj: new Date()
    } //设置一个对象
  var { ...newObj } = obj;
  console.log(newObj)
  // {arrMsg: [1, 2],dateObj: Mon Jan 10 2022 16:44:18 GMT+0800 (GMT+08:00) {},func: ƒ (),objMsg: {name: 'small sun'},simpleObj: 2,undeObj: undefined}
  newObj.simpleObj = 2// 给新对象第一层赋新值
  newObj.objMsg.name = 'small sun'; // 给新对象第二层赋新值
  console.log(obj.simpleObj) // 1 //旧对象值不受影响
  console.log(newObj.simpleObj)// 2
  console.log(obj.objMsg.name) // small sun // 旧对象值被影响
  console.log(newObj.objMsg.name) // small sun
  obj.func(); // small sun
  newObj.func(); // small sun
Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐