JavaScript 中的空值合并运算符答案

【问题标题】：Nullish Coalescing operator in JavaScriptJavaScript 中的空值合并运算符
【发布时间】：2018-05-24 00:27:55
【问题描述】：

如何以更好的方式处理这件事。

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

我已经尝试过 this.state.updateItem.unit || 'unit'，但发现this.state.updateItem为NULL会报错，找不到unit的任何属性。

如何更好地做到这一点？

【问题讨论】：

标签： javascript

【解决方案1】：

之前对该问题的答案已不再相关。

从 2020 年年中开始，一个 Nullish Coalescing Operator 被添加到官方 ECMAScripts 中。它是一个真正的 Nullish Coalescing Operator，因为它的行为与您期望的 Nullish Coalescing Operator 的行为一样。运算符的 JavaScript 语法实现源自其他几种编程语言使用的语法，因此，有经验的资深开发人员可能会熟悉它，即使他们在编写 JavaScript 时从未使用过它。

const varAlpha = varBeta ?? varGamma;

“如果 varAlpha not null 并且 not 未定义，则 Nullish-Coalescing 运算符返回 varBeta 的值，否则返回 varGamma。” em>

评估 Nullish 合并运算符：

let varAlpha =  varBeta ?? varGamma;

// Equates to:

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

【讨论】：

【解决方案2】：

现在你必须这样做：

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

有一个针对optional chaining 的 ES (JavaScript) 的第一阶段提案，我们将（最终，希望）能够做这样的事情：

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

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

编辑：该提案目前处于第 4 阶段（截至 2020 年 1 月），并将被添加到 JavaScript 标准中

【讨论】：

感谢您的了解！是的，我认为做这样的事情会很棒

【解决方案3】：

你可以这样做。

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 的需求，尽管它显然并不完美。

【讨论】：

【解决方案4】：

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

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

那么你可以使用unit

【讨论】：

感谢您的建议，但我正在寻找内联答案

【解决方案5】：

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

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

unit 将始终具有值或未定义。

【讨论】：