Javascript如何避免調用不存在的屬性而致使報TypeError錯？

問題

var object = { 'a': [{ 'b': { 'c': 3 } }] }

console.log(object.a[0].b.c.d)

上述代碼會返回

方法一

var object = { 'a': [{ 'b': { 'c': 3 } }] }

console.log(object&&object.a)
console.log(object&&object.a&&object.a[0])
console.log(object&&object.a&&object.a[0]&&object.a[0].b)
console.log(object&&object.a&&object.a[0]&&object.a[0].b&&object.a[0].b.c)
console.log(object&&object.a&&object.a[0]&&object.a[0].b&&object.a[0].b.c&&object.a[0].b.c.d)

方法二

使用lodash

var object = { 'a': [{ 'b': { 'c': 3 } }] }

console.log(_.get(object, 'a'))
console.log(_.get(object, 'a[0]'))
console.log(_.get(object, 'a[0].b'))
console.log(_.get(object, 'a[0].b.c'))
console.log(_.get(object, 'a[0].b.c.d'))

方法三

var getProps = (p, o) => p.reduce((xs, x) => (xs && xs[x]) ? xs[x] : null, o)

var object = { 'a': [{ 'b': { 'c': 3 } }] }

console.log(getProps(['a'], object))
console.log(getProps(['a', '0'], object))
console.log(getProps(['a', '0', 'b'], object))
console.log(getProps(['a', '0', 'b', 'c'], object))
console.log(getProps(['a', '0', 'b', 'c', 'd'], object))

方法四

自判斷連接,自判斷連接還未歸入官方規範中，只處於第一階段的實驗特性。您須要在 babelrc 中添加 @ babel / plugin-proposal-optional-chaining 後方可以使用它。

var object = { 'a': [{ 'b': { 'c': 3 } }] }

console.log(object?.a[0]?.b?.c?.d)

參考連接

[譯] 優秀 JavaScript 開發人員應掌握的 9 個技巧