ES6解构之复杂数据

小编 2026-06-05 阅读:1697 评论:0

今天在写代码的是否，碰到如下的数据，我要取值 fvkey,fn,url. { "dltyp...

今天在写代码的是否，碰到如下的数据，我要取值 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)        }

是不是完美了，当然不是，错误有这么处理的么。

然后，我先就这样了。