首頁 > web前端 > js教程 > 主體

javascript如何在object中刪除屬性

醉折花枝作酒筹
發布: 2023-01-06 11:17:05
原創
24424 人瀏覽過

在js中,可以使用delete關鍵字在object中刪除屬性,語法格式為「delete object.屬性」。 delete操作符用於刪除物件的某個屬性,當delete操作符傳回true時表示可以刪除,回傳false表示不能刪除。

javascript如何在object中刪除屬性

本教學操作環境:windows7系統、javascript1.8.5版、Dell G3電腦。

從物件上刪除屬性的語義正確方法是使用delete關鍵字。

給定物件

const car = {
  color: 'blue',
  brand: 'Ford'
}
登入後複製

您可以使用以下命令從此物件中刪除屬性

delete car.brand
登入後複製

javascript如何在object中刪除屬性

它的工作方式還表示為:

delete car['brand']
delete car.brand
delete newCar['brand']
登入後複製

將屬性設為undefined 

如果您需要以非常最佳化的方式執行此操作,例如在循環中對大量物件進行操作時,另一種選擇是將屬性設為undefined 。

由於其性質, delete的性能要比簡單地重新分配給undefined 慢很多 ,比慢得多50倍。

但是,請記住,該屬性不會從物件中刪除。它的值被擦除了,但是如果您迭代該對象,它仍然存在:

使用delete仍然非常快,只有在您有充分理由這樣做時,才應研究此類性能問題,否則始終首選具有更清晰的語義和功能。

刪除屬性而不變更物件 

擴充資料:

delete 運算子用於刪除物件的某個屬性。

語法:

直接使用delete運算子

delete object.property 或 delete object['property']
登入後複製

例如:

var person = {
    name: 'abc'
    age: 18
}

delete person.name

console.log(person) // {age: 18}
登入後複製

傳回值:

delete運算子具有傳回值,傳回值為布林值,對於所有情況都是true,即使是刪除不存在的屬性也會傳回true,還是如上程式碼,不防列印一下回傳值看看

console.log(delete person.name) //true
console.log(delete person.job) //即使删除对象不存在的属性依然返回true
登入後複製

但也有例外的情況(返回false),如果屬性是不可配置屬性(對於不可配置屬性的概念,可以參考Object. defineProperty,我第一次聽說這個概念的時候也有點蒙圈), 在非嚴格模式下,返回false,在嚴格模式下則會拋出語法錯誤的例外。

具體使用

1. 物件屬性不存在

如上所述,如果刪除物件不存在的屬性,delete無效,但傳回值仍然為true

#2. 原型鏈上存在該同名屬性

如果delete操作符刪除屬性成功,則該屬性將永遠不存在,但是該物件原型鏈上存在該同名屬性,則該物件會從原型鏈上繼承該同名屬性。但和記憶體並無關聯,記憶體管理並不是delete操作符可以操作的,一點關係也沒有。記憶體管理推薦MDN這篇文章

// 构造函数
function Person() {
    this.name = "张三",
    this.job = "工程师"
}

Person.prototype.name = "李四"
// 创建实例对象
var p = new Person();
// 只删除p实例的name属性
delete p.name;
console.log(p) => // 通过打印如下图,name属性成功删除
登入後複製
接下来看: 
console.log(p.name) => // '李四' 依然可以访问到
登入後複製

所以可以看出delete操作只會在自身的屬性上起作用,這裡能console出來'張三',是作用域鏈的原因,當實例本身無該屬性的時候,就會去找它的protype身上有無該同名屬性。

3. 使用var宣告

使用var宣告的屬性(包含函數),不能從全域作用域或函數作用域刪除

在全域作用域中聲明屬性:

// 声明属性
var a = 1; // 等同于window.a
delete a  // 严格模式下抛出语法异常 SyntaxError
console.log(a); // 1 非严格模式下
console.log(delete a); // 非严格模式下false
登入後複製
// 声明函数
var fn = function () {
    console.log(1);
}
delete fn // 严格模式下抛出语法异常  SyntaxError
fn() // 1 非严格模式下delete失效, 函数依然存在

