js 如何删除数组中的空值

在JavaScript中，删除数组中的空值可以通过多种方法实现，包括使用内置的数组方法、循环等。以下是几种常见的方法：filter()方法、forEach()方法、循环遍历、Array.prototype.reduce()方法。本文将详细介绍这些方法的具体实现，并对每种方法的优缺点进行分析。

一、使用filter()方法

使用filter()方法可以轻松地删除数组中的空值、代码简洁、执行效率高。

filter()方法是Array对象的一个内置方法，用于创建一个新数组，其包含通过所提供函数实现的测试的所有元素。以下是实现步骤：

let array = [1, 2, '', 3, null, 4, undefined, 5, NaN, 6];
let filteredArray = array.filter(Boolean);
console.log(filteredArray); // 输出: [1, 2, 3, 4, 5, 6]

详细描述：在上面的代码中，filter()方法接受一个回调函数Boolean，该函数会将所有“假值”过滤掉，包括空字符串('')、null、undefined、NaN、0和false。因此，结果数组中仅包含“真值”。

二、使用forEach()方法

使用forEach()方法可以灵活处理多种情况、代码相对复杂、适合定制化需求。

forEach()方法是Array对象的另一个内置方法，用于对数组的每个元素执行一次提供的函数。以下是实现步骤：

let array = [1, 2, '', 3, null, 4, undefined, 5, NaN, 6];
let resultArray = [];
array.forEach(item => {
    if (item) {
        resultArray.push(item);
    }
});
console.log(resultArray); // 输出: [1, 2, 3, 4, 5, 6]

在这段代码中，我们使用forEach()方法遍历数组中的每个元素，并在回调函数中通过条件判断(if (item))来过滤掉空值。如果元素通过测试，就将其添加到结果数组中。

三、使用循环遍历

使用循环遍历可以控制每个步骤、适合复杂逻辑、代码繁琐、执行效率稍低。

尽管现代JavaScript中推荐使用内置方法，但传统的for循环依然是解决问题的有效方法。以下是实现步骤：

let array = [1, 2, '', 3, null, 4, undefined, 5, NaN, 6];
let resultArray = [];
for (let i = 0; i < array.length; i++) {
    if (array[i]) {
        resultArray.push(array[i]);
    }
}
console.log(resultArray); // 输出: [1, 2, 3, 4, 5, 6]

在这段代码中，通过for循环遍历数组中的每个元素，并在条件判断(if (array[i]))中过滤掉空值。如果元素通过测试，就将其添加到结果数组中。

四、使用reduce()方法

使用reduce()方法可以在一次遍历中完成所有操作、代码简洁、执行效率高。

reduce()方法是Array对象的另一个强大的内置方法，用于对数组中的每个元素执行一个由您提供的reducer函数(升序执行)，将其结果汇总为单个返回值。以下是实现步骤：

let array = [1, 2, '', 3, null, 4, undefined, 5, NaN, 6];
let filteredArray = array.reduce((acc, item) => {
    if (item) {
        acc.push(item);
    }
    return acc;
}, []);
console.log(filteredArray); // 输出: [1, 2, 3, 4, 5, 6]

在这段代码中，reduce()方法接受一个回调函数和一个初始值([])。回调函数的参数包括累积器(acc)和当前值(item)。在回调函数中，通过条件判断(if (item))来过滤掉空值。如果元素通过测试，就将其添加到累积器(acc)中。

五、使用非空运算符(??)

使用非空运算符可以简化代码、适用于简单场景、代码简洁、执行效率高。

非空运算符(??)用于在变量为null或undefined时提供默认值。虽然不是直接用于过滤数组，但可以在组合其他方法时使用。以下是实现步骤：

let array = [1, 2, '', 3, null, 4, undefined, 5, NaN, 6];
let filteredArray = array.map(item => item ?? '').filter(Boolean);
console.log(filteredArray); // 输出: [1, 2, 3, 4, 5, 6]

在这段代码中，我们使用map()方法将所有null和undefined值替换为空字符串('')，然后使用filter()方法过滤掉空值。

六、总结

在JavaScript中，删除数组中的空值可以通过多种方法实现，包括filter()方法、forEach()方法、循环遍历、reduce()方法和非空运算符(??)。每种方法都有其优缺点和适用场景：

filter()方法：代码简洁、执行效率高，适用于大多数情况。
forEach()方法：灵活处理多种情况，适合定制化需求。
循环遍历：控制每个步骤，适合复杂逻辑，代码繁琐。
reduce()方法：在一次遍历中完成所有操作，代码简洁、执行效率高。
非空运算符(??)：简化代码，适用于简单场景。

根据具体需求选择合适的方法，可以提高代码的可读性和执行效率。