最短的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 相关文章推荐
爱恋千雪-US-AscII加密解密工具(网页加密)下载
Jun 06 Javascript
YUI的Tab切换实现代码
Apr 11 Javascript
为jQuery添加Webkit的触摸的方法分享
Feb 02 Javascript
jquery.ajax之beforeSend方法使用介绍
Dec 08 Javascript
jQuery实现ctrl+enter(回车)提交表单
Oct 19 Javascript
vue2.0数据双向绑定与表单bootstrap+vue组件
Feb 27 Javascript
canvas红包照片实例分享
Feb 28 Javascript
Bootstrap 表单验证formValidation 实现表单动态验证功能
May 17 Javascript
详解vue中使用express+fetch获取本地json文件
Oct 10 Javascript
基于vue组件实现猜数字游戏
May 28 Javascript
详解webpack的clean-webpack-plugin插件报错
Oct 16 Javascript
vue项目中js-cookie的使用存储token操作
Nov 13 Javascript
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
Yii2基于Ajax自动获取表单数据的方法
2016/08/10 PHP
php实现替换手机号中间数字为*号及隐藏IP最后几位的方法
2016/11/16 PHP
php 人员权限管理(RBAC)实例(推荐)
2017/05/24 PHP
详解phpstorm2020最新破解方法
2020/09/17 PHP
javascript编程起步(第六课)
2007/02/27 Javascript
javascript中最常用的继承模式 组合继承
2010/08/12 Javascript
javascript天然的迭代器
2010/10/29 Javascript
Javascript快速排序算法详解
2014/12/03 Javascript
Jquery对select的增、删、改、查操作
2015/02/06 Javascript
谈谈基于iframe、FormData、FileReader三种无刷新上传文件的方法
2015/12/03 Javascript
不能不知道的10个angularjs英文学习网站
2016/03/23 Javascript
node-http-proxy修改响应结果实例代码
2016/06/06 Javascript
AngularJS 中文API参考手册
2016/07/28 Javascript
AngularJS变量及过滤器Filter用法分析
2016/11/22 Javascript
jQuery Easyui datagrid行内实现【添加】、【编辑】、【上移】、【下移】
2016/12/19 Javascript
js实现拖拽功能
2017/03/01 Javascript
vue中配置mint-ui报css错误问题的解决方法
2017/10/11 Javascript
微信小程序实践之动态控制组件的显示/隐藏功能
2018/07/18 Javascript
vue+canvas实现炫酷时钟效果的倒计时插件(已发布到npm的vue2插件,开箱即用)
2018/11/05 Javascript
在vue中实现嵌套页面(iframe)
2020/07/30 Javascript
nuxt 自定义 auth 中间件实现令牌的持久化操作
2020/11/05 Javascript
[57:53]DOTA2上海特级锦标赛主赛事日 - 2 败者组第二轮#3OG VS VP
2016/03/03 DOTA
[00:59]PWL开团时刻DAY7——我在赶
2020/11/06 DOTA
python列表去重的二种方法
2014/02/14 Python
python去掉字符串中重复字符的方法
2014/02/27 Python
Python subprocess模块学习总结
2014/03/13 Python
全面分析Python的优点和缺点
2018/02/07 Python
Python定时任务sched模块用法示例
2018/07/16 Python
Python如何处理大数据?3个技巧效率提升攻略(推荐)
2019/04/15 Python
Tensorflow的常用矩阵生成方式
2020/01/04 Python
Python基于百度AI实现OCR文字识别
2020/04/02 Python
Python应用实现处理excel数据过程解析
2020/06/19 Python
selenium判断元素是否存在的两种方法小结
2020/12/07 Python
工厂保安员岗位职责
2014/01/31 职场文书
2014年国培研修感言
2014/03/09 职场文书
2016年秋季新学期致辞
2015/07/30 职场文书