JavaScript中移除数组空元素的方法

技术背景

在JavaScript开发中，我们经常会遇到需要处理数组的情况，而数组中可能包含空元素，如null、undefined、空字符串等。移除这些空元素可以使数组更加干净，便于后续的操作和处理。

实现步骤

1. 使用filter方法

filter方法是JavaScript中数组的一个内置方法，它可以创建一个新数组，其中包含通过所提供函数实现的测试的所有元素。

移除所有假值元素（包括null、undefined、0、NaN、空字符串和false）

var arr = [1, 2, null, undefined, 3, 0, '', false, 4];
var filtered = arr.filter(Boolean);
console.log(filtered); // [1, 2, 3, 4]

移除null和undefined元素

var array = [0, 1, null, 2, "", 3, undefined, 3, 4];
var filtered = array.filter(function (el) {
    return el != null;
});
console.log(filtered); // [0, 1, 2, "", 3, 3, 4]

2. 经典的迭代方法

通过循环遍历数组，将非空元素复制到数组末尾，然后截取数组。

var arr = [1, 2, null, undefined, 3, 0, 4];
var len = arr.length, i;

for (i = 0; i < len; i++) {
    arr[i] && arr.push(arr[i]);  // 复制非空值到数组末尾
}

arr.splice(0, len);  // 截取数组，只保留非空值
console.log(arr); // [1, 2, 3, 0, 4]

3. 使用jQuery的grep方法

var arr = [1, 2, null, undefined, 3, 0, 4];
arr = $.grep(arr, n => n == 0 || n);
console.log(arr); // [1, 2, 3, 0, 4]

4. 使用underscore.js或lodash

// underscore.js
var arr = [1, false, "", undefined, 2];
var filtered = _.filter(arr, Boolean);
console.log(filtered); // [1, 2]

// lodash
var arr = [1, false, "", undefined, 2];
var filtered = _.compact(arr);
console.log(filtered); // [1, 2]

5. 自定义函数

function removeFalsyElementsFromArray(someArray) {
    var newArray = [];
    for (var index = 0; index < someArray.length; index++) {
        if (someArray[index]) {
            newArray.push(someArray[index]);
        }
    }
    return newArray;
}

var arr = [1, 2, null, undefined, 3, 0, 4];
var filtered = removeFalsyElementsFromArray(arr);
console.log(filtered); // [1, 2, 3, 4]

核心代码

移除所有假值元素

var arr = [1, 2, null, undefined, 3, 0, '', false, 4];
var filtered = arr.filter(Boolean);
console.log(filtered); // [1, 2, 3, 4]

移除null和undefined元素

var array = [0, 1, null, 2, "", 3, undefined, 3, 4];
var filtered = array.filter(function (el) {
    return el != null;
});
console.log(filtered); // [0, 1, 2, "", 3, 3, 4]

最佳实践

• 使用filter方法：filter方法是最常用和简洁的方法，它可以很方便地移除数组中的空元素。
• 根据需求定义过滤条件：如果需要保留0，可以使用filter方法并自定义过滤条件。

var arr = [0, 1, null, 2, "", 3, undefined, 3, 4];
var filtered = arr.filter(function (el) {
    return el === 0 || el;
});
console.log(filtered); // [0, 1, 2, 3, 3, 4]

常见问题

1. filter方法在旧浏览器中不支持

Array.prototype.filter在IE<9中不支持，可以使用以下polyfill来添加支持：

if (!Array.prototype.filter) {
    Array.prototype.filter = function(fun/*, thisArg*/) {
        'use strict';
        if (this === void 0 || this === null) {
            throw new TypeError();
        }
        var t = Object(this);
        var len = t.length >>> 0;
        if (typeof fun !== 'function') {
            throw new TypeError();
        }
        var res = [];
        var thisArg = arguments.length >= 2 ? arguments[1] : void 0;
        for (var i = 0; i < len; i++) {
            if (i in t) {
                var val = t[i];
                if (fun.call(thisArg, val, i, t)) {
                    res.push(val);
                }
            }
        }
        return res;
    };
}

2. 不同方法对不同类型空元素的处理不同

不同的方法对null、undefined、0、空字符串等空元素的处理可能不同，需要根据具体需求选择合适的方法。例如，如果需要保留0，就不能直接使用filter(Boolean)。