Javascript如何避免调用不存在的属性而导致报TypeError错？

张红新发布于2019-08-23 14:54 / 580人阅读

摘要：问题上述代码会返回方法一方法二使用方法三方法四自判断链接自判断链接还未纳入官方规范中，只处于第一阶段的实验特性。您需要在中添加后方可使用它。参考链接译优秀开发人员应掌握的个技巧

问题

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

私有云云服务器属性导致只删除小米云服务器的视频而不删除本机视频服务器报内存错远程报错提示协议

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/101337.html

猫头鹰的深夜翻译：从1000+JS项目中汇总的10个最容易出现的错误(以及如何解决)

摘要：常出现的错误前十位为了可读性，错误名称进行了一定的简写。让我们深入了解每个错误发生的原因以及解决方法。这个问题很容易解决。当未捕获的错误跨越违法跨域策略的域边界时，会发生脚本错误。这是当你在中试图调用的方法时出现的错误。 JavaScript常出现的错误前十位 showImg(https://segmentfault.com/img/bV3Z1z?w=1116&h=691); 为了可读...

eccozhou 2019-08-26 11:46 评论0 收藏0
JavaScript之错误异常探讨

摘要：提供一套错误处理机制，错误是干扰程序正常流程的非正常的事故。构造函数是通用错误类型，除了类型，还有等类型。浏览器输出其他错误类型构造函数是继承，实例是一致的。数值超出有效范围数值超出有效范围创建一个实例，表示错误的原因无效引用。同步发布于 https://github.com/xianshanna... 我的建议是不要隐藏错误，勇敢地抛出来。没有人会因为代码出现 bug 导致程序崩溃...

LdhAndroid 2019-08-23 16:43 评论0 收藏0
错误检测（1）------try-catch语句 From 《高程3》

摘要：类型的错误会在数值超出相应范围时触发。最常发生类型错误的情况，就是传递给函数的参数事先未经检查，结果传入类型与预期类型不相符。捕获错误的目的在于避免浏览器以默认方式处理它们而抛出错误的目的在于提供错误发生具体原因的消息。 0 前言目前读到了《高程3》的错误检测部分，现在先挖一个坑，关于错误检测应该写三篇总结：firebug检测错误和输出信息；try-catch错误捕获；常见错误种类。...

UnixAgain 2019-08-21 14:38 评论0 收藏0
错误检测（1）------try-catch语句 From 《高程3》

摘要：类型的错误会在数值超出相应范围时触发。最常发生类型错误的情况，就是传递给函数的参数事先未经检查，结果传入类型与预期类型不相符。捕获错误的目的在于避免浏览器以默认方式处理它们而抛出错误的目的在于提供错误发生具体原因的消息。 0 前言目前读到了《高程3》的错误检测部分，现在先挖一个坑，关于错误检测应该写三篇总结：firebug检测错误和输出信息；try-catch错误捕获；常见错误种类。...

Thanatos 2019-08-01 15:50 评论0 收藏0
面对对象严格模式

摘要：对只读属性赋值会报错删除不可配置的属性会报错只设置了取值器的属性不可写严格模式下，对一个只有取值器没有存值器的属性赋值，会报错。严格模式禁止这种用法，全局变量必须显式声明。严格模式明确规定，函数内部使用将会报错。设计目的启用方法显式报错只读属性不可写只设置了取值器的属性不可写禁止扩展的对象不可扩展eval、arguments 不可用作标识名函数不能有重名的参数禁止八进制的前缀0表示法...

paraller 2019-08-26 10:12 评论0 收藏0