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

打印页面