最短的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 相关文章推荐
放弃用你的InnerHTML来输出HTML吧 jQuery Tmpl不详细讲解
Apr 20 Javascript
密码框显示提示文字jquery示例
Aug 29 Javascript
JavaScript验证图片类型(扩展名)的函数分享
May 05 Javascript
javascript模拟map输出与去除重复项的方法
Feb 09 Javascript
浅谈JavaScript异常处理语句
Jun 26 Javascript
javascript 的变量、作用域和内存问题
Apr 19 Javascript
Angular 4 依赖注入学习教程之FactoryProvider的使用(四)
Jun 04 Javascript
详解Vue中localstorage和sessionstorage的使用
Dec 22 Javascript
Node Puppeteer图像识别实现百度指数爬虫的示例
Feb 22 Javascript
JS中的JSON对象的定义和取值实现代码
May 09 Javascript
JS简单表单验证功能完整示例
Jan 26 Javascript
vue封装自定义指令之动态显示title操作(溢出显示,不溢出不显示)
Nov 12 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框架(五)快速生成代码工具 Gii 的使用
2014/08/20 PHP
PHP 使用memcached简单示例分享
2015/03/05 PHP
PHP实现的QQ空间g_tk加密算法
2015/07/09 PHP
javascript学习笔记(十六) 系统对话框(alert、confirm、prompt)
2012/06/20 Javascript
JavaScript加入收藏夹功能(兼容IE、firefox、chrome)
2014/05/05 Javascript
$(document).ready(function() {})不执行初始化脚本
2014/06/19 Javascript
简述AngularJS相关的一些编程思想
2015/06/23 Javascript
js实现用户离开页面前提示是否离开此页面的方法(包括浏览器按钮事件)
2015/07/18 Javascript
JavaScript中的this陷阱的最全收集并整理(没有之一)
2017/02/21 Javascript
bootstrap实现动态进度条效果
2017/03/08 Javascript
JavaScript队列函数和异步执行详解
2017/06/19 Javascript
AngularJS中scope的绑定策略实例分析
2017/10/30 Javascript
vue实现pdf导出解决生成canvas模糊等问题(推荐)
2018/10/18 Javascript
vscode调试node.js的实现方法
2020/03/22 Javascript
vue实现列表拖拽排序的功能
2020/11/02 Javascript
深入了解Vue3模板编译原理
2020/11/19 Vue.js
python 性能优化方法小结
2017/03/31 Python
python通过百度地图API获取某地址的经纬度详解
2018/01/28 Python
python实现证件照换底功能
2019/08/20 Python
Django框架ORM数据库操作实例详解
2019/11/07 Python
python matplotlib如何给图中的点加标签
2019/11/14 Python
Python操作Jira库常用方法解析
2020/04/10 Python
伦敦时尚生活的缩影:LN-CC
2017/01/24 全球购物
好药师网上药店:安全合法的网上药品零售药房
2017/02/15 全球购物
Jeep牧马人、切诺基和自由人零配件:4 Wheel Drive Hardware
2017/07/02 全球购物
Laura Geller官网:美国彩妆品牌
2018/12/29 全球购物
刚毕业大学生自荐信范文
2014/02/20 职场文书
一年级学生期末评语
2014/04/21 职场文书
物业管理委托协议(2篇)
2014/09/23 职场文书
2014年感恩节活动策划方案
2014/10/06 职场文书
2014年管理工作总结
2014/11/22 职场文书
会计试用期自我评价
2015/03/10 职场文书
小学生手册家长意见
2015/06/03 职场文书
无违反计划生育证明格式
2015/06/24 职场文书
MySQL的Query Cache图文详解
2021/07/01 MySQL
经典《舰娘》游改全新动画预告 预定11月开播
2022/04/01 日漫