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 次瀏覽

啟動您的 職業生涯

完成課程獲得認證

開始學習
廣告