JavaScript移除数组中的指定数据详细示例代码
更新时间：2025年05月28日 11:01:21 作者：25号底片~
这篇文章主要介绍了JavaScript如何移除数组中指定数据的相关资料,包括filter（返回新数组、移除多个）、splice（修改原数组、移除单个）、Set（去重）、indexOf+slice、reduce及forEach+push等,需要的朋友可以参考下
1. Array.prototype.filter() 方法
filter() 方法会创建一个新数组，包含所有通过测试的元素。可以通过过滤掉不需要的元素来实现移除。
const array = [1, 2, 3, 4, 5]; const itemToRemove = 3; const newArray = array.filter(item => item !== itemToRemove); console.log(newArray); // 输出: [1, 2, 4, 5]
优点：
不会修改原数组，返回一个新数组。
适合移除多个匹配项。
缺点：
如果需要修改原数组，需要重新赋值。
2. Array.prototype.splice() 方法
splice() 方法可以直接修改原数组，删除指定索引的元素。
const array = [1, 2, 3, 4, 5];
const itemToRemove = 3;
const index = array.indexOf(itemToRemove);
if (index !== -1) {
array.splice(index, 1);
}
console.log(array); // 输出: [1, 2, 4, 5]优点：
直接修改原数组。
适合移除单个匹配项。
缺点：
只能移除第一个匹配项，如果需要移除所有匹配项需要循环。
3. Array.prototype.indexOf()和Array.prototype.slice()
结合 indexOf() 和 slice()，可以创建一个新数组，排除指定元素。
const array = [1, 2, 3, 4, 5];
const itemToRemove = 3;
const index = array.indexOf(itemToRemove);
if (index !== -1) {
const newArray = [...array.slice(0, index), ...array.slice(index + 1)];
console.log(newArray); // 输出: [1, 2, 4, 5]
}优点：
不会修改原数组。
适合移除单个匹配项。
缺点：
代码略显复杂。
4. Array.prototype.reduce() 方法
reduce() 方法可以通过遍历数组，创建一个新数组，排除指定元素。
const array = [1, 2, 3, 4, 5];
const itemToRemove = 3;
const newArray = array.reduce((acc, item) => {
if (item !== itemToRemove) {
acc.push(item);
}
return acc;
}, []);
console.log(newArray); // 输出: [1, 2, 4, 5]优点：
灵活，适合复杂的移除逻辑。
不会修改原数组。
缺点：
代码略显复杂。
5. 使用 Set 结构
如果需要移除多个重复项，可以将数组转换为 Set，然后再转换回数组。
const array = [1, 2, 3, 4, 5, 3]; const itemToRemove = 3; const newArray = Array.from(new Set(array.filter(item => item !== itemToRemove))); console.log(newArray); // 输出: [1, 2, 4, 5]
优点：
可以移除所有匹配项。
适合去重场景。
缺点：
需要额外转换为
Set。
6. Array.prototype.forEach() 和 Array.prototype.push()
通过遍历数组，将不需要移除的元素添加到新数组中。
const array = [1, 2, 3, 4, 5];
const itemToRemove = 3;
const newArray = [];
array.forEach(item => {
if (item !== itemToRemove) {
newArray.push(item);
}
});
console.log(newArray); // 输出: [1, 2, 4, 5]优点：
不会修改原数组。
适合移除多个匹配项。
缺点：
代码略显冗长。
总结
| 方法 | 是否修改原数组 | 适合场景 |
|---|---|---|
filter() | 否 | 移除多个匹配项，返回新数组 |
splice() | 是 | 移除单个匹配项，直接修改原数组 |
indexOf() + slice() | 否 | 移除单个匹配项，返回新数组 |
reduce() | 否 | 复杂移除逻辑，返回新数组 |
Set | 否 | 去重并移除多个匹配项 |
forEach() + push() | 否 | 移除多个匹配项，返回新数组 |
根据你的具体需求，选择合适的方法可以提高代码的效率和可读性。希望本文能帮助你更好地掌握 JavaScript 中数组的操作！
到此这篇关于JavaScript移除数组中指定数据的文章就介绍到这了,更多相关JS移除数组指定数据内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
利用Bootstrap Multiselect实现下拉框多选功能
这篇文章主要介绍了利用Bootstrap Multiselect实现下拉框多选功能，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-04-04
本篇文章主要介绍了详解js正则表达式验证时间格式xxxx-xx-xx形式，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-02-02
这篇文章主要介绍了小程序接口的promise化的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-12-12
写在前面:这是一个关于Ext, Prototype, JavaScript方面的问题,其实下面遇到的问题本不是问题,都是因为错误的理解造成的,本文的宗旨是希望读者朋友避免我犯的同类错误,遇事三思而后行,同时也体会下发现问题,解决问题,反思问题这种精神活动所带来的快乐!2009-01-01
下面小编就为大家分享一篇JS中用EL表达式获取上下文参数值的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
下面小编就为大家推荐一篇js解决软键盘遮挡输入框的问题分享，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2017-12-12
JavaScript剩余操作符Rest Operator详解
在本篇文章里小编给各位分享的是关于JavaScript剩余操作符Rest Operator知识点用法总结，有需要的朋友们跟着学习下。2019-07-07
这篇文章主要为大家详细介绍了javascript html获取系统当前时间，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-11-11
在Twitter上的一些有趣的讨论中, 我发现人们对于Web应用和站点对javascript的依赖普遍存在一种疑惑. 这种疑惑一直都存在, 而对我而言, 这个问题随着浏览技术的飞跃发展而集中爆发了2013-10-10
javascript中typeof操作符和constucor属性检测
这篇文章主要介绍了javascript中typeof操作符和constucor属性检测的相关资料,需要的朋友可以参考下2015-02-02
最新评论