使用delete删除数组元素后留空值，如何彻底移除JavaScript数组元素？

你遇到的问题是因为delete操作符仅会删除数组指定索引的元素值，但不会修改数组的length属性，也不会重新排列后续元素的位置，所以会留下empty占位。要彻底移除数组元素并让数组长度同步更新，有以下几种常用方法：

1. 使用Array.splice()（推荐，适用于任意索引） #

这是最通用的方法，它会直接修改原数组，删除指定位置的元素，并自动将后续元素前移，同时更新数组长度。
语法：array.splice(起始索引, 删除数量)

修改你的删除按钮事件代码：

document.getElementById('delete').addEventListener('click', () => {
  // 删除索引0的1个元素
  foo.splice(0, 1);
});

2. 针对首尾元素的快捷方法 #

• 删除第一个元素：使用Array.shift()，它会移除数组第一个元素并返回该元素，数组长度自动减1

  foo.shift(); // 等价于splice(0, 1)
  

• 删除最后一个元素：使用Array.pop()，移除数组最后一个元素，长度减1

  foo.pop();
  

3. 基于条件过滤元素（返回新数组） #

如果需要删除满足特定条件的元素（而非指定索引），可以用Array.filter()生成一个不包含目标元素的新数组：

// 例如删除名为"test.jpg"的文件
foo = foo.filter(file => file.name !== 'test.jpg');

修改后的完整代码示例：

var foo = []; 
var input = document.getElementById('input');

document.getElementById('add').addEventListener('click', () => {
  foo.push(input.files[0]);
});

document.getElementById('delete').addEventListener('click', () => {
  // 使用splice彻底删除索引0的元素，增加空数组判断避免报错
  if(foo.length > 0) {
    foo.splice(0, 1);
  }
});

document.getElementById('check').addEventListener('click', () => {
  console.log(foo);
  console.log(foo.length);
});

<button id="add">ADD</button>
<button id="delete">DELETE</button>
<button id="check">CHECK</button>
<br><br>
<input type="file" id="input" placeholder="UPLOAD IMAGE">

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