删除数组空值 JavaScript

在 JavaScript 中，删除数组中的空值是一个常见的操作。如果不进行操作，空值可能会对数据处理和展示产生不良的影响。本文将通过几种常见的方法，介绍如何删除数组空值。

使用 filter() 方法

filter() 方法是 JavaScript 中常用的数组操作方法之一，它可用于筛选出满足条件的元素，返回一个新的数组。我们可以利用该方法实现删除数组空值的功能。

const arr = ["", "apple", "", "banana", "", "cherry"];
const result = arr.filter(item => item); // 删除数组中的空值
console.log(result); // ["apple", "banana", "cherry"]

以上代码执行结果为 ["apple", "banana", "cherry"]，可以看到 filter() 方法成功地将空值元素从原数组中删除了。

我们可以使用 ES6 的箭头函数简化代码，将过滤逻辑写成一个短小的语句。

使用 forEach() 方法

forEach() 方法可用于遍历数组中的元素，如果需要删除空值，我们可以在遍历过程中，将空值元素删除。但是，需要注意的是，这种方法并不是删除，而是将空值替换成了一个占位符（例如 null）。

const arr = ["", "apple", "", "banana", "", "cherry"];
arr.forEach((item, index) => {
  if (!item) {
    arr[index] = null; // 将空值替换成 null
  }
});
console.log(arr); // [null, "apple", null, "banana", null, "cherry"]

以上代码执行结果为 [null, "apple", null, "banana", null, "cherry"]。可以看到，原数组中的空值被替换成了 null。

使用 for 循环

使用 for 循环是一种快速而简单的方法，它可以遍历数组中的元素，如果数组元素为空，则将其删除。

const arr = ["", "apple", "", "banana", "", "cherry"];
for (let i = 0, len = arr.length; i < len; i++) {
  if (!arr[i]) {
    arr.splice(i, 1);
    i--; // 数组长度减小 1，需要将索引回退 1
    len--; // 数组长度减小 1
  }
}
console.log(arr); // ["apple", "banana", "cherry"]

以上代码执行结果为 ["apple", "banana", "cherry"]，可以看到通过 splice() 方法删除数组中的元素，成功地将空值从数组中删除。

总结

本文介绍了三种常用的方法，用于删除数组中的空值，其中 filter() 方法是相对来说较为简单的方法，使用 ES6 的箭头函数可以使代码更加简洁。而使用 forEach() 方法则是将空值替换成一个占位符，当我们需要保留原数组长度时，可以使用此种方式。而使用 for 循环，虽然有些繁琐，但是更加高效且语法简单，适合处理较大的数组。