js之浏览器兼容性

1、ie浏览器不支持函数默认值

　　hi('李四');
　　function hi(msg = '张三'){
	alert(msg);
　　}    

 此函数在火狐、谷歌等浏览器下均没问题，唯独在万恶的ie浏览器下会提示如下错误：

为什么会出现这样的问题呢？

在ES6之前，不能直接为函数的参数指定默认值，Chrome，Firefox，Safari等浏览器对es6支持较好，所以没有报错，而万恶的ie对es6支持的很差劲，所以会报错

• Chrome：51 版起便可以支持 97% 的 ES6 新特性。
• Firefox：53 版起便可以支持 97% 的 ES6 新特性。
• Safari：10 版起便可以支持 99% 的 ES6 新特性。
• IE：Edge 15可以支持 96% 的 ES6 新特性。Edge 14 可以支持 93% 的 ES6 新特性。（IE7~11 基本不支持 ES6）

如何解决此问题呢？只能采取变通的方法

　　hi();
　　function hi(msg){
	msg = msg || '张三';
	alert(msg);
　　}

 这种写法有一种致命的缺点：

那就是如果参数msg赋值了，但是对应的布尔值为false，则该赋值不起作用，如果在调用函数的时候，传入的参数是一个空字符传，那么msg就会被修改为默认值；

那又如何避免这个问题呢？需要先判断一下

1、arguments.length是否为1

2、判断值是否为undefined

修改后的完整代码？

    hi(" ");
    function hi(msg){
	msg = arguments.length && arguments[0] != undefined ? msg : '张三';
	alert(msg);
    }

 

2、关于事件的兼容性处理

document.onkeydown = function(event){
　　//兼容IE和Firefox获得keyBoardEvent对象  
　　event = event ? event : ((window.event) ? window.event : ""); 
   
   //兼容IE和Firefox获得keyBoardEvent对象的键值
　　var key = event.keyCode ? event.keyCode : event.which; 
		
　　if(key == 13){
	alert("hello wolrd");
　　}
};

 

3、Object对象有一个比较常用的方法keys()，keys()方法会返回一个由一个给定对象的自身可枚举属性组成的数组，数组中属性名的排列属性和使用for…in循环遍历该对象时返回的顺序一致；

不过遗憾的是，keys()方法在ie8及其一下版本不支持，怎么办呢？

if (!Object.keys){
　　Object.keys = function(o) {
　　　　if (o !== Object(o)){
　　　　　　throw new TypeError('Object.keys called on a non-object');
　　　　}
		
　　　　var k=[],p;
　　　　for (p in o){
　　　　　　if(Object.prototype.hasOwnProperty.call(o,p)){
　　　　　　　　k.push(p);
　　　　　　}
　　　　} 
　　　　return k;
　　}
}

 【说明】Object.prototype.hasOwnProperty用来判断一个属性是定义在对象本身而不是继承自原型链。

 

4、getElementsByClassName()是HTML5 新增的DOM API。IE8以下不支持。

if(!document.getElementsByClassName){
　　document.getElementsByClassName = function(className){
　　　　var elements = this.getElementsByTagName("*");
　　　　var result = [];
　　　　for(var i=0,length=elements.length;i<length;i++){
　　　　　　if(elements[i].className == className){
　　　　　　　　result[result.length] = elements[i]
　　　　　　}
　　　　}
　　　　return result;
　　}
}