避免在JavaScript中使用空数组

问题描述 投票:0回答:4

我有此代码

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;数组,有些却是空的。像:

one

因此,我收到此错误:

未捕获(承诺)TypeError:无法读取null的属性'name'

来自此行:new_core: defCores[i].new_core.name,

现在,我正在寻求解决方案来避免此错误,并且如果我的histories数组具有值,那么即使不忽略它也要返回它(不显示任何内容)

PS:我以为for(let i = 0; i < defCores.length; i++){可以防止在空的历史上出现这种问题,但显然不会!

任何想法?

javascript vuejs2
4个回答
0
投票

我认为为您的代码添加if检查应该可行。

let defCores = el.histories;

if (defCores && defCores.length) {
  let cores = [];

  for(let i = 0; i < defCores.length; i++){
    ...
  }

  let myCores = '';
  cores.forEach(core => {
    ...
  });
}

0
投票

只需添加一个空数组检查:

for(let i = 0; i < defCores.length; i++){
  if(defCores[i].length) {
    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,
    })
  }
}

0
投票

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

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_color.color && { new_color: defCores[i].new_color.color }),
        ... (defCores[i] && defCores[i].old_core.name && { old_core: defCores[i].old_core.name }),
        ... (defCores[i] && defCores[i].old_color.color && { old_color: defCores[i].old_color.color })
    }
    if (obj && Object.keys(obj).length) {
        cores.push(obj)
    }

}

-1
投票

您的距离也是空值。

© www.soinside.com 2019 - 2024. All rights reserved.