当前位置：首页 > 文章列表 > 文章 > 前端 > JavaScriptdelete删除对象属性方法详解

JavaScriptdelete删除对象属性方法详解

2025-07-13 12:52:30 0浏览收藏

一分耕耘，一分收获！既然都打开这篇《JavaScript的delete操作符用于删除对象的属性。使用方法为：delete 对象.属性或 delete 对象['属性']。注意，delete不能删除变量或函数，只能删除对象的属性。》，就坚持看下去，学下去吧！本文主要会给大家讲到等等知识点，如果大家对本文有好的建议或者看到有不足之处，非常欢迎大家积极提出！在后续文章我会继续更新文章相关的内容，希望对大家都有所帮助！

delete操作符用于删除对象的属性，但不直接销毁变量或释放内存。①它仅能移除对象上可配置的自有属性，若属性不可配置或不存在，则返回false（非严格模式），严格模式下抛出TypeError；②删除数组元素时不会改变数组长度，仅将该位置设为undefined，形成稀疏数组；③无法删除let、const声明的变量，尝试删除会报错，var声明的全局变量也无法被删除；④不影响原型链上的继承属性，仅删除对象自身属性；⑤delete不直接释放内存，只是断开引用，实际内存回收由垃圾回收机制处理；⑥在数组中使用delete是反模式，推荐使用splice()、filter()等方法替代。

JavaScript的delete操作符是什么？如何使用？

JavaScript的delete操作符，说白了，就是用来从一个对象中移除某个属性的。它不是用来“销毁”变量或者直接释放内存的，这点很多人会搞混。当它成功移除一个可配置的属性时，会返回true；如果属性不存在，或者属性不可配置导致删除失败，它会返回false（在非严格模式下）。而在严格模式下，尝试删除一个不可配置的属性会直接抛出TypeError。理解它，关键在于明白它操作的是“属性”，而不是“值”本身，更不是“内存地址”。

解决方案

delete操作符最核心的用途，就是移除对象上的一个特定属性。它会断开这个属性名和其值之间的关联。

let myObject = {
  name: "张三",
  age: 30,
  city: "北京"
};

console.log(myObject.name); // 输出: 张三

delete myObject.name; // 移除name属性
console.log(myObject.name); // 输出: undefined
console.log(myObject); // 输出: { age: 30, city: "北京" }

这个操作符有一些特别的行为，理解这些是避免“踩坑”的关键：

删除对象属性：这是它的主要职责。如果属性存在且可配置（大部分自定义属性默认都是可配置的），它就会被移除。
```
const user = {
  id: 1,
  username: 'dev_user',
  email: 'dev@example.com'
};
delete user.email;
console.log(user); // { id: 1, username: 'dev_user' }
```
删除数组元素：这是个常见的误区。当你对数组元素使用delete时，它并不会改变数组的长度，也不会重新索引数组。它只是将该位置的值设为undefined，留下一个“空洞”（sparse array）。
```
let fruits = ["苹果", "香蕉", "橙子"];
delete fruits[1]; // 删除索引为1的元素
console.log(fruits); // 输出: ["苹果", undefined, "橙子"]
console.log(fruits.length); // 输出: 3 (长度不变)
```
这个行为在实际开发中很少是你想要的，因为通常我们希望删除元素后数组长度变化，且后续元素前移。
删除变量：
- var声明的变量：在全局作用域下，var声明的变量会成为全局对象的属性。理论上可以被delete，但在非严格模式下，delete全局变量会返回false且不会删除。在严格模式下，会抛出TypeError。
```
var globalVar = 10;
console.log(delete globalVar); // 非严格模式下通常返回 false
console.log(globalVar); // 10 (未被删除)
```
- let和const声明的变量：这些变量根本无法被delete操作符删除，无论在什么模式下，尝试删除都会导致语法错误（SyntaxError）或返回false。
```
let localVar = 20;
// delete localVar; // 这会报错或返回false，无法删除
```
- 函数声明：函数声明也无法被delete删除。
- 函数参数：函数参数也无法被delete删除。
不可配置属性：有些内置对象的属性，或者通过Object.defineProperty设置为configurable: false的属性，是无法被delete删除的。
```
const obj = {};
Object.defineProperty(obj, 'fixedProp', {
  value: 100,
  configurable: false // 设置为不可配置
});
console.log(delete obj.fixedProp); // 输出: false
console.log(obj.fixedProp); // 输出: 100 (未被删除)
```
在严格模式下，尝试删除不可配置的属性会直接抛出TypeError。

`delete`操作符与内存管理有何关联？它真的能“删除”一切吗？

这是个很常见的误解，也是我经常需要向初学者解释的。delete操作符的核心职责是移除一个对象的属性，它不直接负责内存的释放。当一个属性被delete移除后，如果这个值不再被任何其他地方引用，那么JavaScript的垃圾回收机制会在未来的某个不确定时刻自动回收这部分内存。你可以把它想象成，delete只是剪断了属性名和值之间的那根线，至于那个值本身有没有被扔进垃圾桶，那是垃圾回收器的工作。

所以，delete操作符并不能“删除一切”。它能删除的，主要是对象上那些可配置的自有属性。它根本无法触及以下这些东西：

通过var、let、const声明的变量：这些变量，尤其是let和const，它们根本就不在delete的“管辖范围”内。var声明的全局变量虽然会成为全局对象的属性，但尝试delete它们通常会失败（返回false），在严格模式下还会抛错。
函数声明：你不能delete一个函数声明。
函数参数：函数内部的参数，也无法被delete。
继承来的属性：delete只能删除对象自身的属性，不能删除原型链上继承来的属性。如果你尝试删除一个继承属性，它会直接返回true（因为没有这个自有属性可删），但并不会影响原型链上的那个属性。
不可配置的属性：比如通过Object.defineProperty明确设置为configurable: false的属性，或者一些内置对象的属性（比如Math.PI，或者全局对象的undefined、NaN等）。

所以，delete操作符的权力远没有想象中那么大。它更像是一个“清洁工”，专门清理对象内部的“房间”，而不是“拆楼队”或者“内存回收站”。

在数组中使用`delete`操作符会有什么“副作用”？

在数组中使用delete操作符，这几乎可以算是一个“反模式”了，因为它的行为往往不是我们期望的。主要的“副作用”就是它会创建稀疏数组（sparse array），并且不改变数组的length属性。

想象一下，你有一个数组：

let myShoppingList = ['牛奶', '面包', '鸡蛋', '果汁'];

如果你想移除“面包”，你可能会直觉地想到delete myShoppingList[1]。

delete myShoppingList[1];
console.log(myShoppingList); // 输出: ['牛奶', <1 empty item>, '鸡蛋', '果汁'] 或 ['牛奶', undefined, '鸡蛋', '果汁']
console.log(myShoppingList.length); // 输出: 4

看到了吗？“面包”确实不见了，但数组的第二个位置变成了一个“空洞”（或者说undefined值），而不是后面的“鸡蛋”前移补上了空缺。更重要的是，数组的length属性依然是4，没有变成3。

这在很多场景下都会引发问题：

遍历问题：如果你用for...in或者forEach遍历这个数组，可能会遇到undefined值，或者在某些老旧的for...in循环中甚至会跳过这个“空洞”，导致逻辑混乱。
期望的索引错位：当你期望数组元素是紧密排列，并且索引是连续的时候，delete会打破这种连续性。
误导性长度：数组的length属性不再准确反映实际包含的有效元素数量。

所以，如果你想从数组中移除元素并希望数组长度改变、元素前移，delete绝对不是正确的工具。它更适合处理对象属性的删除，而不是数组元素的删除。在数组场景下，它带来的“副作用”往往比它解决的问题更多。

什么时候应该（或不应该）使用`delete`操作符？有哪些替代方案？

理解delete的特性后，我们就能更好地决定何时使用它，何时避开它。

应该使用delete操作符的场景：

明确需要从对象中移除一个属性：这是它最主要的、也最合适的用途。比如，你从数据库获取了一个对象，其中包含一些敏感信息，在发送给客户端之前，你需要把这些敏感属性彻底移除掉。

const userData = {
  id: 'abc123',
  name: 'Alice',
  passwordHash: 'some_hash_value',
  email: 'alice@example.com'
};
// 在发送给前端前，移除敏感信息
delete userData.passwordHash;
console.log(userData); // { id: 'abc123', name: 'Alice', email: 'alice@example.com' }

清理动态添加的属性：当你给一个对象动态添加了一些临时属性，完成任务后需要彻底清除这些属性时。

不应该使用delete操作符的场景：

处理数组元素：如前所述，它会留下空洞且不改变长度，这几乎总不是你想要的。
为了释放内存：delete不直接释放内存，它只是移除引用。内存管理由垃圾回收器负责。
删除变量：它无法删除let、const声明的变量，对var声明的全局变量也效果不佳。
删除函数声明或函数参数：这些是不可删除的。
将属性值设为undefined或null：如果你只是想清空属性的值，但保留属性名（比如，这个属性可能后面还会被赋值），那么直接赋值为undefined或null更合适。delete会彻底移除属性。

delete操作符的替代方案：

针对不同的需求，有很多更恰当的替代方案：

针对数组元素移除：

Array.prototype.splice()：这是最常用且最推荐的方法，它会改变原数组，移除元素并改变数组长度，同时后续元素会前移。

let items = ['A', 'B', 'C', 'D'];
items.splice(1, 1); // 从索引1开始删除1个元素
console.log(items); // ['A', 'C', 'D']
console.log(items.length); // 3

Array.prototype.filter()：如果你想基于某个条件移除多个元素，或者想生成一个新数组而不改变原数组，filter是更好的选择。

let numbers = [1, 2, 3, 4, 5];
let filteredNumbers = numbers.filter(num => num !== 3); // 移除所有等于3的元素
console.log(filteredNumbers); // [1, 2, 4, 5]
console.log(numbers); // [1, 2, 3, 4, 5] (原数组未变)

Array.prototype.pop()/shift()：分别用于移除数组的最后一个和第一个元素。
```
let stack = [1, 2, 3];
stack.pop(); // 移除3
console.log(stack); // [1, 2]
```

针对对象属性（不删除，仅清空值）：
- 赋值为undefined或null：如果你只是想让属性的值为空，但希望属性键仍然存在于对象中，可以这样做。
```
let config = { url: 'api.com', timeout: 5000 };
config.timeout = undefined; // 或 null
console.log(config); // { url: 'api.com', timeout: undefined }
console.log('timeout' in config); // true (属性键还在)
```
  这和delete的区别在于，delete会使'timeout' in config返回false。
针对变量（通常不需要“删除”，只需让其超出作用域）：
- 作用域管理：变量在超出其作用域后，就会自动变得不可访问，并最终被垃圾回收。这是JavaScript处理变量生命周期的方式，比手动“删除”更自然。
```
function processData() {
  let tempVar = 'some data';
  // ... 使用 tempVar ...
} // tempVar 在这里超出作用域，会被自动回收
```