在 JavaScript 中将函数调用中的属性分配给现有对象的最短语法

javascriptweb developmentfront end technology

在 JavaScript 中，可以通过多种方式创建对象并分配属性。一种流行的方法是使用最短的语法将函数调用中的属性分配给现有对象。在本文中，我们将探讨如何使用这种技术并讨论使用它时的一些注意事项。

JavaScript 中的对象是具有属性和类型的独立实体。JavaScript 对象可以具有指定其属性的属性。

扩展语法 (…)

可以使用 spread (...) 语法 在需要零个或多个参数或组件的地方扩展 可迭代，例如数组或 字符串。扩展语法在对象文字中列出对象的属性，并将键值对添加到新生成的对象中。

扩展语法与剩余语法完全匹配。扩展语法可以被认为是剩余语法的对立面。剩余语法会收集大量元素并将它们"压缩"为单个元素，而扩展语法会将数组"扩展"为其元素。请参阅剩余属性和剩余参数。

语法

以下是扩展语法(..)的语法>

var variablename1 = [...value];

让我们查看以下示例，以了解有关在JavaScript中将函数调用中的属性分配给现有对象的最短语法的更多信息。

示例

在下面的示例中，我们使用运行脚本来使用扩展语法分配属性。

<!DOCTYPE html>
<html>
<body>
   <p id= "tutorial" ></p>
   <script>
      function exist() {
         return {
            car1: "BMW",
            car2: "TESLA"
         }
      }
      let existingObject = { car3: "BENZ" }
      existingObject = { ...existingObject, ...exist() };
      document.getElementById("tutorial").innerHTML=JSON.stringify(existingObject);
   </script>
</body>
</html>

示例

让我们考虑另一个使用扩展语法的例子。

<!DOCTYPE html>
<html>
<body>
   <p id= "tutorial" ></p>
   <script>
      function sum(a, b, c) {
         return a + b + c;
      }
      const numbers = [4, 8, 5];
      console.log(sum(...numbers));
      document.getElementById("tutorial").innerHTML=JSON.stringify(sum.apply(null, numbers));
   </script>
</body>
</html>

运行上述脚本时，Web 浏览器将在用户运行脚本时触发的事件的帮助下，在网页上显示脚本中使用的数据。

我们还可以使用 Object.assign() 方法

JavaScript 中的 Object.assign()

Object.assign() 是 JavaScript 中的一种方法，它将所有可枚举属性的值从一个或多个源对象复制到目标对象。它返回目标对象。

此方法用于将两个或多个对象合并为一个对象，每个源都会覆盖目标对象中任何冲突的键/值对。

示例

考虑以下示例，其中我们使用 Object.assign()。

<!DOCTYPE html>
<html>
<body>
   <p id= "tutorial" ></p>
   <script>
      function make()
      {
         return {
            num: 22,
            vehicle: "bike"
         };
      }
      let someObject = {
         num: 25,
         coffee: "black"
      };
      Object.assign(someObject, make());
      document.getElementById("tutorial").innerHTML=JSON.stringify(someObject);
   </script>
</body>
</html>

当脚本执行时，事件被触发并比较所有数据，并将其与后来添加的对象一起打印在网页上。