javascript - 避免 JavaScript 中的空数组

Question

我有这个代码

let defCores = el.histories;
let cores = [];
for(let i = 0; i < defCores.length; i++){
    cores.push({
        new_core: defCores[i].new_core.name,
        new_color: defCores[i].new_core.color,
        old_core: defCores[i].old_core.name,
        old_color: defCores[i].old_core.color,
    })
}

// using `cores` in my template to show (append data)
let myCores = '';
cores.forEach(core => {
    myCores += "<div style='width: 100%; display: inline-block; clear:both; margin-bottom: 5px;'>"+
    "<div class='coreColor' style='display: inline-block; width: 20px; height: 15px; background: "+core.old_color+";'></div>"+
    "<div class='coreName' style='margin-left: 5px; display: inline-block; width: 25%;'>" + core.old_core + "</div>"+
    "<div class='coreName' style='display: inline-block;'><i style='color: red;' class='fas fa-arrow-right'></i> <i style='color: seagreen;' class='fas fa-arrow-left'></i></div>"+
    "<div class='coreName' style='margin-left: 5px; display: inline-block; width: 25%;'>" + core.new_core + "</div>"+
    "<div class='coreColor' style='width: 20px; display: inline-block; height: 15px; background: "+core.new_color+";'></div>"+
    "</div>";
});

但是我的数据有些let defCores = el.histories;数组有些是空的。喜欢：

因此，我收到此错误：

未捕获（承诺中）类型错误：无法读取 null 的属性“名称”

这来自这一行：new_core: defCores[i].new_core.name,

现在我正在寻找解决方案来避免这个错误，如果我的histories数组有值返回它，如果不忽略它（什么都不显示）

PS：我认为for(let i = 0; i < defCores.length; i++){会在空历史记录中防止此类问题，但显然不是！

任何想法？

标签： javascriptvuejs2

Answer 1

您可以通过有条件地绑定对象中的键来尝试此操作

let defCores = el.histories;
let cores = [];
for (let i = 0; i < defCores.length; i++) {
    let obj = {
        ... (defCores[i] && defCores[i].new_core.name && { new_core: defCores[i].new_core.name }),
        ... (defCores[i] && defCores[i].new_core.color && { new_color: defCores[i].new_core.color }),
        ... (defCores[i] && defCores[i].old_core.name && { old_core: defCores[i].old_core.name }),
        ... (defCores[i] && defCores[i].old_core.color && { old_color: defCores[i].old_core.color })
    }
    if (obj && Object.keys(obj).length) {
        cores.push(obj)
    }

}