JavaScript中的delete操作符

gaosboy 發(fā)布于2019-08-21 11:49 / 3318人閱讀

摘要：作用操作符用于刪除對(duì)象的某個(gè)屬性。但和內(nèi)存并無關(guān)聯(lián)，內(nèi)存管理并不是操作符可以操作的，而且一點(diǎn)關(guān)系也沒有。

文章同步到github

在JavaScript中，delete操作符用的比較少，但是還是比較重要的，我本人面試的時(shí)候就遇到過關(guān)于delete的問題，下面總結(jié)一下delete的具體用法。

作用:

delete 操作符用于刪除對(duì)象的某個(gè)屬性。

語法:

直接使用delete操作符

delete object.property 或 delete object["property"]

例如:

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

delete person.name

console.log(person) // {age: 18}

返回值:

delete操作符具有返回值，返回值為布爾值，對(duì)于所有情況都是true，即使是刪除不存在的屬性也會(huì)返回true，還是如上代碼，不防打印一下返回值看看

console.log(delete person.name) //true
console.log(delete person.job) //即使刪除對(duì)象不存在的屬性依然返回true

但是也有例外的情況(返回false)，如果屬性是不可配置屬性(對(duì)于不可配置屬性的概念，可以參考Object. defineProperty，我第一次聽說這個(gè)概念的時(shí)候也有點(diǎn)蒙圈), 在非嚴(yán)格模式下，返回false，在嚴(yán)格模式下則會(huì)拋出語法錯(cuò)誤的異常。

具體使用 1. 對(duì)象屬性不存在

如上所述，如果刪除對(duì)象不存在的屬性，delete無效，但是返回值仍然為true

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

如果delete操作符刪除屬性成功，則該屬性將永遠(yuǎn)不存在，但是該對(duì)象原型鏈上存在該同名屬性，則該對(duì)象會(huì)從原型鏈上繼承該同名屬性。但和內(nèi)存并無關(guān)聯(lián)，內(nèi)存管理并不是delete操作符可以操作的，而且一點(diǎn)關(guān)系也沒有。內(nèi)存管理推薦MDN這篇文章

// 構(gòu)造函數(shù)
function Person() {
    this.name = "張三",
    this.job = "工程師"
}

Person.prototype.name = "李四"
// 創(chuàng)建實(shí)例對(duì)象
var p = new Person();
// 只刪除p實(shí)例的name屬性
delete p.name;
console.log(p) => // 通過打印如下圖，name屬性成功刪除

接下來看: 
console.log(p.name) => // "張三" 依然可以訪問到

所以可以看出delete操作只會(huì)在自身的屬性上起作用，這里能console出來"張三"，是作用域鏈的原因，當(dāng)實(shí)例本身無該屬性的時(shí)候，就會(huì)去找它的protype身上有無該同名屬性。

3. 使用var聲明

使用var聲明的屬性(包括函數(shù))，不能從全局作用域或函數(shù)作用域中刪除

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

// 聲明屬性
var a = 1; // 等同于window.a
delete a  // 嚴(yán)格模式下拋出語法異常 SyntaxError
console.log(a); // 1 非嚴(yán)格模式下
console.log(delete a); // 非嚴(yán)格模式下false

// 聲明函數(shù)
var fn = function () {
    console.log(1);
}
delete fn // 嚴(yán)格模式下拋出語法異常  SyntaxError
fn() // 1 非嚴(yán)格模式下delete失效, 函數(shù)依然存在

// 另外， 除字面量定義外，匿名函數(shù)定義函數(shù)效果也是一樣

在函數(shù)作用域中聲明屬性(效果和在全局作用域中一樣):

// 局部作用域聲明屬性
funtion fn() {
    var a = 1;
    delete a; // 嚴(yán)格模式下拋出語法異常 SyntaxError
    console.log(a); // 1
    console.log(delete a); // 非嚴(yán)格模式下false
}

fn();

// 局部作用域聲明函數(shù)
var fn = function() {
    var fn2 = function() {
        console.log(1);
    };
    delete fn2 // 嚴(yán)格模式下拋出語法異常 SyntaxError 
    console.log(delete fn2); // false 非嚴(yán)格模式下
    fn2(); // 1
}
fn();

