資料結構
網路
關係資料庫管理系統(RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝學
法學如何在TypeScript中使用delete運算子？
你有沒有嘗試過在TypeScript中刪除物件屬性？那麼你肯定遇到過“delete”運算子。
在TypeScript中，delete運算子只允許刪除未定義的、可選的或任何型別的物件屬性。此外，它根據是否刪除屬性返回布林值。
下面，我們將透過不同的例子來了解delete運算子在TypeScript中的不同用例。
使用Delete運算子刪除物件屬性
delete運算子的主要用途是刪除物件的可選屬性。我們可以使用delete關鍵字作為運算子，並將物件屬性作為運算元的值。使用delete關鍵字刪除物件屬性會刪除物件屬性及其值。
語法
使用者可以按照以下語法使用delete運算子。我們使用物件屬性作為delete運算子的運算元。
let object: {
property1?: string; property2: string
} = {
property1: "value1",
property2: "value2",
};
delete object.property1;
步驟
步驟1 − 使用“interface”關鍵字建立一個名為objectInteface的介面。
步驟2 − 在介面中定義屬性及其型別。我們將prop1定義為字串型別，prop2定義為布林型別（且為可選），prop3定義為數字型別。
步驟3 − 定義名為obj的objectInterface型別的物件，並初始化物件屬性值。
步驟4 − 嘗試使用delete運算子刪除prop1，它將引發錯誤，因為它不是可選屬性或任何型別的屬性。
步驟5 − 現在，使用delete運算子刪除prop2。我們可以毫無錯誤地刪除它，並且它在成功刪除後返回true值。
示例1
在下面的示例中，我們使用了delete運算子來刪除物件的可選屬性。
在輸出中，我們可以看到它在屬性及其值刪除時返回true。此外，當我們在刪除後列印物件屬性時，它會列印undefined。
// Inteface for the objects
// prop2 is an optional
interface objectInterface {
prop1: string;
prop2?: boolean;
prop3: number;
}
// defining the object of type objectInteface
let obj: objectInterface = {
prop1: "TutorialsPoint",
prop2: true,
prop3: 30,
};
// delete the prop2 of obj
console.log("Deleting the prop2 optional property of the obj.");
console.log(console.log(delete obj.prop2));
console.log(
"Value of the prop2 property of obj, after deleting it is " + obj.prop2
);
編譯後，它將生成以下JavaScript程式碼：
// defining the object of type objectInteface
var obj = {
prop1: "TutorialsPoint",
prop2: true,
prop3: 30
};
// delete the prop2 of obj
console.log("Deleting the prop2 optional property of the obj.");
console.log(console.log(delete obj.prop2));
console.log("Value of the prop2 property of obj, after deleting it is " + obj.prop2);
輸出
以上程式碼將產生以下輸出：
Deleting the prop2 optional property of the obj. true undefined Value of the prop2 property of obj, after deleting it is undefined
示例2
在下面的示例中，我們建立了一個名為sample的任意型別的物件。這意味著每個屬性都可以是任意型別，這也包括可選和未定義的。
使用者可以看到我們沒有單獨宣告sample物件的任何屬性為可選。但是，我們仍然可以刪除它們，因為整個物件是可選的。
// Creating the sample object of type any
let sample: any = {
key: true,
road_color: "black",
total: 900,
};
// deleting the sample object's properties
console.log("Deleting the total property ");
console.log(delete sample.total);
console.log("Deleting the whole object");
console.log(delete sample.road_color);
編譯後，它將生成以下JavaScript程式碼：
// Creating the sample object of type any
var sample = {
key: true,
road_color: "black",
total: 900
};
// deleting the sample object's properties
console.log("Deleting the total property ");
console.log(delete sample.total);
console.log("Deleting the whole object");
console.log(delete sample.road_color);
輸出
以上程式碼將產生以下輸出：
Deleting the total property true Deleting the whole object true
使用Delete運算子刪除全域性變數
delete運算子只允許物件屬性作為運算元，但全域性變數是window物件的屬性。因此，我們可以使用delete運算子刪除全域性變數。
此外，假設我們直接使用全域性變數作為delete運算子的運算元。在這種情況下，它將引發類似於“delete運算子的運算元必須是屬性引用”的錯誤訊息。為了消除錯誤，我們將使用“this”關鍵字作為全域性變數的引用，它指的是全域性物件。
語法
使用者可以按照以下語法使用delete運算子刪除全域性變數。
var gloabl_var1: undefined; console.log(delete this.gloabl_var1);
這裡var1是一個需要向下取整的值。
示例
在這個例子中，我們正在使用delete運算子刪除gloabl_var1。我們使用了this關鍵字作為gloabl_var1的引用，以便將全域性變數用作window物件的屬性。
在輸出中，我們看到delete運算子返回true，這意味著全域性變數已成功刪除。但是，它的值仍然相同，因為即使在刪除後，記憶體也會保留全域性變數的值。
// To delete global variables, it must be optional or type of any
var gloabl_var1: number | undefined = 6054;
console.log("Deleting the global_var1");
// use this keyword to access global_var1 as a property of the window object
console.log(delete this.gloabl_var1);
console.log(
"After deleting the global_var1, observing its value which is " + gloabl_var1
);
編譯後，它將生成以下JavaScript程式碼：
// To delete global variables, it must be optional or type of any
var gloabl_var1 = 6054;
console.log("Deleting the global_var1");
// use this keyword to access global_var1 as a property of the window object
console.log(delete this.gloabl_var1);
console.log("After deleting the global_var1, observing its value which is " + gloabl_var1);
輸出
以上程式碼將產生以下輸出：
Deleting the global_var1 true After deleting the global_var1, observing its value which is 6054
使用Delete運算子刪除陣列值
由於陣列是物件的例項，我們可以使用delete運算子刪除陣列值。我們可以使用單個數組元素作為delete運算子的運算元。
語法
使用者可以按照以下語法使用delete運算子刪除陣列值。在這裡，我們不需要使陣列屬性可選。
let arr: Array<number> = [10,20]; console.log(delete arr[index]);
示例
此示例演示了使用delete運算子刪除陣列值。我們定義了字串陣列並從第一個和第二個索引刪除了值。
此外，我們可以在輸出中看到message陣列中第一個和第二個索引的值變為undefined。
let message: Array<string> = ["Welcome", "To", "The", "TutorialsPoint", "!"];
console.log("Deleting the second and third value of the array respectively.");
console.log(delete message[1]);
console.log(delete message[2]);
console.log("After deleting the second and third value of the array is");
console.log(message[1]);
console.log(message[2]);
編譯後，它將生成以下JavaScript程式碼：
var message = ["Welcome", "To", "The", "TutorialsPoint", "!"];
console.log("Deleting the second and third value of the array respectively.");
console.log(delete message[1]);
console.log(delete message[2]);
console.log("After deleting the second and third value of the array is");
console.log(message[1]);
console.log(message[2]);
輸出
以上程式碼將產生以下輸出：
Deleting the second and third value of the array respectively. true true After deleting the second and third value of the array is undefined undefined
我們學習瞭如何將delete運算子與普通物件、全域性變數和陣列一起使用。使用者需要注意，他們只能使用delete運算子刪除物件的可選屬性。否則，它將引發錯誤。
此外，使用者可以將delete運算子與任何變數一起使用，該變數是物件的例項。我們可以建立函式的物件，並可以刪除函式的屬性。
20K+ 次瀏覽
