前端 js 实现 Map 操作

我们在spring框架中，经常用到将数据放入model 传到前端进行使用，但是如果我们直接传递一个Map，有时候不能直接使用，比如在标签中我们可以直接 用

    ${columnType.key}

获取，但是在script中用的时候，不能直接获取，假如map 的 key 为 int类型时候，直接就报错了

怎么解决呢？

首先，在这里讲一下

JavaScript prototype 属性

    定义和用法

    prototype上的属性、方法叫原型属性、原型方法，会使实例化对象都具有该属性、方法。

    例如Map.prototype.put = function(){},则以后map实例对象都具有put方法。

语法

object.prototype.name=value

然后，开始：（以下的部分代码为转载内容）

    /**
     * js实现的map
     */
    // 定义map  
    function Map() {
        this.container = {};
    }

    // 将key-value放入map中  
    Map.prototype.put = function (key, value) {
        try {
            if (key != null && key != "")
                this.container[key] = value;
        } catch (e) {
            return e;
        }
    };

    // 根据key从map中取出对应的value  
    Map.prototype.get = function (key) {
        try {
            return this.container[key];
        } catch (e) {
            return e;
        }
    };

    // 判断map中是否包含指定的key  
    Map.prototype.containsKey = function (key) {

        try {
            for (var p in this.container) {
                if (p == key)
                    return true;
            }
            return false;
        } catch (e) {
            return e;
        }
    }

    // 判断map中是否包含指定的value  
    Map.prototype.containsValue = function (value) {
        try {
            for (var p in this.container) {
                if (this.container[p] === value)
                    return true;
            }
            return false;
        } catch (e) {
            return e;
        }
    };

    // 删除map中指定的key  
    Map.prototype.remove = function (key) {
        try {
            delete this.container[key];

        } catch (e) {
            return e;
        }
    };

    // 清空map  
    Map.prototype.clear = function () {
        try {
            delete this.container;
            this.container = {};
        } catch (e) {
            return e;
        }
    };

    // 判断map是否为空  
    Map.prototype.isEmpty = function () {
        if (this.keyArray().length == 0)
            return true;
        else
            return false;
    };

    // 获取map的大小  
    Map.prototype.size = function () {
        return this.keyArray().length;
    }

    // 返回map中的key值数组  
    Map.prototype.keyArray = function () {
        var keys = new Array();
        for (var p in this.container) {
            keys.push(p);
        }
        return keys;
    }

    // 返回map中的value值数组  
    Map.prototype.valueArray = function () {
        var values = new Array();
        var keys = this.keyArray();
        for (var i = 0; i < keys.length; i++) {
            values.push(this.container[keys[i]]);
        }
        return values;
    }
    // 创建一个 map
    var dataMap = new Map();

然后，调用：

dataMap.put("","");
dataMap.get("");

在我的项目中，由于下拉框也用到了所需数据，我直接在

<c:forEach>

直接加 <script> 

<c:forEach items="${columnTypes}" var="columnType">
    <option value="${columnType}">${columnType.value}</option>
    <script>
        dataMap.put('${columnType.key}', '${columnType.value}');
    </script>
</c:forEach>

由此，结束