另外，需要注意的是，在對(duì)象中定義的函數(shù)是可以刪除的，和屬性一樣，比如

var person = {
    name: "張三",
    showName: function () {
        console.log(this.name);
    }
}
delete person.showName
console.log(person.showName) // undefined

4. let和const聲明的屬性

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

5. 不可設(shè)置的屬性 Math, Array, Object等內(nèi)置對(duì)象的屬性不可刪除

console.log(Array.length); // 1
delete Array.length
console.log(Array.from); 0

delete Array.prototype //嚴(yán)格模式下拋出異常
console.log(Array.prototype) // 非嚴(yán)格模式下，prototype依然存在, 可以自己試試了，自己動(dòng)手，豐衣足食
console.log(Array.prototype.join); // 非嚴(yán)格模式下，join方法依然存在

需要注意的是，只是這些內(nèi)置對(duì)象的屬性不可刪除，內(nèi)置對(duì)象的方法是可以刪除的，比如:

console.log(Array.forEach); // 內(nèi)置函數(shù)
delete Array.forEach // 不用區(qū)分嚴(yán)格模式與否
console.log(Array.forEach); // undefined

Object.defineProperty()設(shè)置為不可設(shè)置的屬性,不可刪除

var person = {};
Object.defineProperty(person, "name", {
    value: "張三",
    configurable: false
})
delete person.name // 嚴(yán)格模式下，拋出異常
console.log(person.name); // 張三
console.log(delete person.name); // 非嚴(yán)格模式false

var, let以及const創(chuàng)建的不可設(shè)置的屬性不能被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 // 嚴(yán)格模式下拋出異常
var aVal = Object.getOwnPropertyDescriptor(window, "a"); 
console.log(aVal);
console.log(delete a); //false
//  非嚴(yán)格模式下，aVal輸入如下   
//    {
//       value: 2,
//         writable: true, 
//         enumerable: true, 
//         configurable: false // 由于是var聲明的屬性，所以為false
//     }

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

6. 刪除數(shù)組

使用delete操作符刪除數(shù)組總某項(xiàng)元素時(shí)，被刪除的元素會(huì)從該數(shù)組中刪除，但是數(shù)組的length并不會(huì)改變

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

但是這里存在一個(gè)問題

console.log(1 in arr) // false

所以如果想把數(shù)組中某一項(xiàng)賦值成undefined時(shí)，不應(yīng)該使用delete操作符,而是直接使用下邊賦值

arr[1] = undefined;
// 這樣就可以解決上面的問題 
console.log(1 in arr) // true

今天花了點(diǎn)時(shí)間，把關(guān)于delete的問題總結(jié)了一下, 方便自己查閱, 也希望能幫助需要的人, 歡迎大神指點(diǎn)與補(bǔ)充,如果你閱讀完，感覺也還有收藏價(jià)值，那還等什么，趕快收藏吧！

云服務(wù)器 GPU云服務(wù)器 javascript_delete javascript中的 javaScript中的this javascript中的函數(shù)

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/87155.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

gaosboy

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

子網(wǎng)劃分及計(jì)算

閱讀 1463·2021-11-25 09:43
騰訊云服務(wù)器2月10日推薦,2核4G6M低至1499元/3年,100%CPU性能

閱讀 2075·2021-07-26 23:38
jQuery.extend()詳解

閱讀 767·2019-08-30 15:53
為你的網(wǎng)頁添加深色模式

閱讀 2312·2019-08-30 15:43
css animation 常用的動(dòng)畫效果

閱讀 1200·2019-08-29 18:40
requestAnimationFrame 兼容方案

閱讀 1996·2019-08-26 13:28
前端面試知識(shí)點(diǎn)整理（附答案）

閱讀 2010·2019-08-23 18:20
裝飾器與元數(shù)據(jù)反射（4）元數(shù)據(jù)反射

閱讀 570·2019-08-23 15:07

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購！

JavaScript中的delete操作符

相關(guān)文章