是否有類似 javascript 中的 swift 可選鏈接之類的東西？

Question

我一直在用javascript做很多這樣的代碼

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

在那里我必須檢查每個選項，它變得非常乏味。 javascript 中是否有更好的方法類似於快速處理選項的方式，例如

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

Answer 1

我寫了一個函數來處理這個：

function getSafe (func) {
    try {
        return func()
    } catch (e) {
        if (e instanceof TypeError) {
            return undefined
        } else {
            throw e
        }
    }
}

像這樣調用它：

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

這工作，因為以匿名函數進行包裝，它不評估，直到try / catch塊，然后將捕獲錯誤並返回undefined如果有父性的不確定。

檢查e是否是TypeError可以防止它吞下函數可能拋出的任何其他錯誤，以便仍然可以根據需要處理這些錯誤。 如果您希望它在任何錯誤時返回undefined ，您可以刪除該部分：

function getSafeNoErrors (func) {
    try {
        return func()
    } catch {
        return undefined
    }
}

但是， 現在已使用相同的?. 將可選鏈接添加到語言中?. Swift 的語法，所以我建議這樣做，除非你需要支持舊的瀏覽器版本。

Answer 2

原生 JS 中沒有這樣的操作符。

但是，有一個 Babel 插件可以實現這一點，請檢查https://github.com/davidyaha/ecmascript-optionals-proposal

另外，請參閱ES6/2015 中的 Null-safe 屬性訪問（和條件賦值）以獲取更多參考

Answer 3

2020 答案，它存在！！！

您現在可以直接使用?. （可選鏈接）內聯以安全地測試是否存在。 所有現代瀏覽器都支持它。

如果屬性存在， ?. 繼續下一個檢查，或返回有效值。 任何失敗都會立即短路並返回undefined 。

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

如果不檢查 case，則 left-side 屬性必須存在。 如果沒有，它會拋出異常。

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

?. 瀏覽器支持- 82%，2020 年 10 月

節點支持- 14+

Mozilla 文檔

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