如果属性未定义或不存在

时间:2018-06-21 08:47:43

标签: javascript reactjs ecmascript-6

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

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”,如果确实存在则从数组中返回值。  预先感谢。

3 个答案:

答案 0 :(得分:2)

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

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

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

答案 1 :(得分:1)

您可以首先应用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);

答案 2 :(得分:1)

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';