JavaScript - delete 運算子

JavaScript Delete 運算子

JavaScript 的 delete 運算子用於刪除物件的屬性。它會刪除屬性以及屬性的值。它僅適用於物件，不適用於變數或函式。

在 JavaScript 中，陣列是一個物件，因此您可以使用 'delete' 運算子從特定索引刪除陣列中的元素。但是，還有 pop()、slice() 或 shift() 等方法可用於從陣列中刪除元素。

語法

請按照以下語法使用 'delete' 運算子刪除物件屬性。

delete obj.property;
 OR
delete obj["property"];

返回值 - 'delete' 運算子如果成功刪除運算元（指定的屬性），則返回 true，否則如果未刪除屬性，則返回 false。

如果您嘗試刪除不存在的屬性，它將返回 true，但不會影響物件。

請按照以下語法使用 'delete' 運算子刪除陣列元素。

delete arr[index];

刪除物件屬性

JavaScript delete 運算子可用於刪除物件的屬性。要刪除屬性，我們編寫 delete 運算子後跟物件的屬性。

delete obj.propertyName;
or
delete obj["propertyNmae"];

在上述語法中，名為 propertyName 的物件屬性正在從名為 obj 的物件中刪除。

示例：刪除物件屬性

下面的示例中的 'obj' 物件包含 product、price 和 color 屬性。我們使用 'delete' 運算子從物件中刪除 price 屬性。

<html>
<body>
<div id="output"></div>
<script>
   const obj = {
      product: "Mobile",
      price: 20000,
      color: "Blue",
   }
   delete obj.price; // deleting price 
   document.getElementById("output").innerHTML =
   "The Mobile price is " + obj.price + " and color is " + obj.color;
</script>
</body>
</html>

它將產生以下結果 -

The Mobile price is undefined and color is Blue

請注意，當我們訪問已刪除的屬性時，它會返回 undefined。

示例：刪除不存在的物件屬性

嘗試刪除一個不存在的屬性。它將返回 true，但不會影響原始物件。

<html>
<body>
<div id="output"></div>
<script>
   const obj = {
      product: "Mobile",
      price: 20000
   }  
   document.getElementById("output").innerHTML = delete obj.color;
</script>
</body>
</html>

上述程式將產生以下結果 -

true

刪除陣列元素

我們可以使用 delete 運算子從陣列中刪除或移除元素。要刪除元素，我們使用 delete 關鍵字後跟陣列元素。我們可以使用方括號 ([]) 從陣列中訪問元素。

示例

以下程式碼包含數字陣列。我們使用 'delete' 運算子從陣列的第 1 個索引刪除元素。在輸出中，您可以觀察到陣列中的元素被刪除了，但其他元素的位置保持不變。陣列長度也保持不變。

<html>
<body>
<div id="output"></div>
<script>
   const arr = [10, 20, 30, 40, 50, 60];
   delete arr[1]; // deleting 2nd element from array
   document.getElementById("output").innerHTML = 
   arr + "<br>" + 
   arr[1]; 
</script>
</body>
</html>

它將產生以下結果 -

10,,30,40,50,60
undefined

刪除預定義物件

JavaScript 'delete' 運算子可以刪除預定義的物件，例如 Math、Date 等。不建議刪除預定義物件。一旦刪除，您將無法訪問這些物件的屬性。

示例：刪除內建 Math 物件

在下面的示例中，我們嘗試刪除 Math 物件，因此我們得到上述錯誤。

<html>
<body>
<div id="output"></div>
<script>
   var x = 10
   var fun = function(){return 20;};
   document.getElementById("output").innerHTML = 
   "delete Math.PI :" + delete Math.PI + "<br>" + 
   "delete Math :" + delete Math + "<br>";
  
   try{
      document.getElementById("output").innerHTML += Math.PI;
   }
   catch(e){
      document.getElementById("output").innerHTML += e;
   }  
</script>
</body>
</html>

它將產生以下輸出 -

delete Math.PI :false
delete Math :true
ReferenceError: Math is not defined

無法刪除變數和函式

delete 運算子無法刪除變數或函式。

<html>
<body>
<div id="output1"></div>
<div id="output2"></div>
<script>
   var x = 10
   var fun = function(){return 20;};
   document.getElementById("output1").innerHTML = delete x;
   document.getElementById("output2").innerHTML = delete fun;
</script>
</body>
</html>

它將產生以下結果 -

false
false

無需使用 var、let 或 const 定義的變數可以被刪除。此類變數被視為 window 物件的屬性。

<html>
<body>
<div id="output1"></div>
<div id="output2"></div>
<script>
   try{
	  x = 10
	  document.getElementById("output1").innerHTML = delete x;
	  document.getElementById("output2").innerHTML = x;
   }catch(e){
      document.getElementById("output2").innerHTML = e;
   }
</script>
</body>
</html>

它將產生以下結果 -

true
ReferenceError: x is not defined

列印頁面