关于前端:在-JavaScript-中如何克隆对象

5次阅读

共计 2744 个字符，预计需要花费 7 分钟才能阅读完成。

微信搜寻【大迁世界】, 我会第一工夫和你分享前端行业趋势，学习路径等等。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。

当咱们想要复制原始值和援用值（对象）时，它们的行为会大不相同。

咱们假如一个变量 name 具备一个与之关联的原始值（number，string，boolean，undefined 和 null）。如果咱们将此变量 name 复制到另一个变量name2，则原始变量的任何批改都不会影响到第二个变量，因为它们是原始值。

let name="前端小智";
let name2= name;
console.log (name, name2); // 前端小智, 前端小智
name="王大冶";
console.log (name,name2); // 王大冶 前端小智

然而，如果咱们对援用类型的值进行雷同的操作，则咱们对一个变量所做的任何更改也将反映在另一个变量中，因为两个变量都指向同一对象。

要拷贝数组，slice()办法用于创立数组的新正本。能够独立批改此正本，而不会影响原始数组。

如果未传递任何参数，则它会准确复制数组，但数字也能够作为参数传递。如果仅传递一个数字，它将确定咱们要从其进行复制的索引的值，而如果传递两个数字，则将标记开始和完结。

// 示例 1
const names = ['前端小智', '王大冶', '小力'];
const names2 = names;
console.log(names, names2);
// ["前端小智", "王大冶", "小力"] 
// ["前端小智", "王大冶", "小力"] 

// 示例 2
names2[2] = '前端小力';
console.log(names, names2);
//  ["前端小智", "王大冶", "前端小力"] 
//  ["前端小智", "王大冶", "前端小力"] 

// 示例 3
const name2 = names.slice();
names[2] = '我是隔壁老智';
console.log(name2, names2)
// ["前端小智", "王大冶", "前端小力"]
//  ["前端小智", "王大冶", "我是隔壁老智"]

当援用值是一个对象时，也会产生同样的状况，对其属性之一的任何批改都会影响这两个变量。若要克隆对象，请应用 Object.assign() 办法，该办法会将一个或多个源对象的所有可枚举属性的值复制到指标对象，然而此办法仅对对象的一个浅拷贝。

// 示例 1
const names = {
  name: '前端小智',
  surname: '隔壁老智'
}

const names2 = names;
console.log(names, names2) // 打印后果是截然不同的

// 示例 2
names2.surname ='隔壁老王';
console.log(names, names2)

// {name: "前端小智", surname: "隔壁老王"}
// {name: "前端小智", surname: "隔壁老王"}

// 示例 3
const names3 = Object.assign({}, names);
names3.surname = '隔壁老色 P';
console.log(names, names3)

// {name: "前端小智", surname: "隔壁老王"}
// {name: "前端小智", surname: "隔壁老色 P"}

要对对象进行深拷贝，须要应用其余办法。

正如咱们所说，Object.assign()办法只是一个浅拷贝（即，当咱们的对象没有其余对象作为属性时）才无效。在这些状况下，必须对对象进行深拷贝。

与浅拷贝不同，深拷贝以递归形式复制每个子对象，直到所有波及的对象都被复制为止。

咱们能够应用什么办法复制对象的深层正本？

此办法应用 JSON.stringify() 将对象转换为字符串，而后再用 JSON.parse() 将其转换回对象。此办法对简略对象无效，但如果对象属性是函数时有效。

const names = {
  name: '前端小智',
  surname: '隔壁老智',
  social: {
    wx: '大迁世界',
    url: 'www.lsp.com'
  }
}
const names2 = JSON.parse(JSON.stringify(names));
names2.social.url = 'www.baidu.com';
console.log(names, names2);

/** 
{
  name: "前端小智"
  social: {wx: "大迁世界", url: "www.lsp.com"}
  surname: "隔壁老智"
}
*/

/** 
{
  name: "前端小智"
  social: {wx: "大迁世界", url: "www.baidu.com"}
  surname: "隔壁老智"
}
*/

另一种十分乏味和优雅的对象深度复制办法是应用递归函数。

咱们创立了一个 deepClone(object) 函数，将想要克隆的对象作为参数传递给它。在函数外部，将创立一个局部变量克隆，这是一个空对象，其中将从起始对象克隆的每个属性都将增加到该对象中。

具体思路：

如果该属性不是对象，则将其简略地克隆并增加到新的克隆对象中。
如果属性是对象，则再次执行 deepClone（value） 函数，并将属性的值（在这种状况下为对象）作为参数传递，并反复雷同的过程。

function deepClone(object) {var clone = {};
  for (var key in object) {var value = object[key];
    if (typeof(value) !== 'object') {clone[key] = value;
    } else {clone[key]=deepClone(value);
    }
  }
  return clone;
} 

deepClone({value1:1,value2:{value3:2}});
//{value1:1,value2:{value3:2}}
deepClone({value1:1,value2:{value3:{value3b:3}}});
//{value1:1,value2:{value3:{value3b:3}}}

代码部署后可能存在的 BUG 没法实时晓得，预先为了解决这些 BUG，花了大量的工夫进行 log 调试，这边顺便给大家举荐一个好用的 BUG 监控工具 Fundebug。

原文：https://www.ma-o.org/en/progr…