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 个技巧