JavaScript中数组扁平化并移除null值的优化方案问询

你当前的方案存在两个问题：一是冗余的条件判断（外层的data_array[index][0] != undefined完全没必要，还可能导致漏处理子数组中第一个元素为null但后续有有效值的情况）；二是代码不够简洁。下面提供几种更优的实现方式：

原始数组 #

const data_array = [
    [
        {
            "city": "Beijing",
            "placename": "Jingshan Park",
            "overall_rating": 5
        },
        {
            "city": "Beijing",
            "placename": "Beijing Ancient Observatory",
            "overall_rating": 3
        }
    ],
    [
        {
            "city": "Washington, D.C.",
            "placename": "National Air and Space Museum",
            "overall_rating": 4
        },
        null
    ],
    [
        null,
        null
    ],
    [
        null,
        null
    ],
    [
        null,
        null
    ]
];

期望输出 #

[
    {
        "city": "Beijing",
        "placename": "Jingshan Park",
        "overall_rating": 5
    },
    {
        "city": "Beijing",
        "placename": "Beijing Ancient Observatory",
        "overall_rating": 3
    },
    {
        "city": "Washington, D.C.",
        "placename": "National Air and Space Museum",
        "overall_rating": 4
    }
]

方案1：原生API组合（最简洁高效） #

利用ES6+的flat()和filter()方法，代码极简且性能优异（原生方法经过引擎优化）：

const result = data_array.flat().filter(item => item !== null);

• flat()：默认扁平化一层数组，刚好适配你的两层嵌套结构；如果需要处理更深层级的嵌套，可传入Infinity作为参数（如flat(Infinity)）。
• filter()：直接过滤掉所有null值，同时保留所有非null的有效对象。

方案2：reduce手动处理（兼容性更好） #

如果需要兼容不支持flat()的旧环境，可使用reduce实现扁平化+过滤：

const result = data_array.reduce((acc, subArr) => {
    subArr.forEach(item => {
        if (item !== null) acc.push(item);
    });
    return acc;
}, []);

• 用reduce遍历外层数组，累加器acc存储最终结果；
• 遍历每个子数组，只将非null的元素推入累加器，逻辑清晰且避免了冗余判断。

原方案的问题说明 #

你原来的代码中，外层的if(data_array[index][0] != undefined)判断是完全多余的：

1. 若子数组第一个元素是null（但后续有有效值），这个判断会直接跳过整个子数组，导致数据丢失；
2. 即使子数组全为null，内层循环也会遍历但不会push任何元素，不会产生副作用，完全不需要提前跳过。

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