如何动态合并两个 JavaScript 对象的属性

在给定的教程中,我们将展示一些在 JavaScript 中动态合并两个对象的属性的快速解决方案。

解决方案 2. Object.assign()

作为替代解决方案,我们可以使用 Object.assign() 方法。

通常,此方法用于将所有属性的值从一个或者多个源对象复制到目标对象。
因此,将返回目标对象。

第一个例子如下:

let target = {
  a: "object",
  b: "array"
};
let source = {
  c: "js",
  d: "onitroad"
};
let returnTarget = Object.assign(target, source);
console.log(JSON.stringify(target));
console.log(JSON.stringify(returnTarget));

它的输出将如下所示:

{"a":"object","b":"array","c":"js","d":"onitroad"}
{"a":"object","b":"array","c":"js","d":"onitroad"}

此外,在这种情况下,稍后出现在分布中的对象的键值将被复制。
在下面的示例中,我们可以注意到相同的键具有不同的值。

第二个例子如下:

let target = { a: "object", b: "array" };
let source = { b: "js", d: "onitroad" };
let returnTarget = Object.assign(target, source);
console.log(JSON.stringify(target));
console.log("</br>");
console.log(JSON.stringify(returnTarget));

它的输出:

{"a":"object","b":"js","d":"onitroad"}
{"a":"object","b":"js","d":"onitroad"}

定义扩展语法

展开语法为数组或者字符串提供了在需要零个或者多个元素和参数的地方进行扩展的机会。

换句话说,如果我们有一个数组、一个字符串或者一个对象,打算应用整体值,我们可以应用简短的语法将它们扩展到新对象、函数调用或者新数组中。

虽然扩展语法与其余参数类似,也使用三个点……,但它的作用正好相反。

如果在函数调用中使用 ...arr ,它会将一个可迭代对象 arr 扩展到参数列表。

解决方案 3. jQuery

jQuery 也为这个问题提供了一个合理的解决方案。

我们可以使用以下代码合并对象:

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
  </head>
  <body>
    <div id="div"></div>
    <script>
      let obj1 = {
        banana: {
          weight: 25,
          price: 200
        },
        cherry: 97
      };
      let obj2 = {
        banana: {
          price: 100
        },
        durian: 800
      };
      //Merge obj2 into obj1
      $.extend(obj1, obj2);
      //Assuming JSON.stringify
      $("#div").append(JSON.stringify(obj1));
    </script>
  </body>
</html>

解决方案 1. 展开运算符

第一个解决方案考虑使用扩展运算符。
它有助于迭代在需要 0+ 参数的地方扩展。
大多数情况下,我们可以在变量数组中使用它,其中需要多个值。

在它的帮助下,特权从数组中获取参数列表。

JavaScript 中的对象是键值对字典。
因此,可以应用扩展 (...) 运算符将不同的对象合并为一个对象。

传播语法如下所示:

object1 = { ...object2,	...object3,	...}

让我们看一个例子:

let obj1 = {
  name: "onitroad",
};
let obj2 = {
  domain: "https://www.onitroad.com/"
};
let Sites = { ...obj1, ...obj2 };
console.log(Sites)

在第二个例子中,假设对象获得相同的密钥。
在这种情况下,需要使用分布中稍后出现的对象的键的值。

它在这里演示:

let obj1 = {
  name: "onitroad",
};
let obj2 = {
  name: "Javascript"
};
let Sites = { ...obj1, ...obj2 };
console.log(Sites)

定义 Object.assign() 方法

Object.assign() 方法是构造函数方法之一。

它用于将值和属性从单个或者多个源对象复制到目标对象。
它运行 getter 和 setter,因为它在源上使用 Get,在目标上使用 Set

它返回获取从目标对象复制的属性和值的目标对象。
Object.assign() 不能抛出未定义或者空的源值。

日期:2020-06-02 22:16:23 来源:oir作者:oir