JavaScript删除数组元素：splice与自定义remove方法详解
在JavaScript开发中，删除数组中的某个元素是高频操作。不同场景下，需要选择不同的删除方式。本文总结几种常见实现方案，包括自定义原型方法、原生splice以及delete的差异，帮助开发者根据实际需求选用合适的方法。一、自定义indexOf与remove方法（兼容旧浏览器）
早期JavaScript数组未提供indexOf方法，为了通用性可以给Array原型添加自定义方法。首先定义indexOf，用于查找元素首次出现的索引：
Array.prototype.indexOf = function(val) {
for (var i = 0; i < this.length; i++) {
if (this == val) return i;
}
return -1;
};
然后基于indexOf实现remove，通过splice删除元素：
Array.prototype.remove = function(val) {
var index = this.indexOf(val);
if (index > -1) {
this.splice(index, 1);
}
};
使用示例：
var emp = ['abs','dsf','sdf','fd'];
emp.remove('fd');
console.log(emp); // ['abs','dsf','sdf']
注意：原型方法会污染全局Array，现代浏览器建议直接使用Array.prototype.includes和splice，或使用函数式工具（如lodash）。
二、原生splice方法：删除、替换、添加
splice(index, len, item) 是数组最灵活的方法，会直接修改原数组。参数含义：
- index：操作起始下标
- len：要删除的元素个数（0表示不删除）
- item：可选，用于替换/添加的新元素
1. 删除操作
删除起始下标为1的一个元素：
var arr = ['a','b','c','d'];
arr.splice(1,1);
console.log(arr); // ['a','c','d']
删除起始下标为1的两个元素：
var arr2 = ['a','b','c','d'];
arr2.splice(1,2);
console.log(arr2); // ['a','d']
2. 替换操作
将下标1处的一个元素替换为'ttt'：
var arr = ['a','b','c','d'];
arr.splice(1,1,'ttt');
console.log(arr); // ['a','ttt','c','d']
将下标1开始的两个元素替换为一个'ttt'：
var arr2 = ['a','b','c','d'];
arr2.splice(1,2,'ttt');
console.log(arr2); // ['a','ttt','d']
3. 添加操作（len=0）
在下标1处插入'ttt'，不删除任何元素：
var arr = ['a','b','c','d'];
arr.splice(1,0,'ttt');
console.log(arr); // ['a','ttt','b','c','d']
三、delete方法：不推荐用于数组删除
delete操作符会将指定下标的元素置为undefined，但数组长度不变，留下空位，导致遍历时出现稀疏数组问题：
var arr = ['a','b','c','d'];
delete arr;
console.log(arr); // ['a', undefined × 1, 'c', 'd']
console.log(arr.length); // 4
这种结果通常不符合预期，开发中应避免对数组使用delete，改用splice或filter。
四、总结与建议
- 如果只需删除单个已知值的元素，推荐使用splice(index,1)，配合findIndex或indexOf获取索引。
- 如果需要删除多个满足条件的元素，可以使用filter生成新数组（不改变原数组）。
- 自定义原型方法在团队项目中可能引发冲突，建议封装为独立工具函数（如Utils.removeArrayItem）。
- 注意splice会改变原数组，如果希望保留原数组，请先拷贝一份（如arr.slice()）。
掌握splice的三种用法（删除、替换、添加），足以应对绝大部分数组操作需求，而delete仅适合用于对象属性删除，不应在数组中滥用。
Re: JavaScript删除数组元素：splice与自定义remove方法详解
楼主总结得很全面！splice 确实是 JS 里处理数组的利器，删除、替换、添加一把梭，比 delete 好用太多。自定义原型方法那段也很有价值，虽然现在主流浏览器都支持 indexOf 和 includes 了，但遇到老旧项目或者想加深理解时，自己实现一遍还是能学到东西的。另外提一下，如果需要频繁删除多个元素，用 filter 生成新数组时记得考虑性能，或者可以先收集索引再倒序 splice，避免索引错乱。感谢分享！Re: JavaScript删除数组元素：splice与自定义remove方法详解
感谢楼主详细总结！内容非常实用，尤其把 `splice` 的删除、替换、添加三种用法讲得很清楚，配合示例代码一目了然。对 `delete` 在数组中的陷阱也做了警示，这点对新手很有帮助。 我赞同你最后总结的建议：实际项目中优先用原生 `splice` 配合 `findIndex` 或 `indexOf`，尽量不污染原型；需要保留原数组时用 `filter` 生成新数组。这些做法能让代码更稳健、易维护。 另外，楼主提到 `includes` 判断存在性后再 `splice` 是现代浏览器更推荐的方式，这一点也很关键。总的来说是一篇内容扎实的分享，收藏了！Re: JavaScript删除数组元素：splice与自定义remove方法详解
楼主的总结很全面，splice确实是最灵活的数组操作工具。我个人常用组合是 `findIndex` 加 `splice`，既直观又避免原型污染。另外补充一点：如果只是删除末尾元素用 `pop()`，开头用 `shift()`，性能上比 splice 更好。对于需要保留原数组的场景，用 `filter` 生成新数组也很方便。感谢分享！
页:
[1]