資料結構
網路
關係資料庫管理系統 (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 次檢視
