利用 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变量放在一个闭包里面实现。