JavaScript - 删除运算符

JavaScript 删除运算符

JavaScript 删除运算符用于删除/移除对象的属性。它会移除对象的属性及其值。该运算符仅适用于对象，不适用于变量或函数。

在 JavaScript 中，数组也是对象，因此您可以使用"delete"运算符从特定索引处删除元素。此外，还有一些方法(例如 pop()、slice() 或 shift())可用于从数组中删除元素。

语法

请按照以下语法使用"delete"运算符删除对象属性。

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

返回值 − 如果操作数(指定属性)成功删除，则"delete"运算符返回 true;否则，如果属性未删除，则返回 false。

如果尝试删除不存在的属性，它将返回 true，但不会影响对象。

请按照以下语法使用"delete"运算符删除数组元素。

delete arr[index];

删除对象属性

JavaScript 的 delete 运算符可用于删除对象的属性。要删除属性，我们编写 delelte 运算符，后跟对象的属性。

delete obj.propertyName;
或
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"运算符从数组的第一个索引处删除元素。在输出中，您可以观察到数组中的元素被删除，但其他元素的位置保持不变。数组长度也保持不变。

<html>
<body>
<div id="output"></div>
<script>
   const arr = [10, 20, 30, 40, 50, 60];
   delete arr[1]; // 从数组中删除第二个元素
   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