js避免对象深度引用报错

小翔努力变强

已于 2023-02-17 09:18:28 修改

阅读量205

点赞数 2

分类专栏： JavaScript 文章标签： javascript 前端 es 正则表达式 Powered by 金山文档

于 2023-02-15 15:22:38 首次发布

本文链接：https://blog.csdn.net/grx1125/article/details/129043444

版权

JavaScript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

文章讨论了在前后端合作项目中遇到的数据结构问题，当后端数据不规范时导致前端页面卡死。作者提出了三种处理复杂数据结构中引用错误的方法：层层判断、使用ES2020的可选链操作符（考虑兼容性）以及自定义的安全获取函数。通过自定义函数实现递归查找并处理可能的null或undefined值，确保程序的稳定性。文章提供了测试示例以验证方法的有效性，并邀请读者分享更多解决方案。

摘要由CSDN通过智能技术生成

最近项目上有个事情很困扰。项目是两方合作的，我方提供页面，他方提供数据。数据结构定义写的很清楚。本地测试都是没有问题，到了快要上线，联调的时候页面总是有卡死现象，查询日志后发现数据结构时而正确时而缺斤少两。

所以前端一定要保持对后端传来的数据规范性的怀疑。

那么如何在较复杂的数据结构中减少引用错误呢？

一般方法

层层判断

if(a && a.b && a.b.c){
    // xxxxx
}

ES2020

可选链操作符,非常方便，但是兼容性不好

if(a?.b?.c){
    // xxxx
}

自定义函数

函数返回内容：目标数据 | undefined | null ；

function safeGet(obj, path) {
        if (obj === undefined || obj === null) return obj; // 未找到数据或为null,执行终断
        if (!path) return obj; // 索引路径为空，执行结束
        indexList = path.split(/\[|\]|\.|,/g).filter((e) => e && e.trim());
        nextIndex = indexList.splice(1).join();
        const nextObj = Reflect.get(obj, indexList[0]);
        return safeGet(nextObj, nextIndex);
      }

测试

// 数据结构和引用链匹配
const testObj1 = [
        {
          a: {
            b: {
              c: [
                {},
                {
                  d: [{ e: "right" }],
                },
              ],
            },
          },
        },
      ];
const result1 = safeGet(testObj1, "[0].a.b.c[1].d[0].e");
console.log(result1); // right

// 数据结构异常
const testObj2 = [
        {
          a: {
            b: {
              c:null
            },
          },
        },
      ];
const result2 = safeGet(testObj2, "[0].a.b.c[1].d[0].e");
console.log(result2); // undefined

目前测试暂未出现异常，有更好的方式欢迎一起探讨。