数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法学如何重新实现 JavaScript 的 delete 方法？
JavaScript 中的 delete 运算符用于删除对象的属性、删除数组中的元素或删除集合对象中的元素。始终记住关于 delete 的以下几点：delete 是 JavaScript 中的关键字，因此不应更改它，并且不能在单个变量中使用 delete 对象，因为它仅用于删除对象的属性。
让我们详细了解如何在 JavaScript 中实现 delete 运算符。
删除对象属性
在 JavaScript 中，我们将使用键值对编写对象，例如
const Employee = {
firstname: 'Devika',
lastname: 'Rani',
age : 25,
department : web development
};
语法
对象中 delete 运算符的语法，例如：
delete expression
这里，表达式应为属性，即
delete object or delete object.property or delete object['property']
此运算符将返回 true 或 false。如果它删除了属性，则返回 true。如果在删除时对象属性不存在，则返回 true，但不会对对象产生任何影响。如果我们尝试使用 delete 关键字删除任何变量或函数，它将返回 false。
现在，让我们来看一个从上面提到的对象中删除 age 属性的示例。
示例
<!DOCTYPE html>
<html>
<body>
<h2>Deleting an object property</h2>
<p>Before delete a property :
<span id="showMessage" style="color: darkgreen"></span>
</p>
<p>After delete a property:
<span id="result" style="color: darkgreen"></span>
</P>
<script>
let employee = {
firstName: "Devika",
lastName: "Rani",
age : 25,
role : "web developer"
}
document.getElementById('showMessage').innerHTML =employee.firstName + " " +employee.lastName + " is " + employee.age +" old and working as " + employee.role;
delete employee.age; // returns as true
document.getElementById('result').innerHTML = employee.firstName + " " +employee.lastName + " is " + employee.age +" old and working as " + employee.role;
</script>
</body>
</html>
这里，delete 关键字用于从 employee 对象中删除 age 属性。删除 age 属性后，我们尝试从 employee 对象中获取 age 属性，它显示为 undefined。
示例
让我们来看一个从对象中删除不存在的属性的示例。
<!DOCTYPE html>
<html>
<body>
<h2>Deleting an object property</h2>
<p>Before delete a property :
<span id="showMessage" style="color: darkgreen"></span>
</p>
<p>After delete a property:
<span id="result" style="color: darkgreen"></span>
</P>
<script>
let employee = {
firstName: "Devika",
lastName: "Rani",
age : 25,
role : "web developer"
}
document.getElementById('showMessage').innerHTML = employee.firstName + " " +employee.lastName + " is " + employee.age +" old and working as " + employee.role;
delete employee.age; // returns as true
delete employee.role; // returns as true
delete employee.salary; // returns as true
document.getElementById('result').innerHTML =employee.firstName + " " +employee.lastName + " is " + employee.age +" old and working as " + employee.role;
</script>
</body>
</html>
示例
让我们来看另一个删除变量的示例。
<!DOCTYPE html>
<html>
<body>
<h2>Deleting a variable</h2>
<p>After delete a variable:
<span id="result"></span>
</p>
<script>
let num1 = 20;
let num2 = 30;
let sum = (a, b) => {
return a + b;
}
if(delete num1){ // returns false
document.getElementById('result').innerHTML ="variable num is deleted."
} else {
document.getElementById('result').innerHTML = num1
}
</script>
</body>
</html>
在这里，我们可以观察到 delete 对于变量不起作用。即使对变量使用 delete 也不会对其产生任何影响。
示例
现在，我们将检查删除全局变量的情况。我们都知道未声明的变量将被视为全局变量。让我们来看一个例子
<!DOCTYPE html>
<html>
<body>
<h2>Deleting a global variable</h2>
<p id="result">
</p>
<script>
value = 5;
try{
delete value; // returns true
document.getElementById('result').innerHTML = value;
}
catch(e){
document.getElementById('result').innerHTML = e;
}
</script>
</body>
</html>
Object.Prototype delete
现在，我们将检查如何删除具有原型链的对象的属性。
示例
<!DOCTYPE html>
<html>
<body>
<h2>Deleting a prototype object property</h2>
<p>Object value :
<span id="check"></span>
</p>
<p>Object value after delete:
<span id="checkDelete"></span>
</p>
<p>Object.prototype value after delete:
<span id="checkProtoDelete"></span>
</p>
<script>
function check() {
this.value = 3;
}
check.prototype.value = 8;
var newCheck = new check();
// check.value is associated with its own property.
document.getElementById('check').innerHTML = newCheck.value;
// Delete the own property within the newCheck object.
delete newCheck.value; // returns true
// newCheck.value is still available in the prototype chain.
document.getElementById('checkDelete').innerHTML = newCheck.value;
// Deleting the property on the prototype.
delete check.prototype.value; // returns true
// The "value" property can no longer be inherited from check since it has been deleted.
document.getElementById('checkProtoDelete').innerHTML = newCheck.value;
</script>
</body>
</html>
delete 方法的另一个特点是，此运算符不会删除属性值，而是删除属性本身。让我们来看一个例子来详细检查
示例
<!DOCTYPE html>
<html>
<body>
<h2>Deleting a property</h2>
<p id = "result"></p>
<script>
let employee = {
firstName: "Sarah",
lastName: "Max",
age: 25
}
let age = employee.age;
delete employee.age;
document.getElementById("result").innerHTML = age;
</script>
</body>
</html>
在这里，我们可以观察到输出显示 delete 运算符已删除对象的属性，但该值仍然存在于内存中。
删除数组元素
在 JavaScript 中，我们知道数组的 typeof 也是对象。因此，我们也可以对数组进行 delete 操作。但是，这里我们有一个关于数组 delete 运算符的问题，即从数组中删除元素不会影响数组的长度。删除元素的位置将显示为空。让我们来看一个例子
示例
<!DOCTYPE html>
<html>
<body>
<h2>Deleting an array</h2>
<p>Length of the array after delete an element :
<span id = "arrLength"></span>
</p>
<p>Array elements after delete an element :
<span id = "result"></span>
</p>
<script>
let arr = [1, 2, 3]
delete arr[1];
document.getElementById("arrLength").innerHTML = arr.length;
document.getElementById("result").innerHTML = arr;
</script>
</body>
</html>
在这里，我们可以看到第二个元素为空。但长度仍然相同。因此，对于从数组中删除元素，pop()、splice() 或 shift() 方法是更好的方法。
我们已经看到了对象和变量上的 delete 运算符。我们已经看到了原型链对象上的 delete 运算符。我们已经看到了从数组中删除元素。希望本文能讲解 JavaScript 中 delete 运算符的知识。
251 次查看
