Question

这是我的地图

  return (data.map(obj => `<div style="border-color:${obj.category.color}" class="circle"></div>  ${obj.name}`)).join('<br>');

它运行良好，但是在某些情况下，obj.category不会退出。如果不存在，我只想返回：

  return (data.map(obj => `${obj.name}`)).join('<br>');

我尝试了

var validate = data.map(obj => obj.category));

if(validate){
      return (data.map(obj => `<div style="border-color:${obj.category.color}" class="circle"></div>  ${obj.name}`)).join('<br>');
} else {
  return (data.map(obj => `${obj.name}`)).join('<br>');
}

问题是我无法创建变量validate，因为加载页面时出现控制台错误：

TypeError：obj.category未定义

如果定义了，我将无法进行

Answer 1

data.map(obj => obj.category);将返回真实的数组。
您可以使用三元运算符

return (data.map(obj => obj.category ? `<div style="border-color:${obj.category.color}" class="circle"></div>  ${obj.name}` : `${obj.name}`)).join('<br>');

Answer 2

只需使用模板文字，您就可以检查obj.category是否存在通过<div style="border-color:${obj.category.color}" class="circle"></div>，如果不只是通过empty string

更改此

return (data.map(obj => `<div style="border-color:${obj.category.color}" class="circle"></div>  ${obj.name}`)).join('<br>');

对此

return (data.map(obj => `${obj.category ? <div style="border-color:${obj.category.color}" class="circle"></div> : ''}  ${obj.name}`)).join('<br>');

Answer 3

尝试使用if / else语句，例如：

const myFunc = () => {

  let data = [{
      name: 'abc',
      category: {
        color: 'red'
      }
    },
    {
      name: 'def',
      category: {
        color: 'blue'
      }
    },
    {
      name: 'ghi'
    },
  ];

  let result = (data.map(obj => {
    if (obj.category)
      return `<div style="border-color:${obj.category.color}" class="circle"></div>  ${obj.name}`
    else
      return `${obj.name}`
  })).join('<br>');

  console.log(result);
}
myFunc();

Answer 4

可以做到

var validate = data.every(obj => obj.category));

它检查每个obj是否都有类别

了解更多https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/every

Answer 5

有点奇怪，但是嘿，我也做了奇怪的事情。 第二个结果的原因是，在 div 之外使用 name 似乎很奇怪。无论哪种方式，就在这里。如果这不是您真正要问的问题，请澄清，然后我将更新答案。

let data = [
    { name: 'joe', category: { color: 'red' } },
    { name: 'bob', category: { color: 'green' } },
    { name: 'john', category: { color: 'blue' } },
    { name: 'betty' },
    { name: 'jane', category: { color: 'orange' } },
];

let result = (data.map(obj =>
    obj.category && obj.category.color ?
        `<div style="border-color:${obj.category.color}" class="circle"></div>  ${obj.name}` :
        obj.name
)).join('<br>\n');

console.log( 'first result' );
console.log(result);

result = (data.map(obj =>
    obj.category && obj.category.color ?
        `<div style="border-color:${obj.category.color}" class="circle">${obj.name}</div>` :
        obj.name
)).join('<br>\n');

console.log( '\nsecond result' );
console.log( result );

如何检查JavaScript地图中是否存在我的对象？

5 个答案: