在JavaScript开发中，删除数组中的某个元素是高频操作。不同场景下，需要选择不同的删除方式。本文总结几种常见实现方案，包括自定义原型方法、原生splice以及delete的差异，帮助开发者根据实际需求选用合适的方法。
一、自定义indexOf与remove方法（兼容旧浏览器）
早期JavaScript数组未提供indexOf方法，为了通用性可以给Array原型添加自定义方法。首先定义indexOf，用于查找元素首次出现的索引：
- Array.prototype.indexOf = function(val) {
- for (var i = 0; i < this.length; i++) {
- if (this[i] == 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[1];
- 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仅适合用于对象属性删除，不应在数组中滥用。 |
发表于 
发表于