JavaScript 中的空合并运算符

IT技术 javascript
2021-02-23 12:48:46

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

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

我试过 this.state.updateItem.unit || 'Unit',但它发现它会产生错误,因为 this.state.updateItem 为 NULL,然后它找不到任何 unit 的属性。

如何以更好的方式做到这一点?

5个回答

现在你必须这样做:

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

ES (JavaScript) 有一个关于可选链的第一阶段提案,我们将(最终,希望)能够做这样的事情:

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

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

编辑:该提案现在处于第 4 阶段(截至 2020 年 1 月),并将被添加到 JavaScript 标准中

感谢您的了解!是的,我认为做这样的事情会很棒
2021-05-08 12:48:46

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

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

单位将始终具有值或未定义。

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

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

那么你就可以使用 unit

感谢您的建议,但我正在寻找内联答案
2021-05-04 12:48:46

之前对这个问题的回答不再相关。

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

const varAlpha = varBeta ?? varGamma;

“如果 varAlpha不为空且不是未定义的,则Nullish-Coalescing 运算符返回 varBeta 的值,否则返回 varGamma。”



评估空合并算子:

let varAlpha =  varBeta ?? varGamma;

// Equates to:

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

你可以做这样的事情。

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