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

写于:2015/03/03
预计阅读时间:3 分钟

最近遇到一个问题:前端保存用户选择的地区数据时(一个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 &amp;&amp; now.name ) {
                map[now.value.toString()] = now.name;
            }
            if( now.child &amp;&amp; now.child.length ) {
                this._createMap( now.child );
            }
        }
    },
    // 获取地区名称
    getZoneName: function( val ) {
        if( _isEmptyObject( map ) ) {
            this._createMap( zoneData );
        }
        return map[val];
    }
}

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

评论列表
暂时还没有评论~