前端 |【JavaScript】JS 删除数组中某个元素的方法有哪些？超简洁六大方法！

'# 前端 |【JavaScript】JS 删除数组中某个元素的方法有哪些？超简洁六大方法！

一、背景与问题

在前端开发中，数组操作是日常开发的核心场景之一。当我们需要从数组中删除某个元素时，常见的问题包括：

• 如何高效删除一个或多个特定值？
• 是否需要保持原数组的引用？
• 如何处理数组中包含对象的元素？
• 如何避免遍历过程中数组长度变化导致的逻辑错误？

传统做法中，开发者可能使用 splice()、filter() 等方法，但这些方法在不同场景下的表现差异较大。本文将深入分析六种常见删除数组元素的方法，结合性能、原理、安全风险和实际应用场景，给出深度解析。

二、基本原理

JavaScript 中的数组是引用类型，所有数组方法都会对数组进行操作。删除元素的核心原理可分为两类：

1. 直接修改原数组（如 splice、pop、shift）：通过索引定位元素，直接修改内存中的数组结构。
2. 创建新数组（如 filter、map）：通过回调函数筛选元素，生成新的数组实例。

这两种方式在性能、内存占用和副作用上有显著差异。例如，splice 会改变原数组，而 filter 会返回新数组，因此在处理数据时需要根据需求选择合适的方法。

三、环境准备

本文基于 JavaScript 标准环境，代码示例兼容现代浏览器和 Node.js 环境。建议使用以下工具进行验证：

• Chrome 浏览器的开发者工具
• Node.js 18+（支持 Array.prototype.flat 等新特性）
• VS Code（配合 Live Server 插件）

四、核心实现

方法 1：splice() 方法（原地删除）

原理：通过索引定位元素，直接修改数组结构。
适用场景：需要直接修改原数组，且已知要删除元素的索引。

// 示例：删除数组中索引为 1 的元素
let arr = [1, 2, 3, 4];
arr.splice(1, 1); // [1, 3, 4]

关键代码解析：

• splice(index, count)：index 是删除的起始位置，count 是删除的元素个数。
• 该方法会直接修改原数组，返回被删除的元素。

性能分析：
时间复杂度为 O(n)，因为需要移动数组元素。对于大数组，频繁调用 splice() 可能导致性能问题。

方法 2：filter() 方法（创建新数组）

原理：通过回调函数筛选元素，生成新数组。
适用场景：需要保留原数组，或需要对元素进行条件过滤。

// 示例：删除数组中值为 2 的元素
let arr = [1, 2, 3, 4];
let newArr = arr.filter(item => item !== 2); // [1, 3, 4]

关键代码解析：

• filter() 返回一个新数组，原数组保持不变。
• 回调函数的参数为 item，可结合其他条件判断。

性能分析：
时间复杂度为 O(n)，但内存占用更高。对于大数据量，可能需要考虑性能优化。

方法 3：findIndex() + splice()（动态查找索引）

原理：先通过 findIndex() 找到目标元素的索引，再用 splice() 删除。
适用场景：需要动态查找元素索引（如删除对象数组中的某个对象）。

// 示例：删除数组中值为 2 的元素
let arr = [1, 2, 3, 4];
let index = arr.findIndex(item => item === 2);
if (index !== -1) arr.splice(index, 1); // [1, 3, 4]

关键代码解析：

• findIndex() 返回第一个符合条件的索引，若未找到返回 -1。
• 需要处理边界情况（如索引不存在）。

性能分析：
两次遍历数组（一次 findIndex，一次 splice），时间复杂度为 O(n)，但可避免重复遍历。

方法 4：slice() 方法（创建新数组）

原理：通过切片生成新数组，跳过指定元素。
适用场景：需要删除某个位置的元素，且希望保留原数组。

// 示例：删除数组中索引为 1 的元素
let arr = [1, 2, 3, 4];
let newArr = arr.slice(0, 1).concat(arr.slice(2)); // [1, 3, 4]

关键代码解析：

• slice(start, end)：返回从 start 到 end 的子数组。
• 需要手动拼接两部分数组。

性能分析：
时间复杂度为 O(n)，但内存占用较高。适合小数据量处理。

方法 5：map() 方法（创建新数组）

原理：通过映射函数生成新数组，跳过特定元素。
适用场景：需要对元素进行条件过滤，同时保留原数组。

// 示例：删除数组中值为 2 的元素
let arr = [1, 2, 3, 4];
let newArr = arr.map(item => item !== 2 ? item : null).filter(Boolean); // [1, 3, 4]

关键代码解析：

• map() 会遍历数组，将符合条件的元素保留。
• 通过 filter(Boolean) 过滤掉 null 或 false 值。

性能分析：
时间复杂度为 O(n)，但逻辑较为复杂，可能影响可读性。

方法 6：Lodash 的 remove() 方法（第三方库）

原理：通过 Lodash 的 remove() 方法直接删除元素。
适用场景：需要快速删除元素，且项目已引入 Lodash 库。

// 示例：删除数组中值为 2 的元素
let arr = [1, 2, 3, 4];
_.remove(arr, item => item === 2); // [1, 3, 4]

关键代码解析：

• remove() 会直接修改原数组，返回被删除的元素。
• 需要引入 Lodash 库，可能增加项目依赖。

