JavaScript 删除数组指定值的常用方法详解
本文详解在 JavaScript 中删除数组指定值的多种实现方式。针对删除所有匹配值，分析了正向遍历 splice 的风险及逆向遍历、filter 过滤等安全方案；针对删除单个值，介绍了利用 some 短路特性与 findIndex 定位下标的方法，帮助开发者根据场景选择合适策略。
删除数组中所有指定值
一、删除数组中所有指定值
首先介绍一种存在隐患的操作方式：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
window.onload = function() {
var arr = [1, 1, 2, 2, 3, 3, 4, 4, 5, 5];
console.log(`原始数组:${arr}`);
arr.forEach((item, i) => {
if (item == 3) {
arr.splice(i, 1); // 从下标 i 开始, 删除 1 个元素
}
})
console.log(`删除之后的数组:${arr}`);
}
</script>
</body>
</html>查看运行结果：
从输出结果可以看出，数组中仅删除了一个值为 3 的元素。其原因是：在使用 splice 方法移除一个指定值后，数组结构发生变化，后续元素索引前移。在随后的循环遍历中，原本索引为 5 的另一个 3 移动到了索引 4 的位置。由于循环继续寻找索引 5 的元素，导致漏删了后面的 3，转而处理值为 4 的元素。因此，当需要删除的值不止一个时，这种正向遍历删除的方式存在风险。
1. 若坚持使用 splice 方法配合循环遍历，一种安全的做法是进行逆向遍历：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
window.onload = function() {
var arr = [1, 1, 2, 2, 3, 3, 4, 4, 5, 5];
console.log(`原始数组:${arr}`);
for (let i = arr.length - 1; i > -1; i--) {
if (arr[i] == 3) {
arr.splice(i, 1);
}
}
console.log(`删除之后的数组:${arr}`);
}
</script>
</body>
</html>运行结果如下：
2. 利用 filter 方法过滤掉指定值：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
window.onload = function() {
var arr = [1, 1, 2, 2, 3, 3, 4, 4, 5, 5];
arr = arr.filter(item => item != 3); // 过滤掉值不为3,返回新数组
console.log(`filter方法操作之后的数组:${arr}`);
}
</script>
</body>
</html>运行结果如下：
需要注意的是：filter 方法不会修改原数组，而是返回一个包含符合条件元素的新数组。
删除指定一个值
二、删除指定一个值
如果确定只需删除一个指定值，除了通过遍历查找后删除外，还可以使用 some 方法：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
window.onload = function() {
var arr = [1, 2, 3, 4, 5];
arr.some((item, i) => {
if (item == 2) {
arr.splice(i, 1);
return true
}
})
console.log(`删除之后的数组:${arr}`);
}
</script>
</body>
</html>运行结果如下：
注意：some 方法在找到符合条件的值并手动返回 true 后，将停止后续遍历（若将 some 替换为 forEach，return 语句将不起作用）。
此外，还可以使用 findIndex 方法：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
window.onload = function() {
var arr = [1, 2, 3, 4, 5];
console.log(`原始数组:${arr}`);
var a = arr.findIndex(item => item == 3);
arr.splice(a, 1);
console.log(`删除之后的数组:${arr}`);
}
</script>
</body>
</html>运行结果如下：
注意：findIndex 仅查找第一个符合条件的元素索引，若未找到则返回 -1。
更多详细信息请查阅 MDN 关于数组的文档：
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。
ES6模块化中js文件怎么用import和export交互
2026-11-05 17:00:48
JS读取本地文件时报错或无响应的常见原因
2026-11-05 16:32:31
let、const与var的区别：JavaScript变量声明最佳实践
2026-11-05 14:16:38
JS中直接定义静态二维数组的字面量写法
2026-11-05 14:16:08
JS 怎么查找字符串中所有匹配项的位置
2026-11-05 14:15:53