JavaScript 中为现有对象分配函数调用属性的简短语法


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

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

展开语法 (...)

可以使用展开 (...) 语法可迭代对象(例如数组字符串)扩展到预期零个或多个参数或组件的位置。展开语法列出对象文字中对象的属性,并将键值对添加到新生成的 对象中。

展开语法与剩余语法完全匹配。展开语法可以认为是剩余语法的对立面。剩余语法收集多个元素并将它们“压缩”成单个元素,而展开语法则将数组“扩展”成其元素。参见剩余属性剩余参数

语法

以下是展开语法 (...) 的语法

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>

运行上述脚本后,网页浏览器将在网页上显示脚本中使用的数据,这借助于用户运行脚本时触发的事件来实现。

我们也可以使用 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>

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

更新于:2023年1月18日

91 次浏览

启动您的 职业生涯

完成课程获得认证

开始学习
广告