利用 Map 映射处理大量层级字段数据

最近遇到一个问题:前端保存用户选择的地区数据时(一个100多KB的JSON文件),通常只是给后端发送城市所对应的id,即数据库保存的形式也是类似于:

Zone: [10761_10782_334046, 10761_10782_334048, 10761_10787_69468, .....]

假设用户选择了若干个城市,保存到了数据库,然后在其他地方需要显示他到底选择了哪些城市,于是前端拉取的到数据就是上面的一个id的数组,总不能把地区的id展现在视图上吧?所以就需要得到每个id对应的的城市的name。上面的zone.json文件数据的结构是有规律的,可以写一个遍历和递归的方法找到id对应的name。这样是可以达到目的,假设需要N多次请求,如果每次都这样去遍历和递归,再加上数据量比较大的话,性能就很差了。

如果,要是能有下面这样的map结构就好了,直接通过map映射来取值:

{
    '10761_10782_0': '北京',
    '10761_10783_0': '上海',
    '10761_10789_47667': '广州',
    '10761_10789_16496': '深圳',
     ........
}

解决办法是可以用代码跑一个这样的map结构,然后用一个变量保存,只需第一次跑个循环递归,剩下取值就直接用这个map映射结构:

// 全部地区数据
var zoneData = [......];
// 地区map
var map = {};
// 是否是空对象
function _isEmptyObject( obj ) {
    for( var pro in obj ) {
        if( obj.hasOwnProperty( pro ) ) {
            return false;
        }
    }
    return true;
}

module.exports = {
    // 生成map对象
    _createMap: function( childs ) {
        for( var i = 0; i < childs.length; i++ ) {
            var now = childs[i];
            if( now.value && now.name ) {
                map[now.value.toString()] = now.name;
            }
            if( now.child && now.child.length ) {
                this._createMap( now.child );
            }
        }
    },
    // 获取地区名称
    getZoneName: function( val ) {
        if( _isEmptyObject( map ) ) {
            this._createMap( zoneData );
        }
        return map[val];
    }
}

我这里是写成了模块里面的调用方式,用到的地方只需调用getZoneName()即可,非模块的情况可以考虑将map变量放在一个闭包里面实现。

评论列表

除了广告和敏感话题言论之外,可以畅所欲言。
为自己起个简短易记的名字。
方便我可以联系到你,绝对不会被公开。
你的个人主页,链接会加在昵称上方便大家访问。