ES6解構之複雜資料

今天在寫代碼的是否，碰到如下的資料，我要取值 fvkey,fn,url.

{
    "dltype":1,
    "exem":0,
    "fl":Object{...},
    "hs":0,
    "ip":"106.39.84.163",
    "ls":0,
    "preview":195,
    "s":"o",
    "sfl":{
        "cnt":0
    },
    "tm":1498811725,
    "vl":{
        "cnt":1,
        "vi":[
            {
                "br":121,
                "ch":0,
                "cl":{
                    "fc":0,
                    "keyid":"u0024wqfpsh.2"
                },
                "ct":21600,
                "drm":0,
                "dsb":0,
                "fmd5":"a9fd4f65a9d604a92169be8cdc499caf",
                "fn":"u0024wqfpsh.mp4",
                "fs":24395227,
                "fst":5,
                "fvkey":"B188B8BAE71DDED428B7781BA026D3343FC3D66A993811ECCC73A48A7CB07415A1DDD320DCA5FD2B581AECE53B07CD536CD553B7E6BC1CF4687B71A13B08ED3CF5198827C699D3895B2FAB93E86EE7A9507E41A26A804DC6",
                "head":0,
                "hevc":0,
                "iflag":0,
                "level":0,
                "lnk":"u0024wqfpsh",
                "logo":1,
                "mst":8,
                "pl":Array[1],
                "share":1,
                "sp":0,
                "st":2,
                "tail":0,
                "td":"195.2",
                "ti":"Apink《FIVE》",
                "type":3585,
                "ul":{
                    "ui":[
                        {
                            "url":"http://106.38.183.14/music.qqvideo.tc.qq.com/",
                            "vt":210,
                            "dtc":0,
                            "dt":2
                        },
                        Object{...},
                        Object{...}
                    ]
                },
                "vh":480,
                "vid":"u0024wqfpsh",
                "videotype":22,
                "vr":0,
                "vst":2,
                "vw":848,
                "wh":1.7666667,
                "wl":{
                    "wi":[

                    ]
                }
            }
        ]
    }
}      

于是我毫不猶豫的寫下如下的代碼,這裡的 this.mvinfo就是上面的資料，隻不過這段代碼是運作在vue程式裡面，那麼是會被監聽的。

沒錯，代碼能夠正确運作，也沒毛病，隻是覺得有點暈。這個時候ES6的結構不是剛好能用上麼。

if (this.mvinfo && this.mvinfo.vl && this.mvinfo.vl.vi && this.mvinfo.vl.vi.length > 0) {
          var vi = this.mvinfo.vl.vi[0]
          if (vi.fvkey && vi.fvkey && vi.ul.ui && vi.ul.ui.length > 0) {
            let fvkey = vi.fvkey
            let fn = vi.fn
            let bUrl = vi.ul.ui[0].url
            this.src = `${bUrl}${fn}?vkey=${fvkey}&br=121&platform=2&fmt=auto&level=0&sdtfrom=v3010&guid=d756e889e0148f3c2eea4f6724d7da9b`
          }
        }      

重寫代碼如下, 是不是代碼短很多，我可以了解是複雜資料的結構，的确又很精妙， 需要注意的就是

1. 對象數組的結構，取第一個對象應該是 [{p1}],

2. 結構重命名  url: bUrl

let { vl: { vi: [{ fvkey, fn, ul: { ui: [{ url: bUrl }] } }] } } = this.mvinfo || {}
        if (fvkey && fn && bUrl) {
          this.src = `${bUrl}${fn}?vkey=${fvkey}&br=121&platform=2&fmt=auto&level=0&sdtfrom=v3010&guid=d756e889e0148f3c2eea4f6724d7da9b`
  }      

這就完了麼，當然沒有，如果vl就不存在的話，這段代碼是會報錯的，報錯怎麼辦。try catch 喽，

再調整代碼如下，

try {
          let { vl: { vi: [{ fvkey, fn, ul: { ui: [{ url: bUrl }] } }] } } = this.mvinfo || {}
          if (fvkey && fn && bUrl) {
            this.src = `${bUrl}${fn}?vkey=${fvkey}&br=121&platform=2&fmt=auto&level=0&sdtfrom=v3010&guid=d756e889e0148f3c2eea4f6724d7da9b`
          }
        } catch (err) {
          alert(err)
        }      

是不是完美了，當然不是，錯誤有這麼處理的麼。

然後，我先就這樣了。