最短的IE判断var ie=!-[1,]分析


Posted in Javascript onMay 28, 2014

 以前最短的IE判定借助于IE不支持垂直制表符的特性搞出来的。

 

 var ie = !+"\v1";

 

仅仅需要7bytes!参见这篇文章,《32 bytes, ehr ... 9, ehr ... 7!!! to know if your browser is IE》,讲述外国人是如何把IE的判定从32 bytes一步步缩简成7 bytes!的故事但这纪录今年1月8日被一个俄国人打破了,现在只要6 bytes!它利用了IE与标准浏览器在处理数组的toString方法的差异做成的。对于标准游览器,如果数组里面最后一个字符为逗号,JS引擎会自动剔除它。

var ie = !-[1,];

这句代码在IE9之前曾被称为世界上最短的IE判定代码。代码虽短但确包含了不少javascript基础知识在里面。在这个例子中代码执行时会先调用数组的toString()方法 ,执行[1,].toString()在IE6,7,8中将会得到"1,"。然后表达式就变为!-"1,"。再尝试把"1,"转换成数值类型得到NaN ,再对NaN取负得到值仍为NaN。最后执行!NaN返回true。下面通过分解这个语句来回顾下代码中所涉及到的javascript知识:

1. 浏览器的数组字面量解析差异

[1,]表示使用javascript的数组字面量定义了一个数组。 在IE6,7,8中数组有两个元素,数组中的值分别为1,undefined。在标准的浏览器中会忽略第一个元素后的undefined,数组只包含一个元素1。

2. 数组的toString()方法

调用数组对象的toString()方法时会对数组中的每个元素调用toString()方法,如果元素的值为NULL或者undefined时会返回空的字符串,然后将得到的每项的值拼成一个使用 逗号","分隔的字符串。

3. 一元减号运算符

使用一元减号运算符时如果运算数是数值类型则直接对运算数取负,否则会先尝试把运算数转换为数值类型,转换过程相当于执行Number函数,然后再对得到的结果取负。

4. 逻辑非运算

执行逻辑非运算时如果操作数为NaN、NULL或undefined 时返回 true。

JavaScript可以这么写:

var ie = !-[1,];   

   alert(ie); 

如果从非IE的角度判定,可以省一个比特,因为我们做兼容时,绝大多数情况都是IE与非IE地开工。 var notIE = -[1,];

if(-[1,]){  

     alert("这不是IE浏览器!");  

}else{  

     alert("这是IE浏览器!");  

}

通过上面的知识可以得出代码 var ie = !-[1,]; 其实等价于 var ie = !(-Number([1,].toString())); 在IE6\7\8中值为true。

因为IE6/7/8都不会忽略[1,].ToString()这个bug,即得到的是"1,";而-Number([1,].toString())即为-Number("1,")得到的结果是NaN;然后!(-Number([1,].toString()))即为!(NaN)即得到true。一切的前提是IE6/7/8都有[1,].ToString()=>"1,"这个bug,而其它浏览器(应该是大部分吧~~)则是[1,].ToString()=>"1"。

最近发现有朋友这样使用用来提示用户升级浏览器

<script>
!-[1,] && alert('您使用的是 IE6-8 版本的浏览器,\n\n建议用 Chrome, Firefox, IE9+ 浏览!');
</script>
Javascript 相关文章推荐
jquery中prop()方法和attr()方法的区别浅析
Sep 06 Javascript
ie7+背景透明文字不透明超级简单的实现方法
Jan 17 Javascript
JavaScript中双叹号(!!)作用示例介绍
Apr 10 Javascript
javascript实现youku的视频代码自适应宽度
May 25 Javascript
javascript数据类型验证方法
Dec 31 Javascript
详解JavaScript中的事件流和事件处理程序
May 20 Javascript
jquery 获取select数组与name数组长度的实现代码
Jun 20 Javascript
bootstrap日期插件daterangepicker使用详解
Oct 19 Javascript
jQuery访问json文件中数据的方法示例
Jan 28 jQuery
微信小程序实现图片选择并预览功能
Jul 25 Javascript
JavaScript享元模式原理与用法实例详解
Mar 09 Javascript
vue3自定义dialog、modal组件的方法
Jan 04 Vue.js
jQuery 1.9使用$.support替代$.browser的使用方法
May 27 #Javascript
什么是cookie?js手动创建和存储cookie
May 27 #Javascript
js打开windows上的可执行文件示例
May 27 #Javascript
JavaScript数值数组排序示例分享
May 27 #Javascript
JavaScript作用域链示例分享
May 27 #Javascript
Node调试工具JSHint的安装及配置教程
May 27 #Javascript
javaScript使用EL表达式的几种方式
May 27 #Javascript
You might like
PHP字符串word末字符实现大小写互换的方法
2014/11/10 PHP
php生成毫秒时间戳的实例讲解
2017/09/22 PHP
获取JavaScript用户自定义类的类名称的代码
2007/03/08 Javascript
ExtJS实现文件下载的方法实例
2013/11/09 Javascript
关于页面嵌入swf覆盖div层的问题的解决方法
2014/02/11 Javascript
JS+JSP通过img标签调用实现静态页面访问次数统计的方法
2015/12/14 Javascript
理解javascript中的严格模式
2016/02/01 Javascript
JavaScript实现打开链接页面的方式汇总
2016/06/02 Javascript
jQuery插件扩展extend的简单实现原理
2016/06/24 Javascript
javascript基本数据类型和转换
2017/03/17 Javascript
vue使用stompjs实现mqtt消息推送通知
2017/06/22 Javascript
在 Angular中 使用 Lodash 的方法
2018/02/11 Javascript
[01:08:33]OG vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python实现将pvr格式转换成pvr.ccz的方法
2015/04/28 Python
python用10行代码实现对黄色图片的检测功能
2015/08/10 Python
Python 文件管理实例详解
2015/11/10 Python
Python内置函数—vars的具体使用方法
2017/12/04 Python
pandas Dataframe行列读取的实例
2018/06/08 Python
python里运用私有属性和方法总结
2019/07/08 Python
python中删除某个元素的方法解析
2019/11/05 Python
python3操作注册表的方法(Url protocol)
2020/02/05 Python
详解Python 重学requests发起请求的基本方式
2020/02/07 Python
浅析Django 接收所有文件,前端展示文件(包括视频,文件,图片)ajax请求
2020/03/09 Python
VScode连接远程服务器上的jupyter notebook的实现
2020/04/23 Python
Python 保存加载mat格式文件的示例代码
2020/08/04 Python
vscode+PyQt5安装详解步骤
2020/08/12 Python
Python通过yagmail实现发送邮件代码解析
2020/10/27 Python
浅谈CSS3中的变形功能-transform功能
2017/12/27 HTML / CSS
父母对孩子说的话
2014/04/12 职场文书
初中班主任经验交流材料
2014/05/16 职场文书
跳蚤市场口号
2014/06/13 职场文书
人事行政经理岗位职责
2014/06/18 职场文书
党风廉正建设责任书
2015/01/29 职场文书
2015年新农村建设工作总结
2015/05/22 职场文书
ORACLE数据库应用开发的三十个注意事项
2021/06/07 Oracle
spring cloud 配置中心native配置方式
2021/09/25 Java/Android