删除数组特定元素的JavaScript方法

哈喽！大家好，很高兴又见面了，我是golang学习网的一名作者，今天由我给大家带来一篇《JavaScript删除数组特定元素方法》，本文主要会讲到等等知识点，希望大家一起学习进步，也欢迎大家关注、点赞、收藏、转发! 下面就一起来看看吧！

使用filter()方法可创建一个不包含特定元素的新数组，且不改变原数组，适用于需要保持原数组不变的场景；2. 使用splice()方法可直接在原数组上删除指定元素，需先通过indexOf()或findIndex()获取索引，适用于需原地修改数组的场景；3. 删除多个相同元素时，filter()更简洁安全，splice()需从后往前遍历或结合while循环以避免索引偏移；4. 删除对象数组中的特定对象时，应根据唯一标识属性（如id）使用filter()或findIndex()结合splice()进行操作，因对象比较基于引用而非值。综上，filter()因其不可变性和代码清晰性在多数场景下更推荐使用。

在JavaScript中删除数组中的特定元素，通常有两种主流且各有侧重的方法：filter()方法和splice()方法。简单来说，如果你希望得到一个不包含特定元素的新数组，同时不改变原数组，那么filter()是你的首选。而如果你需要直接在原数组上进行修改，删除指定元素，splice()则更为直接。选择哪一个，往往取决于你对原数组是否需要保持不变的考量。

解决方案

要删除JavaScript数组中的特定元素，我们主要依赖filter()和splice()这两个内置方法。它们各自有不同的应用场景和工作方式。

1. 使用 filter() 方法（推荐用于创建新数组）

filter()方法不会改变原始数组，而是返回一个新数组，其中包含通过你提供的测试函数的所有元素。这在很多现代JavaScript开发中非常受欢迎，因为它遵循了“不可变性”的原则，尤其是在状态管理（如React或Vue）中。

// 示例：删除所有值为 'apple' 的元素
const fruits = ['apple', 'banana', 'orange', 'apple', 'grape'];
const filteredFruits = fruits.filter(item => item !== 'apple');

console.log(filteredFruits); // 输出: ['banana', 'orange', 'grape']
console.log(fruits);        // 输出: ['apple', 'banana', 'orange', 'apple', 'grape'] (原数组未变)

// 示例：删除特定数字
const numbers = [1, 2, 3, 4, 3, 5];
const numbersWithoutThree = numbers.filter(num => num !== 3);
console.log(numbersWithoutThree); // 输出: [1, 2, 4, 5]

filter()的优点在于它的简洁性与安全性，你不用担心意外修改到原数据，这在复杂应用中能避免很多难以追踪的bug。

2. 使用 splice() 方法（推荐用于原地修改数组）

splice()方法会直接修改原始数组，通过删除或替换现有元素，或者添加新元素来改变数组内容。如果你知道要删除元素的索引，splice()非常高效。但如果只知道元素的值，你需要先找到它的索引。

// 示例：删除第一个值为 'apple' 的元素
const fruitsSplice = ['apple', 'banana', 'orange', 'apple', 'grape'];
const indexToRemove = fruitsSplice.indexOf('apple'); // 找到第一个 'apple' 的索引

if (indexToRemove !== -1) { // 确保元素存在
    fruitsSplice.splice(indexToRemove, 1); // 从该索引开始删除1个元素
}

console.log(fruitsSplice); // 输出: ['banana', 'orange', 'apple', 'grape'] (原数组已变)

// 示例：删除特定数字（如果数组中有多个相同值，只会删除第一个）
const numbersSplice = [1, 2, 3, 4, 3, 5];
const indexNumToRemove = numbersSplice.indexOf(3);

if (indexNumToRemove !== -1) {
    numbersSplice.splice(indexNumToRemove, 1);
}
console.log(numbersSplice); // 输出: [1, 2, 4, 3, 5]

splice()的强大之处在于它能直接操作内存中的数组对象，但这也意味着你需要更小心地管理索引，尤其是在循环中删除多个元素时，索引会发生变化。

使用filter()方法删除元素：保留原数组还是创建新数组？

这其实是很多开发者在处理数组时面临的一个核心选择。filter()方法天生就是为“创建新数组”而设计的，它不会触碰你传入的原始数组。在我看来，这种“不可变性”在现代前端开发中越来越重要。想想看，当你的数据流是单向的，或者你使用了像Redux、Vuex这样的状态管理库时，每一次状态更新都应该产生一个新的状态副本，而不是直接修改旧的状态。filter()完美契合了这一点。

