實用代碼-JavaScript實用小函數一枚(深入對象取值)

來源:互聯網
上載者:User
適用場合描述

做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]"分割開來,一個一個遍曆用數組方式去取呢,取一個判斷一個,防止用Null 物件去去讀資料,所以萌生此法,請看代碼:

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]"更明了。會這個的指點下小弟。先謝謝了!

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.