ES6/2015中的零安全财产访问(和条件分配)

Question

是否有一个null-safe属性访问(空传播/存在)操作者在ES6(ES2015/JavaScript.next /和谐)等?.中的CoffeeScript例如？或者是否计划用于ES7？

var aThing = getSomething()
...
aThing = possiblyNull?.thing

这将大致如下:

if (possiblyNull != null) aThing = possiblyNull.thing

理想情况下,解决方案不应该分配(甚至undefined)到aThing如果possiblyNull是null

Answer 1

目前处于第1阶段的功能:可选链接.

https://github.com/tc39/proposal-optional-chaining

如果你想今天使用它,有一个Babel插件可以完成它.

https://github.com/davidyaha/ecmascript-optionals-proposal

更新(2017-08-01):如果你想使用官方插件,你可以尝试使用新变换的Babel 7的alpha版本.你的旅费可能会改变

https://www.npmjs.com/package/babel-plugin-transform-optional-chaining

Answer 2

它不如？好.运算符,但要实现类似的结果,您可以这样做:

user && user.address && user.address.postcode

由于null和undefined都是假值(参见此引用),&&只有在先例不为null或未定义时才访问运算符后的属性.

或者,您可以编写如下函数:

function _try(func, fallbackValue) {
    try {
        var value = func();
        return (value === null || value === undefined) ? fallbackValue : value;
    } catch (e) {
        return fallbackValue;
    }
}

用法:

_try(() => user.address.postcode) // return postcode or undefined 

或者,具有后备值:

_try(() => user.address.postcode, "none") // return postcode or a custom string

Answer 3

不.你可以在JavaScript中使用lodash #get或类似的东西.

Answer 4

2020 解决方案，?.以及??

您现在可以直接使用?.(Optional Chaining) 内联来安全地测试是否存在。所有现代浏览器都支持它。

?? (Nullish Coalescing) 可用于在未定义或为空的情况下设置默认值。

aThing = possiblyNull ?? aThing
aThing = a?.b?.c ?? possiblyNullFallback ?? aThing

如果属性存在，则?.进行下一个检查，或返回有效值。任何故障都会立即短路并返回undefined。

const example = {a: ["first", {b:3}, false]}

example?.a  // ["first", {b:3}, false]
example?.b  // undefined

example?.a?.[0]     // "first"
example?.a?.[1]?.a  // undefined
example?.a?.[1]?.b  // 3

domElement?.parentElement?.children?.[3]?.nextElementSibling

null?.()                // undefined
validFunction?.()       // result
(() => {return 1})?.()  // 1

为确保默认定义值，您可以使用??. 如果您需要第一个真值，您可以使用||.

example?.c ?? "c"  // "c"
example?.c || "c"  // "c"

example?.a?.[2] ?? 2  // false
example?.a?.[2] || 2  // 2

如果不检查 case，则 left-side 属性必须存在。如果没有，它会抛出异常。

example?.First         // undefined
example?.First.Second  // Uncaught TypeError: Cannot read property 'Second' of undefined

?.浏览器支持- 90%，2021 年 7 月

??浏览器支持- 90%

Mozilla 文档

——

逻辑空赋值，2020+ 解决方案

目前正在向浏览器??=、||=和 中添加新的运算符&&=。它们并不能完全满足您的要求，但可能会导致相同的结果，具体取决于您的代码目标。

注意：这些在公共浏览器版本中还不常见，但 Babel 应该可以很好地转换。将随着可用性的变化而更新。

??=检查左侧是否未定义或为空，如果已定义则短路。如果不是，则左侧被分配右侧值。||=and&&=是相似的，但基于||and&&运算符。

基本示例

let a          // undefined
let b = null
let c = false

a ??= true  // true
b ??= true  // true
c ??= true  // false

对象/数组示例

let x = ["foo"]
let y = { foo: "fizz" }

x[0] ??= "bar"  // "foo"
x[1] ??= "bar"  // "bar"

y.foo ??= "buzz"  // "fizz"
y.bar ??= "buzz"  // "buzz"

x  // Array [ "foo", "bar" ]
y  // Object { foo: "fizz", bar: "buzz" }

浏览器支持2021 年 7 月 - 89%

Mozilla 文档

Answer 5

香草替代安全的财产访问

(((a.b || {}).c || {}).d || {}).e

最简洁的条件赋值可能就是这个

try { b = a.b.c.d.e } catch(e) {}

Answer 6

不,ES6中没有空传播运算符.您将不得不使用其中一种已知模式.

但是,您可以使用解构:

({thing: aThing} = possiblyNull);

有很多讨论(例如这个)在ES7中添加这样的运算符,但没有一个真正起飞.