比如，你有一个用户列表，用户可以筛选或删除。如果你直接修改原列表，那么你可能需要手动备份它，或者在某些情况下，其他依赖这个列表的组件会突然发现数据变了，导致不可预测的行为。但如果用filter()，每次操作都返回一个新列表，那么原列表始终是稳定的，你可以随时回溯，或者轻松地进行撤销/重做操作，因为它没有被“污染”。

// 假设这是你的应用状态中的一部分
let activeUsers = [
    { id: 1, name: 'Alice', status: 'online' },
    { id: 2, name: 'Bob', status: 'offline' },
    { id: 3, name: 'Charlie', status: 'online' }
];

// 需求：删除ID为2的用户
const usersAfterDeletion = activeUsers.filter(user => user.id !== 2);

console.log(usersAfterDeletion);
/*
[
  { id: 1, name: 'Alice', status: 'online' },
  { id: 3, name: 'Charlie', status: 'online' }
]
*/
console.log(activeUsers); // 原数组 activeUsers 保持不变
/*
[
  { id: 1, name: 'Alice', status: 'online' },
  { id: 2, name: 'Bob', status: 'offline' },
  { id: 3, name: 'Charlie', status: 'online' }
]
*/

这种模式让代码更容易理解，更少出错，尤其是在团队协作和大型项目中，它能显著提升代码的可维护性。你几乎可以把filter()看作是“给我一个满足特定条件的新列表”，而不是“去修改那个旧列表”。

使用splice()方法删除元素：原地修改的考量

splice()方法则完全是另一种哲学：它直接在原数组上动刀。这就像你在一个文件里直接删除了几行文字，而不是复制一份文件再删除。它的优点是性能，因为它不需要创建新的数组，特别是在处理非常大的数组时，可以节省内存和计算资源。但这份“直接”也带来了额外的复杂性。

最常见的考量就是“索引偏移”。如果你在一个循环中，从前往后遍历并使用splice()删除元素，那么每次删除都会导致后续元素的索引前移。这会让你跳过一些元素，或者删除错误的元素。

// 糟糕的例子：尝试删除所有偶数，但会出错
const numbersToModify = [1, 2, 3, 4, 5, 6];
for (let i = 0; i < numbersToModify.length; i++) {
    if (numbersToModify[i] % 2 === 0) {
        numbersToModify.splice(i, 1);
    }
}
console.log(numbersToModify); // 结果可能不是 [1, 3, 5]，而是 [1, 3, 5, 6] 或其他，因为索引在变动

// 正确的 splice 循环删除所有匹配项的方法之一：从后往前遍历
const numbersToModifyCorrect = [1, 2, 3, 4, 3, 5];
const valueToDelete = 3;
for (let i = numbersToModifyCorrect.length - 1; i >= 0; i--) {
    if (numbersToModifyCorrect[i] === valueToDelete) {
        numbersToModifyCorrect.splice(i, 1);
    }
}
console.log(numbersToModifyCorrect); // 输出: [1, 2, 4, 5] (正确删除了所有3)

// 另一种正确的方法：结合 indexOf 和 while 循环
const numbersToModifyWhile = [1, 2, 3, 4, 3, 5];
let idx = numbersToModifyWhile.indexOf(3);
while (idx !== -1) {
    numbersToModifyWhile.splice(idx, 1);
    idx = numbersToModifyWhile.indexOf(3); // 再次查找，因为数组已改变
}
console.log(numbersToModifyWhile); // 输出: [1, 2, 4, 5]

所以，尽管splice()很强大，但它要求你对数组的内部机制有更深的理解，尤其是在处理多个相同元素或循环删除时。在我看来，如果不是对性能有极致要求，或者确实需要原地修改数据，我个人更倾向于使用filter()，因为它在思维上更简单，更不容易出错。

删除多个相同特定元素的高效策略

当你需要从数组中删除所有出现的某个特定元素时，filter()方法无疑是最简洁、最不易出错的选择。它天然就能处理这种情况，因为它是遍历数组中的每一个元素，并根据条件决定是否将其包含在新数组中。它不会受到索引变化的影响。

const itemsWithDuplicates = ['apple', 'banana', 'orange', 'apple', 'grape', 'apple'];
const itemsWithoutApple = itemsWithDuplicates.filter(item => item !== 'apple');
console.log(itemsWithoutApple); // 输出: ['banana', 'orange', 'grape']
// 无论 'apple' 出现多少次，都会被排除。