// 另外, 除字面量定义外,匿名函数定义函数效果也是一样
登入後複製

在函數作用域中宣告屬性(效果和在全域作用域中一樣):

// 局部作用域声明属性
funtion fn() {
    var a = 1;
    delete a; // 严格模式下抛出语法异常 SyntaxError
    console.log(a); // 1
    console.log(delete a); // 非严格模式下false
}

fn();
登入後複製
// 局部作用域声明函数
var fn = function() {
    var fn2 = function() {
        console.log(1);
    };
    delete fn2 // 严格模式下抛出语法异常 SyntaxError 
    console.log(delete fn2); // false 非严格模式下
    fn2(); // 1
}
fn();
登入後複製

另外, 需要注意的是,在物件中定義的函數是可以刪除的,和屬性一樣,例如

var person = {
    name: '张三',
    showName: function () {
        console.log(this.name);
    }
}
delete person.showName
console.log(person.showName) // undefined
登入後複製

4. let和const聲明的屬性

任何用let或const聲明的屬性不能夠從它被聲明的作用域中刪除,我試了下,和var的效果是一樣的,目前只能理解到這,如果知道的大神請指點下

5. 不可設定的屬性

Math, Array, Object等內置物件的屬性不可刪除

console.log(Array.length); // 1
delete Array.length
console.log(Array.from); 0
登入後複製
delete Array.prototype //严格模式下抛出异常
console.log(Array.prototype) // 非严格模式下,prototype依然存在, 可以自己试试了,自己动手,丰衣足食
console.log(Array.prototype.join); // 非严格模式下,join方法依然存在
登入後複製

要注意的是,只是這些內建物件的屬性不可刪除,內建物件的方法是可以刪除的,例如:

console.log(Array.forEach); // 内置函数
delete Array.forEach // 不用区分严格模式与否
console.log(Array.forEach); // undefined
登入後複製

Object.defineProperty()設定為不可設定的屬性,不可刪除

var person = {};
Object.defineProperty(person, 'name', {
    value: '张三',
    configurable: false
})
delete person.name // 严格模式下,抛出异常
console.log(person.name); // 张三
console.log(delete person.name); // 非严格模式false
登入後複製

var, let以及const創建的不可設定的屬性不能被delete操作刪除

var a = 'abc'; // 属于window 等同于window.a
var aVal = Object.getOwnPropertyDescriptor(window, 'a'); 
console.log(aVal);
//  aVal输入如下   
//    {
//       value: 2,
//         writable: true, 
//         enumerable: true, 
//         configurable: false // 由于是var声明的属性,所以为false
//     }
登入後複製
var a = 'abc'; // 属于window 等同于window.a
delete a // 严格模式下抛出异常
var aVal = Object.getOwnPropertyDescriptor(window, 'a'); 
console.log(aVal);
console.log(delete a); //false
//  非严格模式下,aVal输入如下   
//    {
//       value: 2,
//         writable: true, 
//         enumerable: true, 
//         configurable: false // 由于是var声明的属性,所以为false
//     }
登入後複製

如果開始沒有閱讀,再去看看吧Object. defineProperty。如果了解,可以直接略過。

6. 刪除數組

使用delete運算子刪除數組總某項元素時,被刪除的元素會從該數組中刪除,但是數組的length並不會改變

var arr = [1, 2, 3];
delete arr[1]
console.log(arr); // [1, undefined × 1, 2]
console.log(delete arr[1]) // true
console.log(arr[1]); // undefined
登入後複製

但是這裡有一個問題

console.log(1 in arr) // false
登入後複製

所以如果想把數組中某一項賦值成undefined時,不應該使用delete運算符,而是直接使用下邊賦值

arr[1] = undefined;
// 这样就可以解决上面的问题 
console.log(1 in arr) // true
登入後複製

【推薦學習:javascript高階教學

以上是javascript如何在object中刪除屬性的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板