Javascript 简明教程

JavaScript - Delete Operator

JavaScript Delete Operator

JavaScript delete 操作符从对象中删除/移除一个属性。它从对象中移除属性以及属性的值。它仅适用于对象，不适用于变量或函数。

在 JavaScript 中，数组是一个对象，因此你可以使用“delete”操作符从特定索引中删除一个元素。然而，有 pop()、slice() 或 shift() 等方法可以从数组中删除元素。

Syntax

遵循下面的语法，使用“delete”操作符删除对象属性。

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

Return value - 如果操作数（指定属性）被成功删除，“delete”操作符返回 true，否则如果属性未删除，则返回 false。

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

遵循下面的语法，使用“delete”操作符删除数组元素。

delete arr[index];

Deleting Object Properties

JavaScript delete 操作符可用于删除对象的属性。为了删除属性，我们在对象属性之后写 delete 操作符。

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

在上面的语法中，名为 propertyName 的对象属性从名为 obj 的对象中被删除。

Example: Deleting an Object Property

以下示例中的“obj”对象包含产品、价格和颜色属性。我们使用“delete”操作符从对象中删除价格属性。

<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。

Example: Deleting a Nonexistent object Property

尝试删除一个不存在的属性。它将返回 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

Deleting Array Elements

我们可以使用 delete 操作符从数组中移除或删除一个元素。为了删除一个元素，我们在数组元素后面使用 delete 关键字。我们可以使用方括号 ([]) 从数组中访问元素。

Example

下面的代码包含了一个数字数组。我们使用“delete”操作符从数组的第一个索引中删除元素。在输出中，你可以观察到数组中的该元素被删除了，但是其他元素的位置保持不变。数组长度也保持不变。

<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

Deleting Predefined Object

JavaScript “delete”操作符可以删除预定义的对象，例如 Math、Date 等。不建议删除预定义的对象。一旦删除，你将无法访问这些对象的属性。

Example: Deleting Built-in Math Object

在下面的示例中，我们尝试删除 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

Can’t Delete Variables and Functions

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