JavaScript 中的 Nullish Coalescing 运算符

Question

如何以更好的方式完成这件事。

this.state.updateItem?this.state.updateItem.unit:'Unit';

我尝试过使用this.state.updateItem.unit || 'Unit'，但是发现它会产生错误，因为this.state.updateItem为空，所以它找不到任何unit属性。

有更好的方法吗？

- Jasson Harsojo

Answer 1

现在你必须像这样做：

(this.state.updateItem || {}).unit || 'Unit'

有一个一阶段的ES（JavaScript）提案关于可选链，我们（最终，希望）能够像这样完成：

this.state.updateItem?.unit || 'Unit'

如果您正在使用babel，您现在可以使用它了！：
https://www.npmjs.com/package/babel-plugin-transform-optional-chaining

编辑：该提议现已进入第四阶段（截至2020年1月），将被添加到JavaScript标准中。

- Faust

---

谢谢你的解决！是的，我认为做这样的事情会很棒。 - Jasson Harsojo

Answer 2

你可以尝试将空对象设置为默认值：

(this.state.updateItem || {}).unit || 'Unit'

unit 总是有值，或者为未定义。

- mickl

Answer 3

这里有一种使用es6解构和默认值的方法：

const {
  updateItem: {
    unit = 'Unit'
  } = {}
} = this.state;

如果您想要使用 unit，那么您只需直接使用即可。

- Austin Greco

---

谢谢您的建议，但我正在寻找内联答案。 - Jasson Harsojo

Answer 4

此前的答案已不再相关。

截至2020年中期，空值合并运算符被添加到官方ECMAScript中。它是一个真正的空值合并运算符，因为它的行为符合您对空值合并运算符的预期。该操作符的JavaScript语法实现源于其他几种编程语言使用的语法，因此，经验丰富的开发人员可能已经熟悉它，即使他们从未在编写JavaScript时使用过它。

const varAlpha = varBeta ?? varGamma;

“Nullish-Coalescing运算符在varAlpha不为null且不为undefined的情况下返回varBeta的值，否则返回varGamma的值。”

---

评估空值合并运算符：

let varAlpha =  varBeta ?? varGamma;

// Equates to:

let varAlpha =  (varBeta !== null && varBeta !== undefined) 
    ? varBeta
    : varGamma;

- JΛYDΞV

Answer 5

你可以像这样做。

const path = (pathString, obj) =>
  pathString.split(".")
    .reduce((obj = {}, key) => obj[key], obj);

const defaultTo = (x, y) => y == null ? x : y;

// in your own code
const unit = defaultTo(
  "Unit",
  path("state.updateItem.unit", this)
);

这些函数已经以类似于此的方式存在于库中，例如ramda或lodash/fp。

它还减少了在任何地方都需要使用obj?.state?.updateItem?.unit的需求，尽管它显然并不完美。

- Norguard