JavaScript/jQuery数组删除元素后如何实现重新索引

嘿，这个问题很常见——用delete删除数组元素时，只会移除对应位置的值，但不会改变数组的索引结构，导致数组变成稀疏数组（留下了空的索引位）。要让数组重新变成连续的、可以按json[0]/json[1]/json[2]正常访问的密集数组，有几种简单实用的方法：

方法1：用filter()过滤空位置 #

如果你已经执行了delete操作，直接用filter()就能快速生成一个新的连续数组。因为filter()会自动跳过数组中的空位置（empty slots），只保留存在的元素：

var json = [ { id: 0, text: 'enhancement' }, { id: 1, text: 'bug' }, { id: 3, text: 'invalid' }, { id: 4, text: 'wontfix' } ];
delete json[2];

// 过滤空位置，生成连续数组
json = json.filter(item => item); 

console.log(json);
// 输出：[ {id:0, text:'enhancement'}, {id:1, text:'bug'}, {id:4, text:'wontfix'} ]
// 现在可以用json[0]、json[1]、json[2]访问这三个元素

方法2：一开始就用splice()删除元素（更推荐） #

其实你完全可以跳过delete，直接用数组的splice()方法——它会在删除元素的同时自动调整数组索引，原地修改数组，不需要额外处理：

var json = [ { id: 0, text: 'enhancement' }, { id: 1, text: 'bug' }, { id: 3, text: 'invalid' }, { id: 4, text: 'wontfix' } ];

// splice(起始索引, 删除数量)
json.splice(2, 1); 

console.log(json);
// 输出：[ {id:0, text:'enhancement'}, {id:1, text:'bug'}, {id:4, text:'wontfix'} ]
// 数组已经是连续的，直接用正常索引访问即可

方法3：用Array.from()转换稀疏数组 #

Array.from()可以把稀疏数组转换成密集数组（空位置会转为undefined），再配合filter()过滤掉undefined，也能达到效果：

var json = [ { id: 0, text: 'enhancement' }, { id: 1, text: 'bug' }, { id: 3, text: 'invalid' }, { id: 4, text: 'wontfix' } ];
delete json[2];

json = Array.from(json).filter(item => item !== undefined);

console.log(json);
// 同样得到连续的数组

总结一下：如果还没执行删除操作，优先用splice()；如果已经用了delete，用filter()是最简洁的方案。

内容的提问来源于stack exchange，提问作者Trombone0904