如何在 TypeScript 中使用 delete 运算符?
您是否尝试过在 TypeScript 中删除对象属性?那么您肯定遇到过"delete"运算符。
在 TypeScript 中，delete 运算符仅允许删除未定义、可选或任意对象属性。此外，它会根据是否删除属性返回布尔值。
下面，我们将通过不同的示例了解 TypeScript 中 delete 运算符的不同用例。
使用 Delete 运算符删除对象属性
delete 运算符的主要用途是删除对象的可选属性。我们可以使用 delete 关键字作为运算符，并将对象属性作为操作数值。使用 delete 关键字删除对象属性会删除对象属性及其值。
语法
用户可以按照以下语法使用 delete 运算符。我们已经使用对象属性作为删除运算符的操作数。
let object: {
property1?: string; property2: string
} = {
property1: "value1",
property2: "value2",
};
delete object.property1;
步骤
步骤 1 − 使用"interface"关键字创建名为 objectInterface 的接口。
步骤 2 − 定义接口中的属性及其类型。我们将 prop1 定义为字符串类型，prop2 定义为布尔值类型，并且是可选的，而 prop3 定义为数字类型。
步骤 3 − 定义名为 obj 且类型为 objectInterface 的对象，并初始化对象属性值。
步骤 4 − 尝试使用 delete 运算符删除 prop1，由于它不是可选属性或任何类型的属性，因此会引发错误。
步骤 5 − 现在，使用 delete 运算符删除 prop2。我们可以删除它而不会出现任何错误，并且在成功删除时它会返回 true 值。
示例 1
在下面的示例中，我们使用 delete 运算符删除了对象的可选属性。
在输出中，我们可以观察到它在删除属性及其值时返回 true。此外，当我们在删除后打印对象属性时，它会打印 undefined。
// 对象的接口
// prop2 是可选的
interface objectInterface {
prop1: string;
prop2?: boolean;
prop3: number;
}
// 定义 objectInteface 类型的对象
let obj: objectInterface = {
prop1: "TutorialsPoint",
prop2: true,
prop3: 30,
};
// 删除 obj 的 prop2
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 代码 -
// 定义 objectInteface 类型的对象
var obj = {
prop1: "TutorialsPoint",
prop2: true,
prop3: 30
};
// 删除 obj 的 prop2
console.log("删除 obj 的 prop2 可选属性。");
console.log(console.log(delete obj.prop2));
console.log("删除 obj 的 prop2 属性后，其值为 " + obj.prop2);
输出
以上代码将产生以下输出 -
删除 obj 的 prop2 可选属性。 true undefined 删除 obj 的 prop2 属性后，其值为 undefined
示例 2
在下面的示例中，我们创建了名为 sample 的任意类型的对象。这意味着每个属性都可以是任意类型，包括可选类型和未定义类型。
用户可以看到，我们没有单独将 sample 对象的任何属性声明为可选类型。不过，我们可以删除它们，因为整个对象是可选的。
// 创建 any 类型的示例对象
let sample: any = {
key: true,
road_color: "black",
total: 900,
};
// 删除示例对象的属性
console.log("删除 total 属性 ");
console.log(delete sample.total);
console.log("删除整个对象");
console.log(delete sample.road_color);
编译后，它负责生成以下 JavaScript 代码 -
// 创建 any 类型的示例对象
var sample = {
key: true,
road_color: "black",
total: 900
};
// 删除示例对象的属性
console.log("删除 total 属性 ");
console.log(delete sample.total);
console.log("删除整个对象");
console.log(delete sample.road_color);
输出
以上代码将产生以下输出 -
删除 total 属性 true 删除整个对象 true
使用 Delete 运算符删除全局变量
delete 运算符只允许对象属性作为操作数，而全局变量是 window 对象的属性。因此，我们可以使用 delete 运算符删除全局变量。
此外，假设我们直接将全局变量作为 delete 运算符的操作数。在这种情况下，它会引发一条错误消息，例如"删除运算符的操作数必须是属性引用"。为了消除此错误，我们将使用"this"关键字作为全局变量的引用，该全局变量指向全局对象。
语法
用户可以按照以下语法使用 delete 运算符删除全局变量。
var gloabl_var1: undefined; console.log(delete this.gloabl_var1);
此处 var1 是一个需要向下舍入的值。
示例
在此示例中，我们使用 delete 运算符删除 gloabl_var1。我们使用此关键字作为 global_var1 的引用，以便将全局变量用作窗口对象的属性。
在输出中，我们看到 delete 运算符返回 true，表示全局变量已成功删除。然而，它的值保持不变，因为删除全局变量后，内存中仍然保留着它们的值。
// 要删除全局变量，它必须是可选的或任意类型的
var gloabl_var1: number | undefined = 6054;
console.log("删除 global_var1");
// 使用此关键字将 global_var1 作为窗口对象的属性进行访问
console.log(delete this.gloabl_var1);
console.log(
"After deleting the global_var1, observing its value which is " + gloabl_var1
);
编译后，它将生成以下 JavaScript 代码 -
// 要删除全局变量，它必须是可选的或任意类型
var gloabl_var1 = 6054;
console.log("删除 global_var1");
//使用此关键字将 global_var1 作为窗口对象的属性进行访问
console.log(delete this.gloabl_var1);
console.log("删除 global_var1 后，观察其值为 " + gloabl_var1);
输出
以上代码将产生以下输出 -
删除 global_var1 true 删除 global_var1 后，观察其值为 6054
使用 Delete 运算符删除数组值
由于数组是对象的实例，我们可以使用 Delete 运算符删除数组值。我们可以将单个数组元素用作 Delete 运算符的操作数。
语法
用户可以按照以下语法使用 Delete 运算符删除数组值。这里，我们不需要将数组属性设为可选。
let arr: Array<number> = [10,20]; console.log(delete arr[index]);
示例
此示例演示了如何使用 delete 运算符删除数组值。我们定义了字符串数组，并删除了第一个和第二个索引处的值。
此外，我们可以在输出中看到，消息数组中第一个和第二个索引处的值变为未定义。
let message: Array<string> = ["Welcome", "To", "The", "TutorialsPoint", "!"];
console.log("分别删除数组的第二个和第三个值。");
console.log(delete message[1]);
console.log(delete message[2]);
console.log("删除数组的第二个和第三个值后的结果为");
console.log(message[1]);
console.log(message[2]);
编译后，它负责生成以下 JavaScript 代码 -
var message = ["Welcome", "To", "The", "TutorialsPoint", "!"];
console.log("分别删除数组的第二个和第三个值。");
console.log(delete message[1]);
console.log(delete message[2]);
console.log("删除数组的第二个和第三个值后的结果为");
console.log(message[1]);
console.log(message[2]);
输出
上述代码将生成以下输出 -
分别删除数组的第二个和第三个值。 true true 删除数组的第二个和第三个值后，结果为 undefined undefined
我们学习了如何将 delete 运算符用于普通对象、全局变量和数组。用户需要记住，只能使用 delete 运算符删除对象的可选属性。否则会引发错误。
此外，用户还可以将 delete 运算符用于任何变量，即对象的实例。我们可以创建函数的对象，并删除函数的属性。