如果你坚持要用splice()来原地删除所有相同的特定元素，那么你必须非常小心地处理索引。上面在splice()部分提到的“从后往前遍历”或“结合indexOf和while循环”就是为此而生的策略。从后往前遍历可以避免因为删除元素导致后续元素索引前移的问题，因为它总是操作那些尚未被访问到的元素。indexOf结合while循环则是在每次删除后，重新查找目标元素的当前位置。

// 再次强调，filter 在这种场景下更推荐
// 但如果非要用 splice 且要原地修改，这是方法之一
const numbersWithManyThrees = [1, 3, 2, 3, 4, 3, 5];
const valueToRemove = 3;

let i = numbersWithManyThrees.length; // 从数组末尾开始
while (i--) { // i 会从 length-1 递减到 0
    if (numbersWithManyThrees[i] === valueToRemove) {
        numbersWithManyThrees.splice(i, 1);
    }
}
console.log(numbersWithManyThrees); // 输出: [1, 2, 4, 5]

选择哪种策略，说到底还是一个平衡：是选择代码的简洁性和安全性（filter()），还是选择可能更高的性能和原地修改（splice()，但需要更复杂的逻辑来保证正确性）。在绝大多数业务场景中，filter()带来的代码清晰度收益，远大于splice()可能带来的微弱性能提升。

当数组包含对象时，如何删除特定对象？

当数组中存储的是对象而不是原始值（字符串、数字）时，删除特定元素会变得稍微复杂一些，因为JavaScript中对象的比较是基于引用的，而不是基于值的。这意味着，{ id: 1 } === { id: 1 } 的结果是 false，因为它们是两个不同的对象实例，即使它们的属性完全相同。

因此，你不能简单地用 filter(item => item !== someObject) 或 indexOf(someObject) 来删除一个“看起来一样”的对象。你需要一个判断对象“相等”的逻辑。通常，我们会根据对象的一个或多个唯一标识属性来判断。

1. 根据唯一ID或其他属性删除（最常见）

这是最实用的方法。如果你的对象有唯一的标识符（比如id），你可以用它来筛选。

const users = [
    { id: 1, name: 'Alice' },
    { id: 2, name: 'Bob' },
    { id: 3, name: 'Charlie' }
];

// 需求：删除ID为2的用户
const userIdToDelete = 2;
const updatedUsers = users.filter(user => user.id !== userIdToDelete);

console.log(updatedUsers);
/*
[
  { id: 1, name: 'Alice' },
  { id: 3, name: 'Charlie' }
]
*/
console.log(users); // 原数组未变

这种方法同样适用于splice()，但你需要先找到那个唯一ID对应的对象的索引：

const usersSplice = [
    { id: 1, name: 'Alice' },
    { id: 2, name: 'Bob' },
    { id: 3, name: 'Charlie' }
];

const targetId = 2;
const indexToDelete = usersSplice.findIndex(user => user.id === targetId);

if (indexToDelete !== -1) {
    usersSplice.splice(indexToDelete, 1);
}
console.log(usersSplice);
/*
[
  { id: 1, name: 'Alice' },
  { id: 3, name: 'Charlie' }
]
*/

这里我们用了findIndex()，它返回数组中满足提供的测试函数的第一个元素的索引，如果没有找到则返回-1。这比indexOf()更适合查找对象。

2. 删除特定的对象引用

如果你手里已经有了要删除的那个对象实例的引用，那么你可以直接用这个引用来比较：

const items = [
    { value: 'A' },
    { value: 'B' },
    { value: 'C' }
];

const itemToDelete = items[1]; // 获取对第二个对象的引用

const newItems = items.filter(item => item !== itemToDelete);
console.log(newItems); // 输出: [{ value: 'A' }, { value: 'C' }]

这种场景相对少见，通常你不会直接拿到一个数组内部对象的引用然后去删除它，除非是在一些特定的数据结构操作中。但在概念上，了解这一点很重要。

总的来说，处理对象数组的删除，关键在于定义“特定”的含义。大多数时候，这个“特定”指的是某个具有特定属性值的对象，而不是内存中的某个特定对象引用。因此，基于属性的filter()或findIndex()结合splice()是你的主要工具。

本篇关于《删除数组特定元素的JavaScript方法》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！