性能分析：
底层实现与 splice() 类似，但封装更简洁。但需注意引入额外依赖的风险。

五、完整案例

场景：购物车删除商品

假设有一个购物车数组，需要删除某个商品（以 id 为条件）。

// 原始数据
let cart = [
  { id: 1, name: '商品A', price: 100 },
  { id: 2, name: '商品B', price: 200 },
  { id: 3, name: '商品C', price: 300 }
];

// 删除 id 为 2 的商品
let deleteId = 2;

// 方法 1：splice + findIndex
let index = cart.findIndex(item => item.id === deleteId);
if (index !== -1) cart.splice(index, 1);

// 方法 2：filter
cart = cart.filter(item => item.id !== deleteId);

// 方法 3：Lodash
_.remove(cart, item => item.id === deleteId);

分析：

• 方法 1 和 3 是原地修改，方法 2 会创建新数组。
• 若需保留原数据，应使用方法 2；若需修改原数组，使用方法 1 或 3。

六、源码解析

以 splice() 方法为例，深入其底层实现：

Array.prototype.splice = function(start, deleteCount) {
  // 检查 start 是否为负数
  start = Math.max(0, Math.min(start, this.length));
  
  // 计算删除的元素个数
  deleteCount = Math.max(0, Math.min(deleteCount, this.length - start));
  
  // 创建临时数组保存被删除的元素
  let deleted = [];
  
  // 删除元素并移动数组
  for (let i = start; i < start + deleteCount; i++) {
    deleted.push(this[i]);
    this[i] = undefined; // 留空位
  }
  
  // 填充剩余元素
  for (let i = start + deleteCount; i < this.length; i++) {
    this[start + (i - (start + deleteCount))] = this[i];
  }
  
  // 调整数组长度
  this.length = this.length - deleteCount;
  
  return deleted;
};

关键点：

• 通过 start 和 deleteCount 确定删除范围。
• 使用临时数组保存被删除元素。
• 修改数组结构时，需要处理空位和元素移动。

七、进阶使用

1. 删除多个元素

let arr = [1, 2, 3, 4, 5];
let indexes = [1, 3]; // 要删除的索引
indexes.sort((a, b) => b - a); // 从后往前删除避免索引错位
indexes.forEach(index => {
  arr.splice(index, 1);
});
// 结果：[1, 3, 5]

2. 删除对象数组中的元素

let users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 3, name: 'Charlie' }
];
let index = users.findIndex(user => user.id === 2);
if (index !== -1) users.splice(index, 1);

3. 删除符合条件的多个元素

let arr = [1, 2, 3, 4, 5];
let deleted = arr.splice(0, arr.length).filter(item => item % 2 !== 0);
// 删除所有偶数，返回 [1, 3, 5]

八、性能与工程实践

1. 性能优化建议

优化建议：

• 对于大数组，避免多次调用 splice()，可使用 filter() 一次性删除。
• 如果仅删除一个元素，splice() 是最优选择。
• 如果需要删除多个元素，优先考虑 filter()。

2. 异常处理

// 处理索引越界
let arr = [1, 2, 3];
let index = arr.findIndex(item => item === 4);
if (index !== -1) arr.splice(index, 1);

安全风险：

• 在 splice() 中传入负数索引可能导致未预期的行为。
• 在 filter() 中未处理 null 或 undefined 可能导致数据丢失。

3. 安全性考虑

• 使用 filter() 时，确保回调函数不会引入未定义的值。
• 使用 splice() 时，避免在遍历过程中修改数组长度，否则可能导致逻辑错误。

九、常见问题与踩坑

1. 错误示例：遍历数组时修改数组

let arr = [1, 2, 3];
for (let i = 0; i < arr.length; i++) {
  if (arr[i] === 2) {
    arr.splice(i, 1); // 会导致 i 越界
  }
}

问题分析：
修改数组长度后，i 可能超过数组边界，导致错误。

解决办法：

• 使用 filter() 替代遍历：

  arr = arr.filter(item => item !== 2);

2. 错误示例：未处理未找到元素的情况

let arr = [1, 2, 3];
let index = arr.findIndex(item => item === 4);
arr.splice(index, 1); // 此时 index 为 -1，会删除最后一个元素

问题分析：
未检查 index 是否为 -1，可能导致错误删除。

解决办法：

• 增加边界判断：

  if (index !== -1) arr.splice(index, 1);

十、最佳实践

1. 选择原则

2. 代码规范建议

• 避免在遍历中直接修改数组长度。
• 使用 filter() 替代 splice() 以避免副作用。
• 对于对象数组，使用 findIndex() 精确匹配。

十一、总结

JavaScript 中删除数组元素的方法众多，每种方法都有其适用场景和性能特点。本文深入分析了 splice()、filter()、findIndex() 等六种常用方法，结合真实开发场景和性能分析，帮助开发者选择最合适的方案。

关键结论：

• splice() 是最直接的删除方法，但会修改原数组。
• filter() 是最安全的方式，但会创建新数组。
• 在处理大数组时，应优先考虑性能优化。
• 避免在遍历中直接修改数组长度，以防止逻辑错误。

在实际开发中，根据需求选择合适的方法，是高效处理数组操作的核心。希望本文能为你的开发实践提供有价值的参考。