关于delete 语法的本质浅谈

心已赠人 2024-03-24 21:21 21阅读 0赞

![67034b69e677335c69940b8505778144.jpeg][]

本文主要为大家介绍了delete 语法的本质深入解析，有需要的朋友可以借鉴参考下，希望能够有所帮助

### delete 的返回值 ###

delete 语法是用于 JS 删除对象属性和数组元素

返回 `boolean` 类型

true 代表**删除没有发生异常**，但不一定是删除成功

false 一定是删除失败

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 </td> 
 <td> <code>var</code> <code>obj = { </code> <code>&nbsp;&nbsp;</code><code>a: 1,</code> <code>&nbsp;&nbsp;</code><code>b: 2</code> <code>};</code> <code>// 删除对象属性</code> <code>console.log(</code><code>delete</code> <code>obj.a); </code><code>// true</code> <code>// 删除对象不存在的属性</code> <code>console.log(</code><code>delete</code> <code>obj.name); </code><code>// true</code> <code>// 删除全局对象 obj ，因为 var 声明默认会挂载到全局 window 对象上</code> <code>console.log(</code><code>delete</code> <code>obj); </code><code>// false</code> <code>console.log(obj); </code><code>// { b: 2 }</code> </td> 
 </tr> 
 </tbody> 
</table>

### delete 不能删除哪些属性 ###

*  任何用 `var` 声明的属性，不能从全局或函数作用域删除
 *  任何用 `let` 或者 `const` 声明的属性 ，不能从它声明的作用域删除
 *  不可配置（`configurable: false`）的属性不能删除

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 </td> 
 <td> <code>// var</code> <code>function</code> <code>testVar() { </code> <code>&nbsp;&nbsp;</code><code>var</code> <code>a = 1;</code> <code>&nbsp;&nbsp;</code><code>console.log(</code><code>delete</code> <code>a); </code><code>// false</code> <code>&nbsp;&nbsp;</code><code>console.log(a); </code><code>// 1</code> <code>}</code> <code>testVar();</code> <code>// let const</code> <code>function</code> <code>testLet() { </code> <code>&nbsp;&nbsp;</code><code>let a = 2;</code> <code>&nbsp;&nbsp;</code><code>console.log(</code><code>delete</code> <code>a); </code><code>// false</code> <code>&nbsp;&nbsp;</code><code>console.log(a); </code><code>// 2</code> <code>}</code> <code>testLet();</code> <code>// configurable</code> <code>const obj = {};</code> <code>Object.defineProperty(obj, </code><code>"name"</code><code>, { configurable: </code><code>false</code> <code>});</code> <code>console.log(</code><code>delete</code> <code>obj.name); </code><code>// false</code> <code>console.log(</code><code>"delete undefined"</code><code>, </code><code>delete</code> <code>undefined);</code> <code>console.log(Object.getOwnPropertyDescriptor(global, </code><code>"undefined"</code><code>));</code> <code>console.log(</code><code>"delete Infinity"</code><code>, </code><code>delete</code> <code>Infinity);</code> <code>console.log(</code><code>"delete NaN"</code><code>, </code><code>delete</code> <code>NaN);</code> </td> 
 </tr> 
 </tbody> 
</table>

### delete 删除原型上的属性 ###

*  不会遍历原型链删除

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 </td> 
 <td> <code>function</code> <code>User() { </code> <code>&nbsp;&nbsp;</code><code>this</code><code>.name = </code><code>"云牧"</code><code>;</code> <code>}</code> <code>User.prototype.name = </code><code>"黛玉"</code><code>;</code> <code>const p = </code><code>new</code> <code>User();</code> <code>// 删除的是 p 对象的自身属性</code> <code>console.log(</code><code>delete</code> <code>p.name); </code><code>// true</code> <code>// p.name 依然可用，因为原型链可以查找到 name</code> <code>console.log(p.name); </code><code>// 黛玉</code> <code>// 删除原型上的属性</code> <code>console.log(</code><code>delete</code> <code>User.prototype.name); </code><code>// true</code> <code>// 实例和原型上都没有 name</code> <code>console.log(p.name); </code><code>// undefined</code> </td> 
 </tr> 
 </tbody> 
</table>

### delete 删除的到底是什么 ###

*  删除的是**操作表达式结果**
 *  对于**值，字面量或不可达的引用**，不操作，直接返回 true
 *  **引用类型**，删除引用

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 </td> 
 <td> <code>var</code> <code>nameVar = </code><code>"nameVar"</code><code>;</code> <code>nameNotVar = </code><code>"nameNotVar"</code><code>;</code> <code>// var 声明的不可以删除</code> <code>console.log(Object.getOwnPropertyDescriptor(window, </code><code>"nameVar"</code><code>)); </code><code>// configurable: false</code> <code>// 非 var 声明的可以删除</code> <code>console.log(Object.getOwnPropertyDescriptor(window, </code><code>"nameNotVar"</code><code>)); </code><code>// configurable: true</code> </td> 
 </tr> 
 </tbody> 
</table>

### 严格模式删除报错 ###

*  对于 **变量，函数名，函数参数**：`SyntaxError`
 *  对于 `configurable: false`：`TypeError`
 *  典型的 `delete super.property` ：`ReferenceError`

下面是错误的例子：

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 </td> 
 <td> <code>"use strict"</code><code>;</code> <code>// 变量</code> <code>var</code> <code>name = </code><code>"name"</code><code>;</code> <code>delete</code> <code>name;</code> <code>// 函数和函数参数</code> <code>function</code> <code>fn() {}</code> <code>delete</code> <code>fn;</code> <code>function</code> <code>fn(name) { </code> <code>&nbsp;&nbsp;</code><code>delete</code> <code>name;</code> <code>}</code> <code>fm();</code> <code>// configurableTypeError</code> <code>const person = { </code> <code>&nbsp;&nbsp;</code><code>name: </code><code>"帅哥"</code> <code>};</code> <code>Object.defineProperty(person, </code><code>"name"</code><code>, { </code> <code>&nbsp;&nbsp;</code><code>configurable: </code><code>false</code> <code>});</code> <code>delete</code> <code>person.name;</code> <code>// 严格 refer</code> <code>class Parent { </code> <code>&nbsp;&nbsp;</code><code>constructor(name) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this</code><code>.name = name;</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;</code><code>getName() {}</code> <code>}</code> <code>class Child extends Parent { </code> <code>&nbsp;&nbsp;</code><code>constructor(name, age) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>super</code><code>(name);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this</code><code>.age = age;</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;</code><code>deleteAny() { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>delete</code> <code>super</code><code>.getName;</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>}</code> <code>var</code> <code>child = </code><code>new</code> <code>Child(</code><code>"child"</code><code>, 18);</code> <code>child.deleteAny();</code> </td> 
 </tr> 
 </tbody> 
</table>

以上就是delete 语法的本质深入解析的详细内容，希望可以帮到你。

转自：[微点阅读][Link 1] [https://www.weidianyuedu.com][Link 1]

[67034b69e677335c69940b8505778144.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/22a37ff69da94151abab331aa1af9aa3.png
[Link 1]: https://www.weidianyuedu.com