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

<html>
<head>
<meta charset="utf-8"/> <script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="underscore.js"></script>
</head>
<body>
<input type="hidden" value="" id="tempids"/>
<input type="text" value="" id="tempvalue"/>
<script type="text/javascript">
var arr1=$("#tempids").val().split(",");
var arr2=[4,5,6]; $("#tempvalue").val($.unique($.merge(arr1,arr2)).join(",")); var selectedFilterIds = $("#tempvalue").val();
if (selectedFilterIds.split(",")[0] == "")
{
alert("选择结果为空!");
}
else{
alert("有数据!");
}
</script>
</body>
</html>

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

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

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

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

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

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

输出结果在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. ubuntu16.04 install flash

    今天安装了一下flash,发现不同版本的Ubuntu复制的位置不同,此处介绍Ubuntu16.04的安装方式 1.首先下载flash,下载tar.gz的 2.解压缩到当前目录 3,打开terminal ...

  2. Salesforce学习资料

    官方文档下载网址:https://developer.salesforce.com/docs 关于Salesforce的所有官方文档都在以上的地址之中,可以进行在线预览和下载 推荐新手学习以下几本文档 ...

  3. Python 爬虫4——使用正则表达式筛选内容

    之前说过,使用urllib和urllib2,只是为了获取指定URL的html内容,而对内容进行解析和筛选,则需要借助python中的正则表达式来完成. 一.预备知识: 1.正则表达式简述: 什么是正则 ...

  4. STM32之待机唤醒

    前段时间我稍微涉及节能减排大赛..倡导节能的社会..没错了.你真是太聪明了..知道了我今天要讲关于STM32节能方面的模块..没错..这标题已经告诉你了是吧..哦,对,标题有写..所以..言归正传.至 ...

  5. STM32_RTC君

    五一假期已过,大家是否还像五一五二五三那样快乐呢??答案就交给你们自己寻找了哈..说到五一..就从五一开始的那一刻起..就开始计时着..到五一假期结束..呵呵..在这里,智商和情商比我高的人估计又猜到 ...

  6. MFC覆盖OnPrepareDC实现“所见即所得”打印

    附件下载:http://files.cnblogs.com/mengdejun/print.zip void CPrintView::OnPrepareDC(CDC* pDC, CPrintInfo* ...

  7. 安装WampServer时出现的问题(丢失VCRUNTIME140.dll或MSVCR110.dll)以及解决办法

    今天,在安装WampServer时,刚开始提示了"丢失VCRUNTIME140.dll"的问题. 我就网上查了一下,结果大家说是没有安装VC++,然后我就按照网友们提供的网址去下载 ...

  8. 关于chrome控制台那些事

    作为一名前端,除了编写完美代码之外(个人还不具备),当然也要会调试啦,对于firebug比较而言,我还是更喜欢chrome控制台比较多(可能使用较多,更顺手的原因吧).所以来总结下,关于chrome控 ...

  9. 向mysql中插入Date类型的数据

    先看数据库表的定义 date字段为sql.date类型.我要向其中插入指定的日期和当前日期. 一.插入当前日期 思路:先获取当前系统,在将当前系统时间转换成sql类型的时间,然后插入数据库.代码如下 ...

  10. mathlab之floor,ceil,round,int以及fix函数

    建议自己动手敲敲,网上很多人自己都没搞清楚然后好多错的.毕竟自己亲眼看到结果才有说服力. 以下是我亲眼见到的结果. 1.double floor(double)函数 floor()函数是常用的取整函数 ...