2020年答案，确实存在！

Question

我在javascript中已经做了很多像这样的代码

if (params && params.profile && params.profile.address && params.profile.address.default)

我必须检查每个可选项，它变得相当繁琐。在javascript中是否有更好的方式类似于swift处理选项的方式，例如。

if let checked = params?.profile?.address?.default?

Answer 1

本机JS中没有这样的运算符。

但是，有一个Babel插件可以实现这一点，请检查https://github.com/davidyaha/ecmascript-optionals-proposal

另外，请参阅Null-safe property access (and conditional assignment) in ES6/2015以获取更多参考资料

Answer 2

我已经编写了一个处理此功能的功能，作为杨敏元回答的类似替代方案：

function getSafe (func) {
    try {
        return func()
    } catch (e) {
        return undefined
    }
}

这样称呼：

if (getSafe(() => params.profile.address.default))

这是有效的，因为通过将它包装在匿名函数中，它不会被评估，直到try / catch块，然后它将捕获错误并返回undefined如果任何父属性未定义。

Answer 3

2020年答案，确实存在！

现在，您可以直接直接使用.row（可选链接）来安全地测试是否存在。所有现代的浏览器都支持它。

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

undefined

如果不检查大小写，则必须存在left-side属性。如果没有，它将引发异常。

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

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

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

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

// DOM Access
domElement?.parentElement?.children?.[3]?.nextElementSibling

?. Browser Support-82％，2020年10月

Node Support-14岁以上

Mozilla Documentation

Answer 4

function optionalChaining(obj, chain) {
  return chain
    .split('.')
    .reduce(function(acc, val) {
        return acc ? acc[val] : undefined;
    }, obj);
}

var user = {
 address: {
  street: 'No.969 West WenYi Road',
},
 a: { b: { c: 2 } },
}

optionalChaining(user, 'address.street'); // 'No.969 West WenYi Road'
optionalChaining(user, 'a.b.c') // 2

该函数可以模拟可选链接。

Answer 5

是的，有一个。在ES2020中，他们添加了可选的链接和可选的函数调用。

   const person = {
        name: "Someone",
        age: 28
    }
    console.log(person?.name) // "Someone"
    console.log(person?.["age"]) // 28
    person?.getAge?.() //   no errors, just undefined

Answer 6

只需添加上面的答案，您现在可以直接从NPM安装此babel插件：

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

obj?.prop       // optional static property access
obj?.[expr]     // optional dynamic property access
func?.(...args) // optional function or method call

备注：

为了让foo？.3：0被解析为foo？ .3：0（对于向后兼容性的要求），在词法语法的层次上添加一个简单的先行，以便字符序列？在这种情况下不会被解释为单个令牌（？。令牌不能紧跟一个十进制数字）。

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

另外值得一试：

https://github.com/tc39/proposal-nullish-coalescing

https://github.com/babel/babel/tree/master/packages/babel-plugin-proposal-nullish-coalescing-operator

有没有像javascript中的swift可选链接？

6 个答案:

2020年答案，确实存在！