Question

需要一点帮助。我有一系列要过滤的属性。但是，如果一个属性不存在，我的视图将无法渲染，因为该属性变得不确定。我需要优雅地忽略或显示其他值。

export const countryList = [
    {name: 'France', flagCode: 'fr'},
    {name: 'England', flagCode: 'england'},
    {name: 'Germany', flagCode: 'gm'},
    {name: 'default', flagCode: 'default'},
];

const country = `${nationality}`
const flag = countryList.filter(function (el) {
    return el.name.toLowerCase() === country.toLowerCase();
})[0].flagCode;

因此，如果${nationality}返回“意大利”，则.flagCode将返回undefined。我可以将意大利添加到我的阵列中来解决此问题，但是仍然会有一些我想念的国家，需要一个更加优雅的方法。因此，在我的函数中，我需要检查undefined是否返回默认名称“ default”，如果确实存在则从数组中返回值。预先感谢。

Answer 1

您可以使用OR运算符||来完成

const country = countryList.find(el => (el.name.toLowerCase() === country.toLowerCase());

const flag = (country && country.flagCode) || 'default';

Answer 2

您可以首先应用some来检查是否存在，如果是false，则直接分配一个default，否则，运行filter代码

let countryList = [
  {name: 'France', flagCode: 'fr'},
  {name: 'England', flagCode: 'england'},
  {name: 'Germany', flagCode: 'gm'},
  {name: 'default', flagCode: 'default'},
];

const country = `Italy`;
let flag = "";

if(countryList.some(x=>x.name === country)){
  flag = countryList.filter(function (el) {
       return el.name.toLowerCase() === country.toLowerCase();
     })[0].flagCode;
}else{
  flag = "default"
}

console.log(flag);

Answer 3

const country = countryList.filter(function (el) {
    return el.name.toLowerCase() === country.toLowerCase();
})[0];

您可以使用默认值

const flag = country.flagCode || 'default';

或者您也可以使用三元运算符，这与上面相同

const flag = !!country.flagCode ? country.flagCode : 'default';

如果属性未定义或不存在

3 个答案: