Delete 的坑

JavaScript 中 Delete 的坑

作为一种常用的编程语言，JavaScript 拥有大量优秀的特性，为我们的编程之旅提供了极大的便利。然而，在 JavaScript 中，存在这样一个坑，一旦踩中，势必使你摸不着头脑，陷入无尽的沉思之中——delete。

在 JavaScript 中，delete 操作符主要用于删除对象属性或数组元素。对于对象属性，delete 操作符可以轻松地将其删除，但对于数组元素，delete 操作符却会带来一些意想不到的结果，比如，删除数组元素后，数组的长度并没有改变，这往往会让我们感到困惑。

数组元素删除与长度

考虑以下代码：

const array = [1, 2, 3, 4, 5];
delete array[2];
console.log(array.length); // 5

输出结果为 5，这表明数组的长度并没有发生改变。这与我们通常的理解相悖，因为我们认为删除数组元素后，数组的长度应该减小。然而，事实并非如此。

数组元素删除的原理

为了理解为什么 delete 操作符对数组元素删除的行为如此奇怪，我们需要深入了解 delete 操作符的原理。

当我们使用 delete 操作符删除数组元素时，实际上并不是真的删除了该元素，而是将该元素标记为已删除。这类似于我们在文件系统中删除文件时的情况。当我们删除一个文件时，文件并没有立即从磁盘中消失，而是被标记为已删除。系统仍然会保留该文件的空间，直到有新的数据需要写入该空间时，系统才会真正删除该文件。

数组元素删除后的空间

当我们使用 delete 操作符删除数组元素后，该元素所占用的空间并没有被释放。这是因为 JavaScript 中的数组是一种特殊的对象，它的元素是通过索引来访问的。当我们删除数组元素时，只是将该元素的索引标记为已删除，但元素本身仍然存在于数组中。

如何正确删除数组元素

既然 delete 操作符不能直接删除数组元素，那么我们应该如何正确删除数组元素呢？

有两种方法可以正确删除数组元素：

1. 使用 splice() 方法

splice() 方法可以删除数组中指定范围的元素。我们可以使用 splice() 方法来删除数组中的指定元素，如下所示：

const array = [1, 2, 3, 4, 5];
array.splice(2, 1); // 删除数组中的第三个元素
console.log(array.length); // 4

2. 使用 filter() 方法

filter() 方法可以创建一个新的数组，其中只包含满足指定条件的元素。我们可以使用 filter() 方法来过滤掉数组中需要删除的元素，如下所示：

const array = [1, 2, 3, 4, 5];
const newArray = array.filter((item, index) => index !== 2);
console.log(newArray.length); // 4

结论

在 JavaScript 中，delete 操作符对数组元素删除的行为是特殊的。当我们使用 delete 操作符删除数组元素时，实际上只是将该元素标记为已删除，但元素本身仍然存在于数组中。这可能会导致一些意想不到的结果。因此，我们需要谨慎使用 delete 操作符，并在需要删除数组元素时使用正确的方法。