如何在 JavaScript 物件中刪除屬性？

在本教程中，我們將瞭解幾種從 JavaScript 物件中刪除屬性的方法。並比較它們以瞭解哪種方法適用於給定的上下文。

讓我們繼續討論這個問題。

使用 delete 運算子

在這裡，delete 運算子一次刪除物件中的鍵。delete 運算子不會直接清除記憶體。

delete 關鍵字僅適用於物件。我們不能將其用於變數或函式。我們不應在預定義的 JavaScript 物件屬性上使用 delete 關鍵字，因為它可能會導致錯誤。如果我們嘗試訪問已刪除的屬性，它將顯示undefined。

delete 操作是可變的，因為它會修改實際的物件。但這是從物件中刪除屬性的正確方法。

使用者可以按照以下語法使用此方法。

語法

//static property
delete object.property;

//dynamic property
delete object[property];

第一個用於已知屬性。下一個用於執行時值屬性。

屬性

  • object − 物件的名稱。

  • property − 要刪除的屬性的名稱。

示例

在此程式中，我們有一個名為 employee 的 JavaScript 物件。我們使用 delete 關鍵字從該物件中刪除 age 屬性。

<html>
<body>
   <h3>Remove a property from a JavaScript object using the<i> delete </i>keyword </h3>
   <p id="result1"> </p>
   <p id="result2"> </p>
   <script>
      var employee = {
         firstname: "John",
         lastname: "Eagan",
         age: 20
      };
      var remPropData = "Object before delete <br>" + JSON.stringify(employee);
      document.getElementById("result1").innerHTML = remPropData;
      delete employee.age;
      remPropData = "Object after deleting age <br>" + JSON.stringify(employee);
      document.getElementById("result2").innerHTML = remPropData;
   </script>
</body>
</html>

透過將屬性值設定為“undefined”

當我們處於使用大量迴圈的情況時，可以選擇此選項。我們透過將屬性值設定為“undefined”來最佳化刪除過程。delete 操作比使用“undefined”的簡單賦值慢 50 倍。

實際上，屬性並沒有被刪除。它只是被清空了。

語法

object.property = undefined;

在這裡，我們將 undefined 分配給物件的屬性。

示例

在此程式中，我們的物件名稱為 color。使用上面的賦值語法，我們從 color 物件中刪除 place 屬性。

<html>
<body>
   <h3>Remove a property from a JavaScript object</h3>
   <p>setting the property value to <i>undefined</i></p>
   <p id="result1"> </p>
   <p id="result2"> </p>
   <script>
      const color = {
         value: "blue",
         place: "sky"
      }
      var setPropData = "Before delete<br>" + JSON.stringify(color);
      document.getElementById("result1").innerHTML = setPropData;
      color.place = undefined;
      setPropData = "After delete color.place - " + color.place + "<br>" + JSON.stringify(color);
      document.getElementById("result2").innerHTML = setPropData;
   </script>
</body>
</html>

使用物件解構

這裡的想法很簡單。我們應該將物件解構到我們要刪除的屬性。然後將剩餘的屬性儲存在另一個物件中。

物件解構是從物件中提取資料到新變數的過程。物件解構是一種不可變的方法，因為它不會更改實際的物件，而是建立一個新物件以獲取所需的屬性（除了要刪除的屬性）。

主要優點是此方法可以一次刪除多個屬性。

語法

//static property
const {prop, ...remainObj} = obj

//dynamic property
const name = 'prop';
const {[name]: removedProperty, ...remainObj} = obj

這裡，第一個語法用於我們知道屬性名稱時。第二個語法用於屬性名稱動態變化時。

引數

  • prop − 我們需要刪除的屬性。

  • remainObj − 刪除特定屬性後的物件。

  • obj − 主物件。

  • name − 用於在執行時使用屬性名稱的變數。

  • removedProperty − 語法中的內建關鍵字。

示例

在此示例中，我們有 person 物件。我們使用擴充套件運算子刪除 position 和屬性。

<html>
<body>
   <h3>Remove a property from a JavaScript object</h3>
   <p>Using object destructuring with spread operator</i></p>
   <p id="result1">Object before delete:<br></p>
   <p id="result2">Object after deleting property- position<br></p>
   <script>
      const person = {
         name: 'John',
         position: 'Manager',
         exp: 6
      };
      var sprPropData = JSON.stringify(person);
      document.getElementById("result1").innerHTML += sprPropData;
      const {position, ...personTemp} = person;
      sprPropData = JSON.stringify(personTemp);
      document.getElementById("result2").innerHTML += sprPropData;
   </script>
</body>
</html>

使用 reduce() 方法

在這裡，reduce() 是一個內建的陣列函式。此函式的輸入是一個集合，而歸約函式是一個引數。

該方法迴圈遍歷所有元素並修改累加器，累加器充當新物件。

語法

const newObj = Object.keys(actualObj).reduce((accumulator, key) => {
   if(key!=="property"){
      accumulator[key] = actualObj[key]
   }
   return accumulator;
}, {})

在這裡，累加器歸約函式邏輯用於刪除屬性。

屬性

  • actualObj − JSON 物件。

  • accumulator − 如果鍵小於累加器值，則鍵值成為下一個累加器。

  • key − 當前值 = 鍵。

示例

在此示例中，我們的物件是 pets。我們將僅從該物件中刪除 gift 屬性。reduce 方法累加器和鍵值比較在每個迴圈中進行。最後，我們得到沒有 gift 屬性的物件。

<html>
<body>
   <h3>Remove a property from a JavaScript object using the
   <i> reduce()</i>method</h3>
   <p id="result1">Object before delete:<br> <br></p>
   <p id="result2">Object after deleting property <br><br></p>
   <script>
      const pets = {
         name: "Tomy",
         age: 3,
         gift: "Love"
      }
      var reducPropData = JSON.stringify(pets);
      document.getElementById("result1").innerHTML += reducPropData;
      const newPet = Object.keys(pets).reduce((accumulator, key) => {

         // Copy all except gift property
         if (key !== "gift") {
            accumulator[key] = pets[key]
         }
         return accumulator;
      }, {})
      reducPropData = JSON.stringify(newPet);
      document.getElementById("result2").innerHTML += reducPropData;
   </script>
</body>
</html>

本教程幫助我們學習瞭如何刪除 JavaScript 物件的屬性。

delete 方法很簡單。將 undefined 分配給屬性值是一種較差的方法。解構語法是一種不錯的方法，因為它不會修改實際的物件。

最後一種方法是 reduce 函式，這是一個不錯的選擇。使用者可以根據需要選擇任何方法。

更新於：2022-09-06

2K+ 次瀏覽

開啟您的 職業生涯

透過完成課程獲得認證

開始學習
廣告