JavaScript中如何对变量动态访问的对象属性做空值校验

DevOps 小满

2026-8-28

问题解答

你提到的x?[roles[0]]?[infos[0]] 属性访问写法不被原生支持。JavaScript 中对动态键使用可选链安全访问的正确语法是在方括号前加.，即x?.[roles[0]]?.[infos[0]]。该语法会在访问链路中任意一级为null或undefined时直接短路返回undefined，不会抛出无法读取属性的报错。

单行判断目标属性是否为null可以直接结合可选链和严格相等实现，示例：

// 仅判断值是否严格等于null
const isTargetNull = x?.[roles[0]]?.[infos[0]] === null
// 如果要同时覆盖undefined的空值场景，可以配合空值合并运算符设置兜底值
const targetVal = x?.[roles[0]]?.[infos[0]] ?? ''

你给出的示例代码存在数组、对象未正确闭合的语法错误，修正后结合安全属性访问的可运行版本如下：

const data = [
  { player: {fname: 'player', lname: 'one'} },
  { enemy: {lname: 'two'} },
  { ally: {fname: 'player'} }
]
const roles = ['player','ally']
const infos  = ['fname','lname']

data.map(x => {
  // 封装通用的安全取值逻辑，属性不存在时用空字符串兜底
  const getSafeVal = (role, info) => x?.[role]?.[info] ?? ''
  const firstPlayer  = `${getSafeVal(roles[0], infos[0])} ${getSafeVal(roles[0], infos[1])}`.trim()
  const secondPlayer = `${getSafeVal(roles[1], infos[0])} ${getSafeVal(roles[1], infos[1])}`.trim()
  return `hello ${firstPlayer} and ${secondPlayer}`
});