最短的IE判断var ie=!-[1,]分析

 更新时间:2014年05月28日 00:29:42   投稿:mdxy-dxy  
下面通过分解这个语句来回顾下代码中所涉及到的javascript知识,需要的朋友可以参考下

 以前最短的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中document获取元素方法示例详解

    JavaScript中document获取元素方法示例详解

    这篇文章主要介绍了JavaScript中获取页面元素的几种常用方法,分别是getElementById()、getElementsByClassName()、getElementsByTagName()、querySelector()和querySelectorAll(),每种方法都有其特点和适用场景,需要的朋友可以参考下
    2025-03-03
  • Bootstrap实现input控件失去焦点时验证

    Bootstrap实现input控件失去焦点时验证

    这篇文章主要介绍了Bootstrap实现input控件失去焦点时验证的相关资料,非常不错,需要的朋友可以参考下,需要的朋友可以参考下
    2016-08-08
  • 详解JavaScript基本类型和引用类型

    详解JavaScript基本类型和引用类型

    这篇文章主要介绍了JavaScript基本类型和引用类型,基本类型中还包含了类型转换,感兴趣的小伙伴们可以参考一下
    2015-12-12
  • js去除浏览器默认底图的方法

    js去除浏览器默认底图的方法

    这篇文章主要介绍了js去除浏览器默认底图的方法,可以实现图片loading预加载效果,非常具有实用价值,需要的朋友可以参考下
    2015-06-06
  • javascript-简单的计算器实现步骤分解(附图)

    javascript-简单的计算器实现步骤分解(附图)

    输入内容的判断,对于事件对象的来源的判断以及数学运算“+,-,*,/”的使用,感兴趣的朋友可以学习下
    2013-05-05
  • Bootstrap 设置datetimepicker在屏幕上面弹出设置方法

    Bootstrap 设置datetimepicker在屏幕上面弹出设置方法

    datetimepicker默认是在输入框下面弹出的,但是遇到输入框在屏幕下面时,日期选择框会有一部分在屏幕下面,显示不了,因此需要能够从上面弹出,下面小编给大家介绍下Bootstrap 设置datetimepicker在屏幕上面弹出的设置方法
    2017-03-03
  • 对Layer弹窗使用及返回数据接收的实例详解

    对Layer弹窗使用及返回数据接收的实例详解

    今天小编就为大家分享一篇对Layer弹窗使用及返回数据接收的实例详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • JS返回页面时自动回滚到历史浏览位置

    JS返回页面时自动回滚到历史浏览位置

    这篇文章主要介绍了JS返回页面时自动回滚到历史浏览位置的相关知识,本文给大家使用的是SessionStorage来存储页面内容,在返回页面时重新加载,具体实现代码大家跟随小编一起看看吧
    2018-09-09
  • 浅析JavaScript中let与const命令的区别

    浅析JavaScript中let与const命令的区别

    这篇文章主要为大家详细介绍了JavaScript中let命令与const命令的用法及区别,文中的示例代码讲解详细,具有一定的借鉴价值,需要的可以参考下
    2023-09-09
  • 完美实现js焦点轮播效果(二)(图片可滚动)

    完美实现js焦点轮播效果(二)(图片可滚动)

    这篇文章主要为大家详细介绍了完美实现js焦点轮播效果的相关代码,采用辅助图片实现图片无限滚动,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-03-03

最新评论