我们可以使用扩展操作符(…)将不同的对象合并为一个对象,这也是合并两个或多个对象最常见的操作。

这是一种合并两个对象的不可变方法,也就是说y g | h p k ],用于合并的初始两个对象d B a T不会因为副作用而以任何方式改变。最后,我d D J , E V J y 4们得到了一个新对象,它由这两个对象构造而成,而它们仍然保持完整。

我们创建两个对象并合并它们:

  1. constperson={
  2. name:"Q K w \ B前端小智",
  3. age:24
  4. }
  5. constjob={
  6. titl9 I s k Je:"前端开发",
  7. locatioo N ! W z [ @ Hn:"厦门"
  8. }
  9. constempO q l : `loyee={...person,...job};
  10. console.logZ l Y c t(employee);

运行结果:

  1. {
  2. name:'前端小智',
  3. age:24,V b x }
  4. title:'前端开发',
  5. location:'厦门'
  6. }

注意:如果这两个对象之间有共同的属性,例如它们都有location,则第二个对象(job)的属性将覆盖第一个对象(person)的属性:

  1. constperson={R 3 [ C L y : 5
  2. name:"前端小智",
  3. location:"北京"
  4. }
  5. constjob={
  6. title:"前端开发",
  7. location:"厦门"
  8. }
  9. constemployee g r N 8 4e={...person,...job};
  10. console.log(employee);

运行结果:e 3 S

  1. {
  2. name:'前端小智',
  3. location:'厦门',
  4. title:'前端开发'
  5. }

如果要合并两个以上的对象,最右边的对象将覆盖左边的对象。

使用 Object.assA R { , g ;ign() 合5 q V并JavaScript对象

并两个或多个对象的另一种常用_ N $ ( f Q o方法是使用内置的Object.assign()方法:

  1. Object.ad F * 2 Cssign(target,source1,source2,...);

此方法将一个或{ ] c v k多个源对象中的所有属K ] \ 9 w * H b性复制到目标对象中。就像扩展操作符一样,在覆盖时,将使用最: { Y v D W n /右边的值A 0 L b h 8:

  1. constperson={
  2. name:"前端小智",
  3. location:"北京",
  4. };
  5. constjob={
  6. title:"前端开发",
  7. locag 1 * 3 ~ - otion:"厦门",
  8. };
  9. co^ q ] VnstempR w m y |loyee=Object.assig= / i 1 B b G g ~n(person,job);
  10. console.log(employee);

运行结果:

  1. {
  2. name:'前端小智',
  3. age:24,
  4. locati# C [ f R w Po^ 1 % 8 { C J ! Hn:'厦门',
  5. title:'前端开发'
  6. }

同样,请记住employee引用的对象是一个全新的对象,不会链接到person或job引用的对象。

浅合并和深合并

在浅合并的情况下,如果源对象上的属性之一是另一个对象,则目标对象将包含对源对象中存在的同一对象的引用。在这种情况下,不会W U ?创建新对象。

我们调整前面的person对象,并将location作为对象本身

  1. constQ 4 ? $ ~ B #peJ W _ ) _ z c Q Xrson={
  2. name:"JohnDp m Hoe",
  3. location:{
  4. city:"London",
  5. cob 2 : ] & y x 8untry:"England"
  6. }
  7. }
  8. constjob={
  9. title:"Fullstackdeveloper"
  10. }
  11. constemployee={...person,...job};
  12. console.log(employee.location===person.location);

运行结果:

  1. true

我们可以^ j Q 1 ) I看到person和employee对象中对location对象的引用是相同的B m 1 G I Y s。事实上,spread操作符(…)和Object.assign() 都是浅合并。

JavaScript没有现成的深合并支0 m & p 1 y持。然而,第三方模块和库确实支持它,比如Lodash的.merge。

总结

本文中,我们演示在如何在 JS 中合并两个对象。介绍了spread操作符(…)和Object.assig~ . G 2n()方法,它们都执行两个或多个对象的浅合并到一个新对象中,而不会影响组成部分。

~完,我是刷碗智,我要去刷碗了,我们下期见!

作者:Abhilash Kakumanu 译者:前端小智 来源:stackak

原文:https://stackak.com/merge-properties-of-two-objects-dynamically-in-javascript/

本文转载自微信公众号「大迁世界」,可以通过以下二维码关注。转载本文请联系大迁世界公众号。

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注