什么是？。JavaScript中的语法含义？

Question

我尝试在浏览控制台中测试此语法，但遇到错误：

{cart?.widgets?.items.map(widget => (
        <div className="billing-details__box" key={widget.id}>
          <p className="m-0">{widget.name}</p>
          <p className="my-0">{widget.value} $</p>
        </div>
 ))}

对于上面的代码，我关心的是cart？.widgets？.items是否会引发任何错误。

Answer 1

我无法确认这个语法是否正确。

它是正确的TypeScript代码，也是正确的JavaScript，这取决于运行它的引擎。Chrome(V8)已经支持这种语法（参见caniuse.com）。

在这里，您可以阅读更多关于将此语法添加到未来JS规范中的建议。

const user = {
  details: {
    name: "SpongeBob SquarePants"
  },
  repo: null
};

console.log(user.details.name) //=> "SpongeBob SquarePants"
console.log(user.repo.url) //=> undefined

它也适用于函数调用。例如，假设user.repo有一个值，我们知道它将是一个返回字符串的函数。但是，有时，正如上面所说，它可能不是一个函数。如果函数存在，我们可以执行以下操作来调用该函数，但是如果user.repo.url中的值不是函数，则代码不会引发错误：

console.log(user.repo?.url()) //=> undefined

没有可选的链接操作符？

您可以通过显式检查正在访问的属性链中每个对象属性的真实性来实现与可选链接操作符类似的行为。

function getItems_shortCircuit(obj) {
  return obj && obj.widgets && obj.widgets.items
}

function getItems_ternary(obj) {
  return obj 
    ? obj.widgets 
      ? obj.widgets.items 
        ? obj.widgets.items 
        : null 
      : null
    : null
}

let cart = {
  widgets: null
}

console.log(getItems_shortCircuit(cart)) //=> null

cart.widgets = {
  items: ["a", "b"]
}

console.log(getItems_ternary(cart)) //=> ["a", "b"]