天天看點

實用代碼-JavaScript實用小函數一枚(深入對象取值)适用場合描述我的解決辦法DEMO和說明

适用場合描述

做web開發時使用JSON作為資料傳輸格式時,如果伺服器端傳回的JSON資料對象層次嵌套過深。比如下面這段:

實用代碼-JavaScript實用小函數一枚(深入對象取值)适用場合描述我的解決辦法DEMO和說明
實用代碼-JavaScript實用小函數一枚(深入對象取值)适用場合描述我的解決辦法DEMO和說明

伺服器端傳回的資料

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實用小函數一枚(深入對象取值)适用場合描述我的解決辦法DEMO和說明

此小函數或許會讓你恢複内心些許平靜

我的解決辦法

因為JavaScript中的對象字段存取可以像數組一樣用[]來做,那為何不把"data.a.b.c[2].d[1]"分割開來,一個一個周遊用數組方式去取呢,取一個判斷一個,防止用空對象去去讀資料,是以萌生此法,請看代碼:

實用代碼-JavaScript實用小函數一枚(深入對象取值)适用場合描述我的解決辦法DEMO和說明
實用代碼-JavaScript實用小函數一枚(深入對象取值)适用場合描述我的解決辦法DEMO和說明

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和說明

實用代碼-JavaScript實用小函數一枚(深入對象取值)适用場合描述我的解決辦法DEMO和說明
實用代碼-JavaScript實用小函數一枚(深入對象取值)适用場合描述我的解決辦法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]"更明了。會這個的指點下小弟。先謝謝了!

作者:

Blackheart

出處:

http://linianhui.cnblogs.com

本文版權歸作者和部落格園共有,歡迎轉載,但未經作者同意必須保留此段聲明,且在文章頁面明顯位置給出原文連接配接,否則保留追究法律責任的權利。

繼續閱讀