最短的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 相关文章推荐
XRegExp 0.2: Now With Named Capture
Nov 30 Javascript
关于js拖拽上传 [一个拖拽上传修改头像的流程]
Jul 13 Javascript
jQuery.clean使用方法及思路分析
Jan 07 Javascript
有关于JS构造函数的重载和工厂方法
Apr 07 Javascript
使用JavaScript实现弹出层效果的简单实例
May 31 Javascript
Javascript 基础---Ajax入门必看
Jul 06 Javascript
巧用Vue.js+Vuex制作专门收藏微信公众号的app
Nov 03 Javascript
jquery插件锦集【推荐】
Dec 16 Javascript
详解使用vue-router进行页面切换时滚动条位置与滚动监听事件
Mar 08 Javascript
Angular 作用域scope的具体使用
Dec 11 Javascript
利用vue开发一个所谓的数独方法实例
Dec 21 Javascript
JavaScript学习笔记之数组基本操作示例
Jan 09 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
PHP更新购物车数量(表单部分/PHP处理部分)
2013/05/03 PHP
linux使用crontab实现PHP执行计划定时任务
2014/05/10 PHP
PHP实现指定字段的多维数组排序函数分享
2015/03/09 PHP
PHP常用处理静态操作类
2015/04/03 PHP
thinkphp中多表查询中防止数据重复的sql语句(必看)
2016/09/22 PHP
Yii2学习笔记之汉化yii设置表单的描述(属性标签attributeLabels)
2017/02/07 PHP
PHP文件系统管理(实例讲解)
2017/09/19 PHP
PHP filesize函数用法浅析
2019/02/15 PHP
php求斐波那契数的两种实现方式【递归与递推】
2019/09/09 PHP
JQuery 无废话系列教程(二) jquery实战篇上
2009/06/23 Javascript
JavaScript 监听textarea中按键事件
2009/10/08 Javascript
Kibo 用于处理键盘事件的Javascript工具库
2011/10/28 Javascript
JS 各种网页尺寸判断实例方法
2013/04/18 Javascript
jquery中animate动画积累的解决方法
2013/10/05 Javascript
使用javascript实现有效时间的控制,并显示将要过期的时间
2014/01/02 Javascript
JS按回车键实现登录的方法
2014/08/25 Javascript
jQuery实现自动滚动到页面顶端的方法
2015/05/22 Javascript
你不知道的高性能JAVASCRIPT
2016/01/18 Javascript
JavaScript正则表达式简单实用实例
2017/06/23 Javascript
详解jQuery同步Ajax带来的UI线程阻塞问题及解决办法
2017/08/09 jQuery
Python itertools模块详解
2015/05/09 Python
python根据list重命名文件夹里的所有文件实例
2018/10/25 Python
Python 学习教程之networkx
2019/04/15 Python
python实现微信自动回复及批量添加好友功能
2019/07/03 Python
深入浅析Python科学计算库Scipy及安装步骤
2019/10/12 Python
Python箱型图处理离群点的例子
2019/12/09 Python
python pip安装包出现:Failed building wheel for xxx错误的解决
2019/12/25 Python
python实现连连看游戏
2020/02/14 Python
Python集成开发工具Pycharm的安装和使用详解
2020/03/18 Python
Pandas实现一列数据分隔为两列
2020/05/18 Python
关于box-sizing的全面理解
2016/07/28 HTML / CSS
德国街头和运动文化高品质商店:BSTN Store
2017/08/26 全球购物
摄影助理岗位职责
2014/02/07 职场文书
初三开学计划书
2014/04/27 职场文书
2015年终个人政治思想工作总结
2015/11/24 职场文书
十大最强岩石系宝可梦,怪颚龙实力最强,第七破坏力很强
2022/03/18 日漫