IE浏览器不支持map报错SCRIPT5009: "map"未定义

大家好，今天小编来和大家分享一个关于js的经验~虽然是现学现卖，但是效果是好使的~

前不久做了一个WebService项目，完成后在火狐和谷歌浏览器上测试都好使，但是忘了ie这个大哥了，今天客服接到电话说在ie浏览器下查不到数据，于是小编各种寻找解决办法（后台代码打断点，前台浏览器监控返回数据，均显示无问题），突然无意间看了下浏览器控制台报错SCRIPT5009: "map"未定义，于是上网翻了下原因，原来是IE11一下不支持map~好了接下来上代码~

首先重写map，留给后面用：

function Map() {
    this.elements = new Array();
    // 获取Map元素个数
    this.size = function() {
        return this.elements.length;
    },

    // 判断Map是否为空
    this.isEmpty = function() {
        return (this.elements.length < 1);
    },

    // 删除Map所有元素
    this.clear = function() {
        this.elements = new Array();
    },

    // 向Map中增加元素（key, value)
    this.put = function(_key, _value) {
        if (this.containsKey(_key) == true) {
	    if (this.containsValue(_value)) {
	        if (this.remove(_key) == true) {
		    this.elements.push({
		        key : _key,
			value : _value
		    });
		}
	    } else {
		this.elements.push({
		    key : _key,
		    value : _value
	        });
	    }
	} else {
	    this.elements.push({
	        key : _key,
		value : _value
	    });
	}
    },

    // 向Map中增加元素（key, value)
    this.set = function(_key, _value) {
        if (this.containsKey(_key) == true) {
	    if (this.containsValue(_value)) {
                if (this.remove(_key) == true) {
		    this.elements.push({
		        key : _key,
			value : _value
		    });
		}
	    } else {
	        this.elements.push({
		    key : _key,
		    value : _value
		});
	    }
        } else {
	    this.elements.push({
                key : _key,
		value : _value
	    });
	}
    },

    // 删除指定key的元素，成功返回true，失败返回false
    this.remove = function(_key) {
        var bln = false;
	try {
	    for (i = 0; i < this.elements.length; i++) {
	        if (this.elements[i].key == _key) {
		    this.elements.splice(i, 1);
		    return true;
		}
	    }
	} catch (e) {
	    bln = false;
	}
	return bln;
    },
				 
    // 删除指定key的元素，成功返回true，失败返回false
    this.del = function(_key) {
        //此处做一个更正this.delete改为this.del，因为delete是js保留关键字，在一般浏览器可能没问题，但是在ie浏览器会报错
        var bln = false;
        try {
	    for (i = 0; i < this.elements.length; i++) {
	        if (this.elements[i].key == _key) {
		    this.elements.splice(i, 1);
		    return true;
		}
	    }
	} catch (e) {
	    bln = false;
	}
	return bln;
    },
			        
    // 获取指定key的元素值value，失败返回null
    this.get = function(_key) {
        try {
	    for (i = 0; i < this.elements.length; i++) {
	        if (this.elements[i].key == _key) {
		    return this.elements[i].value;
		}
	    }
	} catch (e) {
	    return null;
	}
    },
				 
    // set指定key的元素值value
    this.setValue = function(_key, _value) {
	var bln = false;
	try {
	    for (i = 0; i < this.elements.length; i++) {
	        if (this.elements[i].key == _key) {
		    this.elements[i].value = _value;
		    return true;
	        }
	    }
	} catch (e) {
	    bln = false;
	}
	return bln;
    },
				 
    // 获取指定索引的元素（使用element.key，element.value获取key和value），失败返回null
    this.element = function(_index) {
        if (_index < 0 || _index >= this.elements.length) {
	    return null;
	}
	return this.elements[_index];
    },
			 
    // 判断Map中是否含有指定key的元素
    this.containsKey = function(_key) {
        var bln = false;
	try {
	    for (i = 0; i < this.elements.length; i++) {
	        if (this.elements[i].key == _key) {
		    bln = true;
	        }
	    }
        } catch (e) {
	    bln = false;
	}
	return bln;
    },
				 
    // 判断Map中是否含有指定key的元素
    this.has = function(_key) {
        var bln = false;
	try {
	    for (i = 0; i < this.elements.length; i++) {
                if (this.elements[i].key == _key) {
	            bln = true;
	        }
	    }
	} catch (e) {
	    bln = false;
	}
	return bln;
    },
				        
    // 判断Map中是否含有指定value的元素
    this.containsValue = function(_value) {
        var bln = false;
	try {
	    for (i = 0; i < this.elements.length; i++) {
	        if (this.elements[i].value == _value) {
		    bln = true;
		}
	    }
	} catch (e) {
	    bln = false;
	}
	return bln;
    },
				 
    // 获取Map中所有key的数组（array）
    this.keys = function() {
	var arr = new Array();
	for (i = 0; i < this.elements.length; i++) {
	    arr.push(this.elements[i].key);
	}
	return arr;
    },
				 
    // 获取Map中所有value的数组（array）
    this.values = function() {
        var arr = new Array();
	for (i = 0; i < this.elements.length; i++) {
	    arr.push(this.elements[i].value);
	}
	return arr;
    };
				        
    /**
     * map遍历数组
     * @param callback [function] 回调函数；
     * @param context [object] 上下文；
     */
    this.forEach = function forEach(callback,context){
        context = context || window;
	 
	//IE6-8下自己编写回调函数执行的逻辑
        var newAry = new Array();
	for(var i = 0; i < this.elements.length;i++) {
	    if(typeof  callback === 'function') {
                var val =   callback.call(context,this.elements[i].value,this.elements[i].key,this.elements);           
newAry.push(this.elements[i].value);
            }
	}
	return newAry;
    } 
}

然后再使用var map = new map();就不会报错了~

另外再分享一下遍历map（此处也有一个ie的坑······）

小编刚开始是这样写的map遍历：

for(var [key,value] of map){
    //中间逻辑可以根据自己需要编写
    alert(value);
}

这样写的遍历也是在火狐和谷歌上好使，挪到ie上又不好使了~

这样写，可以兼容ie：

map.forEach(function(value,key,map){
    alert(value);
})

最近写了几个项目都涉及到浏览器兼容问题，对于我这个后端程序员来说，前端是真坑，尤其ie更坑！！！