最短的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 相关文章推荐
JavaScript学习笔记之获取当前目录的实现代码
Dec 14 Javascript
JavaScript 面向对象与原型
Apr 10 Javascript
jQuery的事件预绑定
Dec 05 Javascript
js仿小米手机上下滑动效果
Feb 05 Javascript
js以及jquery实现手风琴效果
Apr 17 Javascript
整理关于Bootstrap导航的慕课笔记
Mar 29 Javascript
Vue2.0实现购物车功能
Jun 05 Javascript
Vuejs 页面的区域化与组件封装的实现
Sep 11 Javascript
ajax请求data遇到的问题分析
Jan 18 Javascript
VUE预渲染及遇到的坑
Sep 03 Javascript
Vue 动态路由的实现及 Springsecurity 按钮级别的权限控制
Sep 05 Javascript
原生微信小程序开发中 redux 的使用详解
Feb 18 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 Curl出现403错误的解决办法
2014/05/29 PHP
phpnow php探针环境检测代码
2014/11/04 PHP
php+xml结合Ajax实现点赞功能完整实例
2015/01/30 PHP
php通过array_merge()函数合并关联和非关联数组的方法
2015/03/18 PHP
php结合curl实现多线程抓取
2015/07/09 PHP
PHP实现微信JS-SDK接口选择相册及拍照并上传的方法
2016/12/05 PHP
PHP中常见的密码处理方式和建议总结
2018/10/14 PHP
JavaScript 异步调用框架 (Part 1 - 问题 &amp; 场景)
2009/08/03 Javascript
javascript最常用与实用的创建类的代码
2010/08/12 Javascript
当鼠标滑过文本框自动选中输入框内容的JS代码分享
2013/11/26 Javascript
一个简单的jQuery计算器实现了连续计算功能
2014/07/21 Javascript
JS实现仿中关村论坛评分后弹出提示效果的方法
2015/02/23 Javascript
jQuery判断多个input file 都不能为空的例子
2015/06/23 Javascript
判断JS对象是否拥有某属性的方法推荐
2016/05/12 Javascript
Bootstrap table表格简单操作
2017/02/07 Javascript
canvas 实现中国象棋
2017/02/17 Javascript
vue-router实现webApp切换页面动画效果代码
2017/05/25 Javascript
javascript cookie的基本操作(添加和删除)
2017/07/24 Javascript
vue-cli之router基本使用方法详解
2017/10/17 Javascript
React中使用async validator进行表单验证的实例代码
2018/08/17 Javascript
[40:31]Secret vs Alliacne 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
Python中的hypot()方法使用简介
2015/05/18 Python
Python2.7基于淘宝接口获取IP地址所在地理位置的方法【测试可用】
2017/06/07 Python
使用Python &amp; Flask 实现RESTful Web API的实例
2017/09/19 Python
Python实现高斯函数的三维显示方法
2018/12/29 Python
解决在Python编辑器pycharm中程序run正常debug错误的问题
2019/01/17 Python
Python实现一个优先级队列的方法
2020/07/31 Python
用python对excel进行操作(读,写,修改)
2020/12/25 Python
美国经典刺绣和字母儿童服装特卖:Smocked Auctions
2018/07/16 全球购物
表扬信格式
2014/01/12 职场文书
个人合伙协议书范本
2014/10/14 职场文书
企业与个人合作经营协议书
2014/11/01 职场文书
雷峰塔导游词
2015/02/09 职场文书
预备党员入党感想
2015/08/10 职场文书
纯CSS实现酷炫的霓虹灯效果
2021/04/13 HTML / CSS
Python装饰器的练习题
2021/11/23 Python