JavaScript刪除和清空物件屬性

本文介紹一下如何利用JavaScript刪除物件中的屬性。

這是非常基礎簡單的操作，可能剛接觸JavaScript的朋友會產生一些誤操作。

首先看一段程式碼例項：

[JavaScript] 純文字檢視 複製程式碼
let antzone = {
  webName: "螞蟻部落",
  url:"www.softwhy.com",
  address:"青島市南區",
  age:4
}
antzone.webName="";
antzone.age=undefined;

可能以為將物件屬性值設定為空或者undefined等表示空的值就是刪除屬性。

然而事實僅僅是將屬性值設定為空或者undefined，屬性依然存在。

程式碼例項如下：

[JavaScript] 純文字檢視 複製程式碼執行程式碼
let antzone = {
  webName: "螞蟻部落",
  url:"www.softwhy.com",
  address:"青島市南區",
  age:4
}
antzone.webName="";
antzone.age=undefined;
console.log(Object.keys(antzone));

程式碼執行效果截圖如下：

可以看到物件的屬性並沒有被刪除。

Object.keys()方法可以獲取物件的可列舉自有屬性名稱。

具體用法可以參閱Object.keys()方法一章節。

一.刪除物件指定屬性：

非常簡單的操作，使用delet運算子即可實現。

程式碼例項如下：

[JavaScript] 純文字檢視 複製程式碼執行程式碼
let antzone = {
  webName: "螞蟻部落",
  url:"www.softwhy.com",
  address:"青島市南區",
  age:4
}
delete antzone.age;
console.log(Object.keys(antzone));

程式碼執行效果截圖如下：

上面的程式碼通過delete運算子可以刪除age屬性。

並不是將age屬性值賦值為空或者undefined等，而是切切實實把它從物件中刪除。

二.清空物件屬性：

操作也非常簡單，通過迴圈遍歷挨個刪除即可。

程式碼例項如下：

[JavaScript] 純文字檢視 複製程式碼執行程式碼
let antzone = {
  webName: "螞蟻部落",
  url:"www.softwhy.com",
  address:"青島市南區",
  age:4
}
for(let key in antzone){
  delete antzone[key];
}
console.log(Object.keys(antzone));

程式碼執行效果截圖如下：

由執行效果截圖可以看到，物件中已經被清空。

三.並不是所有屬性都是可以刪除的：

（1）.原型鏈繼承的屬性不能刪除。

（2）.被凍結或者密封物件的屬性是不可以被刪除的。

原型鏈這個非常好理解，因為繼承的屬性本質上不是當前物件自有，而是所有物件例項共享。

這個屬性本質不是位於當前物件，而是在原型鏈某個物件之上，這怎麼能刪除。

關於被凍結和密封物件的屬性不能被刪除，可以參閱如下兩篇文章：

（1）.Object.seal()方法一章節。

（2）.Object.freeze()方法一章節。