• 实用代码JavaScript实用小函数一枚(深入对象取值)


    适用场合描述

    做web开发时使用JSON作为数据传输格式时,如果服务器端传回的JSON数据对象层次嵌套过深。比如下面这段:

    服务器端返回的数据
    1 var data = {
    2     a: {
    3         b: {
    4             c: [123, 456, { 
    5                 d: [789, "想要的数据"]
    6             }]
    7         }
    8     }
    9 };

    我如果想取出最内部d的第二个元素,通常会这么些写:
    data.a.b.c[2].d[1];
    面对这么多"."心里总是胆战心惊怦怦直跳的说。如果碰巧c里面没有第二个元素,那等着吧,浏览器会毫不犹豫的给你个大红X

    异常

    此小函数或许会让你恢复内心些许平静

    我的解决办法

    因为JavaScript中的对象字段存取可以像数组一样用[]来做,那为何不把"data.a.b.c[2].d[1]"分割开来,一个一个遍历用数组方式去取呢,取一个判断一个,防止用空对象去去读数据,所以萌生此法,请看代码:

    Object.prototype.TryGetValue
     1 Object.prototype.TryGetValue = function (filedOrIndexExpression, 
     2                                                             defaultValue) {
     3     //解析得到的字段或数组下标数组
     4     var filedOrIndexs = [];
     5     //返回值
     6     var currentValue = this;
     7     //如果不是Object或者数组则直接返回
     8     if (this.constructor != Object
     9         && this.constructor != Array) {
    10         return currentValue;
    11     }
    12     //判断属性路径参数
    13     if (typeof filedOrIndexExpression != "string") {
    14         throw new Error("路径表达式必须是字符串!");
    15     }
    16     //分割出字段或数组下标
    17     filedOrIndexs = filedOrIndexExpression.split(".") || [];
    18     //遍历字段或数组下标
    19     for (var i = 0; i < filedOrIndexs.length; i++) {
    20         var currentFiledOrIndex = filedOrIndexs[i];
    21         //如果等于默认值了,说明替换时已经无值可替换,已被设置为默认值
    22         //故返回默认值,退出函数
    23         if (currentValue === defaultValue) {
    24             return defaultValue;
    25         }
    26         //替换当前值
    27         currentValue = currentValue[currentFiledOrIndex] || defaultValue;
    28     }
    29     return currentValue;
    30 };

    此方法接受两个参数,第一个是字段和数组下标的混合表达式,说白了就是用来"."分割的字符串,第二个参数是如果去不到数据时返回的默认值,如果不写则为undefined。一开始的想法是字段和数组下标分开处理,被正则折磨了半天也没有个结果来(分割[和]时)。突然觉得自己犯2了,,,都准备用数组方式取字段了,还区分个毛线。。。

    DEMO和说明

    DEMO
    1 //使用是不关你是数组还是字段,一律用"."表示
    2 var mydata = data.TryGetValue("a.b.c.2.d.1", "");
    3 alert(mydata); //弹出"想要的数据";
    4 
    5 //由于最内部的数组没有以2为下标的元素,故会返回默认值
    6 mydata = data.TryGetValue("a.b.c.3.d.1", false);
    7 alert(mydata); //弹出"false";

    哈哈,大功搞成,再也不用怕某个对象为null而引起的异常了。有点遗憾的是[和]处理不好,使得第一个参数"a.b.c.2.d.1"看起来没有"a.b.c[2].d[1]"更明了。会这个的指点下小弟。先谢谢了!

  • 相关阅读:
    Arduino Nano与SIM800C 通信
    Laravel 查询数据按照时间分组
    Laravel 查询或写入Enum字段出错的bug解决办法
    【示例代码及地区json】js省市区三级联动 升级版
    【示例代码及地区json】js省市区三级联动
    Laravel使用whereHas进行过滤不符合条件的预加载with数据
    Laravel where条件拼接,数组拼接where条件
    postman传数组参数,二维数组,多维数组
    中国元器件电商
    蓝牙核心技术了解(蓝牙协议、架构、硬件和软件笔记)
  • 原文地址:https://www.cnblogs.com/linianhui/p/2633264.html
Copyright © 2020-2023  润新知