项目开发过程中，PM说系统只要在一个特定的浏览器中运行就好，但是在其他的浏览器中不能出现逻辑的错误，所以在开发过程中，前端和后台选择是Chrome浏览器，没有仔细测试Firefox和IE。但是昨天PM反映了一个bug，是浏览器兼容性bug，在Chrome浏览器下工作正常，但是在IE浏览器不报错，但是逻辑是不对的。剔除复杂的业务逻辑，代码精简如下：

  1. <html>
  2.     <head>
  3.         <meta charset="utf-8"/>
  4.  
  5.         <script type="text/javascript" src="jquery-1.10.2.min.js"></script>
  6.         <script type="text/javascript" src="underscore.js"></script>
  7.     </head>
  8.     <body>
  9.         <input type="hidden" value="" id="tempids"/>
  10.         <input type="text" value="" id="tempvalue"/>
  11.         <script type="text/javascript">
  12.         var arr1=$("#tempids").val().split(",");
  13.         var arr2=[4,5,6];
  14.  
  15.         $("#tempvalue").val($.unique($.merge(arr1,arr2)).join(","));
  16.  
  17.         var selectedFilterIds = $("#tempvalue").val();
  18.         if (selectedFilterIds.split(",")[0] == "")
  19.         {
  20.             alert("选择结果为空!");
  21.         }
  22.         else{
  23.             alert("有数据!");
  24.         }
  25.         </script>
  26.     </body>
  27. </html>

程序的目的，是把arr2合并到arr1中，然后对数组进行去重操作。错误就是在去重操作上，我们使用jQuery.unique()。jQuery.unique()方法在Chrome和IE浏览器中输出的结果不相同。看下面示例：

  1. var temp=$.unique([1,2,3,3,2,1,4]);
  2.         for(var j=0;j<temp.length;j++){
  3.             console.log(temp[j]);
  4.         }

在Chrome中输出结果是：4 3 2 1；但是在IE下输出的结果是：2 3 2 1 4。结果不一样。在参考网址的stack overflow有解释。不过我们用错了unique()这方法。

注意：删除数组中的重复元素。只处理删除DOM元素数组，而不能处理字符串或数字数组。

要处理字符串或数字数组，我们可以借助UnderScore.js类库里面的uniq()方法。代码如下：

  1. var temp=_.uniq([1,2,3,3,2,1,4]);
  2. for(var j=0;j<temp.length;j++){
  3.        console.log(temp[j]);
  4. }

输出结果在Chrome和IE下都是相同的。1,2,3，4.

参考网址：

jQuery.unique()方法：http://www.css88.com/jqapi-1.9/jQuery.unique/

UnderScore.js里面的uniq()方法：http://www.css88.com/doc/underscore/#uniq

Stack Overflow:http://stackoverflow.com/questions/7366095/how-to-use-unique-function

