安全访问嵌套 javascript 对象内的属性

IT技术 javascript reactjs
2021-05-04 03:20:51

对象结构如下。

object = {
  obj1: {
    obj2: {
       name: 'MY name'
    }
  }
}

这种结构是动态的,有时不会有 obj1。

因此,在react中,您将编写代码,例如..

object && obj1 && obj2 && obj2.name

这样只有当存在对象、obj1 和 obj2 时,才会显示 obj2.name。

在这种情况下,不会有任何未定义的错误,因为在进入函数之前检查每个对象的存在。

是否有上述代码的替代方法,以便在所有对象都存在时显示名称。如果没有,它不应该抛出错误。

4个回答

使用 hasOwnProperty 检查 obj1 是否存在

object = {
  obj1: {
    obj2: {
       name: 'MY name'
    }
  }
}
if(object.hasOwnProperty('obj1'))
console.log(object.obj1.obj2.name)
else
console.log(object.obj2.name)

尝试

object = {
  obj1: {
    obj2: {
       name: 'MY name'
    }
  }
}
    
var name = (object.hasOwnProperty('obj1'))  ? object.obj1.obj2.name : object.obj2.name;
console.log(name);

在阅读嵌套的属性之前,您需要检查每个属性:

const name = object && object.obj1 && object.obj1.obj2 && object.obj1.obj2.name;

这既费力又冗长,因为您必须一遍又一遍地重复相同的事情来访问深度嵌套的属性。

我建议使用一个safeEval函数,它用 try/catch 包装您潜在的危险属性访问代码,并undefined在发生错误时返回这比手动检查每个属性要短得多:

const name = safeEval(() => obj.obj1.obj2.name);

下面是一个例子:

const obj = { obj1: { obj2: { name: 'Hello' } } }

function safeEval(fn) {
  try { return fn(); }
  catch { return undefined; }
}

const a = obj && obj.obj1 && obj.obj1.obj2 && obj.obj1.obj2.name;
const b = safeEval(() => obj.obj1.obj2.name);
const c = safeEval(() => obj.obj1.obj2.obj3.obj4.name);

console.log(a, b, c);

我建议编写一个递归函数来检查对象并在找到名称时递归它的子对象。我看到其他人建议捕获错误 - 我建议不要滥用异常处理来处理这样的运行时错误。