在 JavaScript 中，数组是一个常见的数据结构。在实际开发中，我们常常需要对数组进行增删改查等操作。其中，删除数组元素是一个常见的要求。JavaScript 提供了多种方式来删除数组元素，而其中 Array.prototype.splice 方法是一种相对灵活和强大的方式。
Array.prototype.splice 方法简介
Array.prototype.splice 方法是 Array 对象原型上的一个方法，用于删除指定位置的元素，并可同时添加新的元素。该方法可以接收多个参数，其中前两个参数是必须的，后面的参数是可选的。具体参数说明如下：
array.splice(startIndex, deleteCount, item1, item2, …)
- startIndex：必须，表示要删除元素的起始下标位置。
- deleteCount：可选，表示要删除的元素个数。如果值为 0，则不删除任何元素。如果值为负数，则删除从 startIndex 开始的绝对值个元素。
- item1, item2, …：可选，表示要添加到数组中的新元素。
该方法返回一个数组，其中包含被删除的元素，如果没有删除任何元素，则返回的数组为空。
使用 Array.prototype.splice 方法删除数组元素的基本使用方法
下面是使用 Array.prototype.splice 方法删除数组元素的基本使用方法：
-- -------------------- ---- ------- ----- --- - --------- --------- --------- ---------- -- ------ ------------- --- ----------------- -- --------- --------- --------- -- ------------- ------------- -- ------- --------- ----------------- -- --------- ------- -------- ---------展开代码
在上面的示例中，我们首先定义了一个数组 arr，然后使用 Array.prototype.splice 方法删除了数组中的元素。删除一个元素时，我们将 startIndex 设置为 2，deleteCount 设置为 1，以删除 cherry 这个元素。删除多个元素并添加新元素时，startIndex 设为 1，deleteCount 设为 2，表示删除 banana 和 cherry 两个元素，同时添加新元素 pear 和 grape。
Array.prototype.splice 方法的高级使用
除了上述基本使用方法外，Array.prototype.splice 方法还有一些高级用法，可以更加灵活和强大。下面我们来看一些例子。
将类数组对象转换为数组
有时候，我们需要将一个类数组对象转换为数组。这时可以使用 Array.prototype.slice 方法来进行转换，示例代码如下：
-- -------------------- ---- ------- ----- ---------- - - -- -------- -- --------- -- --------- ------- - -- ----- --- - --------------------------------------- ----------------- -- --------- --------- ---------展开代码
上述示例中，我们首先定义了一个类数组对象 arrLikeObj，其中包含三个元素。然后我们使用 Array.prototype.slice.call 方法将其转换为数组，输出结果为 ["apple", "banana", "cherry"]。
使用 delete 关键字删除数组元素
在 JavaScript 中，可以使用 delete 关键字删除对象的属性。同样，我们也可以使用 delete 关键字删除数组元素，示例代码如下：
const arr = ["apple", "banana", "cherry", "durian"]; delete arr[2]; // 删除 cherry 元素 console.log(arr); // ["apple", "banana", undefined, "durian"]
在上面的示例中，我们首先定义了一个数组 arr，其中包含四个元素。然后我们使用 delete 关键字删除了下标为 2 的元素，即 cherry。输出结果为 ["apple", "banana", undefined, "durian"]。这里要注意的是，并没有真正地将 cherry 元素从数组中删除，而是将其值设置为了 undefined。因此，在某些需要判断数组长度或遍历数组元素等操作时，需要注意存在 undefined 元素的情况。
使用 Array.prototype.filter 方法筛选出要删除的元素
有时候，我们需要先筛选出要删除的元素，然后再使用 Array.prototype.splice 方法进行删除。这时可以使用 Array.prototype.filter 方法来进行筛选，示例代码如下：
-- -------------------- ---- ------- ----- --- - - - --- -- ----- ------- -- - --- -- ----- -------- -- - --- -- ----- -------- -- - --- -- ----- -------- - -- ----- ----------- - --- --- ----- ----------- - ----------------- -- -------------------------------- ------------------------- -- -- --- -- ----- ------- -- - --- -- ----- -------- --展开代码
上述示例中，我们首先定义了一个数组 arr，其中包含四个对象元素，每个元素都包含一个 id 和一个 name 属性。然后我们使用一个数组 toBeDeleted，其中包含要删除的元素的 id。接着，我们使用 Array.prototype.filter 方法筛选出要删除的元素所在的索引位置，最终得到一个新的数组 filteredArr，其中包含 id 不在 toBeDeleted 数组中的元素。输出结果为 [{ id: 1, name: "apple" }, { id: 4, name: "durian" }]。
最后，我们可以使用 Array.prototype.map 方法将 filteredArr 中每个元素的值取出来，再使用 Array.prototype.splice 方法删除对应的元素，示例代码如下：
-- -------------------- ---- ------- ----- ----------- - --- --- ----- ------------ - --- ----------- -- -------- ------------ -- ------------------------- --------- -- ------------------------------- -- ------- --- ---- ------- -------------------------- -- -- --- -- ----- -------- -- - --- -- ----- -------- -- ----------------- -- -- --- -- ----- ------- -- - --- -- ----- -------- --展开代码
在上述示例中，我们首先使用 Array.prototype.map 方法将 arr 数组中每个元素的 id 属性取出来，生成一个新的数组。然后使用 Array.prototype.filter 方法筛选出要删除的元素所在的索引位置，并使用 Array.prototype.map 方法将其删除，并将被删除的元素放入一个新的数组 deletedItems 中。最终输出删除的元素和新的数组 arr。
小结
本文介绍了如何在 ES7 中使用 Array.prototype.splice 方法删除数组元素。我们首先讲解了该方法的基本使用方法，然后通过实例介绍了一些高级用法，包括将类数组对象转换为数组、使用 delete 关键字删除数组元素和使用 Array.prototype.filter 方法筛选出要删除的元素等。通过本文的学习，相信读者能够更加熟练地掌握如何使用 Array.prototype.splice 方法进行数组元素的删除，并可以灵活运用到实际开发中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67935941504e4ea9bd794ee8