jQuery.unique引发一个血案的更多相关文章

  1. jQuery版本引发的血案 iframe error 和 checkbox 无法勾选

    问题介绍: 1.由于我们的项目里面用了很多Iframe,在初始话加载的时候页面就会报错.一开始调试很久没找到什么原因,看打印结果页面会被两次load,只能一步步找, 最后发现在document rea ...

  2. 一个由正则表达式引发的血案 vs2017使用rdlc实现批量打印 vs2017使用rdlc [asp.net core 源码分析] 01 - Session SignalR sql for xml path用法 MemCahe C# 操作Excel图形——绘制、读取、隐藏、删除图形 IOC,DIP,DI,IoC容器

    1. 血案由来 近期我在为Lazada卖家中心做一个自助注册的项目,其中的shop name校验规则较为复杂,要求:1. 英文字母大小写2. 数字3. 越南文4. 一些特殊字符,如“&”,“- ...

  3. Replication的犄角旮旯（六）-- 一个DDL引发的血案(上)（如何近似估算DDL操作进度）

    <Replication的犄角旮旯>系列导读 Replication的犄角旮旯(一)--变更订阅端表名的应用场景 Replication的犄角旮旯(二)--寻找订阅端丢失的记录 Repli ...

  4. Replication的犄角旮旯（七）-- 一个DDL引发的血案(下)（聊聊logreader的延迟）

    <Replication的犄角旮旯>系列导读 Replication的犄角旮旯(一)--变更订阅端表名的应用场景 Replication的犄角旮旯(二)--寻找订阅端丢失的记录 Repli ...

  5. 转：一个Sqrt函数引发的血案

    转自:http://www.cnblogs.com/pkuoliver/archive/2010/10/06/1844725.html 源码下载地址:http://diducoder.com/sotr ...

  6. 一个Sqrt函数引发的血案(转）

    作者: 码农1946  来源: 博客园  发布时间: 2013-10-09 11:37  阅读: 4556 次  推荐: 41   原文链接   [收藏]   好吧,我承认我标题党了,不过既然你来了, ...

  7. 一个字母引发的血案 java.io.File中mkdir()和mkdirs()

    一个字母引发的血案 明天开始放年假了,临放假前有个爬虫的任务,其中需要把网络图片保存到本地,很简单,马上写完了代码: //省略部分代码... Long fileId= (Long) data.get( ...

  8. 一个无锁消息队列引发的血案（六）——RingQueue(中) 休眠的艺术 [续]

    目录 (一)起因 (二)混合自旋锁 (三)q3.h 与 RingBuffer (四)RingQueue(上) 自旋锁 (五)RingQueue(中) 休眠的艺术 (六)RingQueue(中) 休眠的 ...

  9. 一个无锁消息队列引发的血案（五）——RingQueue(中) 休眠的艺术

    目录 (一)起因 (二)混合自旋锁 (三)q3.h 与 RingBuffer (四)RingQueue(上) 自旋锁 (五)RingQueue(中) 休眠的艺术 (六)RingQueue(中) 休眠的 ...

随机推荐

  1. JQuery的一些简单功能

    JQuery js的缺点总结 1.入口函数只能有一个,如果出现多个,后面的会覆盖掉前面的 2.代码容错性差,容易出错,出错会导致后面的代码不执行 3.存在浏览器兼容性,比如innerText在火狐浏览 ...

  2. http服务的安装与配置

    挂载光盘mount /dev/cdrom /y       #y是挂载光盘的位置 使用yum命令进安装httpd服务 yum命令的配置文件, yum配置文件位于 /etc/yun.repos.d 目录 ...

  3. Where product development should start

    We all need to know our customers in order to create products they’ll actually buy. This is why the  ...

  4. MongoDB 由于目标计算机积极拒绝，无法连接 2014-07-25T11:00:48.634+0800 warning: Failed to connect to 127.0.0.1:27017, reason: errno:10061

    转载自:http://www.cnblogs.com/xiaoit/p/3867573.html 1:启动MongoDB 2014-07-25T11:00:48.634+0800 warning: F ...

  5. 设计模式（十三） 职责链(chain of responsibility)

    软件领域中的设计模式为开发人员提供了一种使用专家设计经验的有效途径.设计模式中运用了面向对象编程语言的重要特性:封装.继承.多态,真正领悟设计模式的精髓是可能一个漫长的过程,需要大量实践经验的积累.最 ...

  6. indexOf、instanceOf、typeOf、valueOf详解

    1.indexOf() 该方法用来返回某个指定的字符串值在字符串中首次出现的位置. 语法:indexOf(searchvalue,fromindex);两个参数,参数一表示查询的字符串值,参数二可选表 ...

  7. <十五>JDBC_使用 DBUtils 进行更新、查询操作

    详解待续... DBUtilsTest.java import java.sql.Connection;import java.sql.Date;import java.sql.ResultSet;i ...

  8. bat获取所有的参数

    bat默认只能获取到1-9个参数,分别用%1 %2 ... %9引用,如果传给bat的参数大于9个,就必须用shift. 工作需要,要写个bat脚本,获取所有的参数,再将所有的参数传给Java,代码如 ...

  9. Python之路Day15--JavaScript(一)

    一.JavaScript简介 JavaScript是世界上最流行的脚本语言,因为你在电脑.手机.平板上浏览的所有的网页,以及无数基于HTML5的手机App,交互逻辑都是由JavaScript驱动的. ...

  10. ASP.NET SignalR 高可用设计

    在 One ASP.NET 的架构图中,微软将 WebAPI 和 SignalR 归类到 Services 类型与 MVC.Web Forms 同列为一等公民,未来的 ASP.NET 5 尽管还在be ...