最短的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 相关文章推荐
js 与或运算符 || &amp;&amp; 妙用
Dec 09 Javascript
给页面渲染时间加速 干掉Dom Level 0 Event
Dec 19 Javascript
js时钟翻牌效果实现代码分享
Jul 31 Javascript
使用JavaScript为Kindeditor自定义按钮增加Audio标签
Mar 18 Javascript
jquery表单验证插件formValidator使用方法
Apr 01 Javascript
Javascript获取随机数的实现方法
Jun 22 Javascript
JavaScript中函数声明与函数表达式的区别详解
Aug 18 Javascript
jQuery基本过滤选择器用法示例
Sep 09 Javascript
js阻止冒泡和默认事件(默认行为)详解
Oct 20 Javascript
整理关于Bootstrap过渡动画的慕课笔记
Mar 29 Javascript
浅谈vue.use()方法从源码到使用
May 12 Javascript
微信小程序wx.request的简单封装
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
BBS(php &amp; mysql)完整版(八)
2006/10/09 PHP
培养自己的php编码规范
2015/09/28 PHP
laravel 解决groupBy时出现的错误 isn't in Group By问题
2019/10/17 PHP
Yii框架学习笔记之应用组件操作示例
2019/11/13 PHP
setAttribute 与 class冲突解决
2008/02/17 Javascript
一个JS小玩意 几个属性相加不能超过一个特定值.
2009/09/29 Javascript
js插件方式打开pdf文件(浏览器pdf插件分享)
2013/12/20 Javascript
jQuery中的$.ajax()方法应用
2014/05/06 Javascript
js中的事件捕捉模型与冒泡模型实例分析
2015/01/10 Javascript
Bootstrap模态框调用功能实现方法
2016/09/19 Javascript
浅析Ajax语法
2016/12/05 Javascript
详解vue-router 初始化时做了什么
2018/06/11 Javascript
微信小程序和H5页面间相互跳转代码实例
2019/09/19 Javascript
JS实现页面数据懒加载
2020/02/13 Javascript
JavaScript indexOf()原理及使用方法详解
2020/07/09 Javascript
使用Python生成url短链接的方法
2015/05/04 Python
选择python进行数据分析的理由和优势
2019/06/25 Python
python各层级目录下import方法代码实例
2020/01/20 Python
浅谈Python协程
2020/06/17 Python
香港优质食材和美酒专门店:FoodWise
2017/09/01 全球购物
孕妇内衣和胸罩:Cake Maternity
2018/07/16 全球购物
传媒专业推荐信范文
2013/11/23 职场文书
学院书画协会部门职责
2013/11/28 职场文书
大学生毕业的自我评价分享
2014/01/02 职场文书
致裁判员加油稿
2014/02/08 职场文书
小学生期末评语大全
2014/04/21 职场文书
活动总结模板
2014/05/09 职场文书
酒店员工培训方案
2014/06/02 职场文书
党员对照检查剖析材料
2014/10/13 职场文书
个人工作作风整改措施思想汇报
2014/10/13 职场文书
人事局接收函
2015/01/30 职场文书
2015年外联部工作总结
2015/04/03 职场文书
淮海战役观后感
2015/06/11 职场文书
小学体育队列队形教学反思
2016/02/16 职场文书
2017年寒假少先队活动总结
2016/04/06 职场文书
详解Python牛顿插值法
2021/05/11 Python