JavaScript：处理深层对象的字段不确定是否存在的情况

梦里梦外; 2024-03-26 11:03 65阅读 0赞

**一、背景**

当使用数据的时候，如果数据结构比较复杂，数据深度比较深，这个时候某层级的字段可能没有数据，或者某层级的字段是null（特别是从接口获取数据），这时候可能会报错了，如图：

![87b24a36881c46d18cfd38ffd4d32eb1.png][]

本文要处理的就是 undefined 与 报错 的情况

**二、方法**

**2.1、方法一 ||**

如果只是最后一个层级的数据不确定是否存在可以适用 “||” 的方法

错误示例：

![dfc28642c3704f25a0525721b9e01ccd.png][]

正确示例：

![81f7da68eed14a7da8109306c6335342.png][]

**2.2、方法二 &&**

正确示例1：

![54f833541ce343faa2d3d5b77e0b559c.png][]

错误示例1：

![e67964213f854bce8858ec97eead6eac.png][]

修正示例1：

![36f5e04c275f43c8a20bec7728b22aaa.png][]

此时没有报错，不会阻断后续代码的执行

错误示例2：

![8f2362085476404d9d20a93f74508125.png][]

修正示例2：

![38319ddef1764bf0b396808d5458395f.png][]

此时没有报错，不会阻断后续代码的执行

**2.3、方法三 ？**

正确示例：

![8c3cc37fda574bf88098a56f77a0f533.png][]

错误示例：

![6b4c87e61f9e4aa6a70de819ddfee5fc.png][]

修正示例：

![4e5079241be54a029552a3c3f84ecff5.png][]

此时返回undefined，没有报错，不会阻断后续代码的执行

修正示例：

![29c0dde70e844dc09c77fed48058d403.png][]

![10133e074dc642458bc0d5301687b6e1.png][]

此时结合 “||” 方法，返回 空字符串 “” ，没有报错，也没有报undefined

**2.4、方法四 obj.hasOwnProperty("name")**

存在，返回 true

![1fe1c89c9cff4bc88ad6cb6f1641c3d2.png][]

不存在，返回 false

![1fcc84811bec4bfd8c5be603c79892a4.png][]

可以结合三目运算

![338f7ae3d286461b8caf97ac21f1d318.png][]

可以结合 ||

![4994c7e4245341ba849b859d7a106fb8.png][]

不可以连续使用  
第一个返回了Booleans值，后边一个基于布尔值检测，返回false

![9af2748946df4f3aa670c2614cdc9f5d.png][]

**2.5、方法五 try \{\} catch () \{\}**

打印了报错信息，指出错误的原因，这个方法很好，不只可以用于处理深层数据可能带来的错误，还可以处理一个方法，或者一个代码段可能出现的错误

![88bcd175b77b4c7f9106425b88037e72.png][]

**2.6、方法六 lodash**

ladash里边也有提供一些方法。比如has方法。

**三、欢迎交流指正，关注我，一起学习。**

[87b24a36881c46d18cfd38ffd4d32eb1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/5d96350a5b644161862f5318c9acf734.png
[dfc28642c3704f25a0525721b9e01ccd.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/295ea5fa5d5c4f6bbda2ef254443380b.png
[81f7da68eed14a7da8109306c6335342.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/5d66d1fa1bd6407193abac94bc3c1946.png
[54f833541ce343faa2d3d5b77e0b559c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/2583068d6815469dba74d9396e71bcd6.png
[e67964213f854bce8858ec97eead6eac.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/260c3b2b3a7f402ea390f442215c7424.png
[36f5e04c275f43c8a20bec7728b22aaa.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/d0245fee66ba4b07a2c002a24a218e67.png
[8f2362085476404d9d20a93f74508125.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/1d6835ca8be84227be55eb6b48df3295.png
[38319ddef1764bf0b396808d5458395f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/5880174edb6a4c39aa905c5a3c1855cb.png
[8c3cc37fda574bf88098a56f77a0f533.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/3367b3ac254944d8bb14543be8641c80.png
[6b4c87e61f9e4aa6a70de819ddfee5fc.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/15a321916116461aa6ffd98eee8fbb45.png
[4e5079241be54a029552a3c3f84ecff5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/ff77a9c3aaea433bb08e036ea40826f6.png
[29c0dde70e844dc09c77fed48058d403.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/ae76f089df8c498ea047326f89288e51.png
[10133e074dc642458bc0d5301687b6e1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/cec50aee1ae04ad485e5732b87a00e48.png
[1fe1c89c9cff4bc88ad6cb6f1641c3d2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/ea130a511f314f2d8ae8eff7a55dd828.png
[1fcc84811bec4bfd8c5be603c79892a4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/f308b2dab75e466481728b5017769098.png
[338f7ae3d286461b8caf97ac21f1d318.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/61f9d277e539454286c3f4c8f925a506.png
[4994c7e4245341ba849b859d7a106fb8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/704729fd632f429a8779282fe29b1c60.png
[9af2748946df4f3aa670c2614cdc9f5d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/5502225ed333446e82039a151fad0bd4.png
[88bcd175b77b4c7f9106425b88037e72.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/0dd69501556e4af4853233fa5bd4e0fc.png