TypeScript 使用删除操作符

你有没有尝试过在TypeScript中删除对象的属性？那么你肯定遇到过 “删除 “操作符。

在TypeScript中，删除操作符只允许删除未定义的、可选的或任何对象属性。此外，它还会根据是否删除该属性返回布尔值。

下面，我们将通过不同的例子了解TypeScript中删除操作符的不同使用情况。

使用删除操作符来删除对象属性

删除操作符的主要用途是删除一个对象的可选属性。我们可以用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步 – 现在，使用删除操作符删除prop2。我们可以在没有任何错误的情况下删除它，并且在成功删除后返回真值。

示例 1

在下面的例子中，我们使用了删除操作符来删除对象的可选属性。

在输出中，我们可以观察到，它在删除属性和其值时返回真。另外，当我们打印删除后的对象属性时，它打印的是未定义。

// 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
);

// 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的任意类型的对象。这意味着每个属性都可以是任意类型，这也包括可选和未定义。

用户可以看到，我们并没有单独声明样本对象的任何属性是可选的。不过，我们还是可以删除它们，因为整个对象都是可选的。

// 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);

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

使用删除操作符来删除全局变量

删除操作符只允许将对象属性作为操作数，但全局变量是窗口对象的属性。因此，我们可以使用删除操作符来删除全局变量。

另外，假设我们直接使用全局变量作为删除操作符的操作数。在这种情况下，它将引发一个错误信息，如 “删除操作符的操作数必须是一个属性引用”。为了消除这个错误，我们将使用’this’关键字作为全局变量的引用，它指的是全局对象。

语法

用户可以按照下面的语法，使用删除操作符来删除全局变量。

var gloabl_var1: undefined;
console.log(delete this.gloabl_var1);

这里var1是一个需要被四舍五入的值。

示例

在这个例子中，我们使用删除操作符来删除gloabl_var1。我们用这个关键字作为global_var1的引用，将全局变量作为窗口对象的属性。

在输出中，我们看到删除操作符返回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
);

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

使用删除操作符来删除数组值

由于数组是对象的实例，我们可以使用删除操作符来删除数组的值。我们可以使用单个数组元素作为删除操作符的操作数。

语法

用户可以按照下面的语法，使用删除操作符删除数组的值。在这里，我们不需要让数组属性成为可选项。

let arr: Array<number> = [10,20];
console.log(delete arr[index]);

示例

这个例子演示了使用删除操作符删除数组的值。我们定义了字符串数组，并删除了第一个和第二个索引中的值。

另外，我们可以在输出中看到，在消息数组中，第一个和第二个索引的值变得未定义。

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]);

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