项目开发过程中,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. 【总结】C# 设置委托的机理和简要步骤

    [引语]实际上,和Winform打交道的第一天呢,我们就已经接触了委托,例如当双击button产生button1_click,这个呢,是对button1点击事件的处理方法,至于委托和订阅事件,就悄悄的 ...

  2. 一、JSP、servlet、SQL三者之间的数据传递(前台与后台数据交互)

    背景: 目前业界很流行的MVC(model-view-control)开发模式,理解为 模型是Bean, 视图是 Html/Jsp, 控制是Servlet, 关联数据库的Dao web的运行机制: 数 ...

  3. Unity3D 脚本手册

    1.private Ray ray;  --定义射线 ray = Camera.main.ScreenPointToRay(Input.mousePosition);  --摄像机发出的射线投射鼠标到 ...

  4. Android之Json的学习

    json数据包含json对象,json数组,对象是{ },数组是[ ], 数组里面还可以包含json对象,json对象之间是用逗号(,)隔开 形式如下: { "languages" ...

  5. 串口实现FIFO接受数据

    基本原理:静态队列 /* * 串口的FIFO简单读取实现 * 功能,实现串口的FIFO实现 * 使用方法: * 版本:v1.0.0 * */ #include "sys.h" #i ...

  6. reconnectingwebsocket.js

    // MIT License: // // Copyright (c) 2010-2012, Joe Walnes // // Permission is hereby granted, free o ...

  7. Xcode 改时间问题 lua代码没反应问题

    Xcode 改时间问题  rm -fr $_TARGET_BUILD_CONTENTS_PATH/$1/*

  8. HDU1039-Easier Done Than Said?(字符串处理)

    一,题意: 判断三个条件 1:有元音字母 2:不能三个连续元音或辅音 3:不能连续两个相同的字母,除非ee或oo二,思路 写函数一个条件一个条件去判断 #include<iostream> ...

  9. HTML 常用标签

    一.基础标签 <!-- -->    定义注释 <!DOCTYPE> 定义文档类型 <style> 定义文档的样式信息 <meta> 定义关于HTML文 ...

  10. java多线程系类:JUC原子类:01之框架

    本系列内容全部来自于http://www.cnblogs.com/skywang12345/p/3514589.html 特在此说明!!!!! 根据修改的数据类型,可以将JUC包中的原子操作类可以分为 ...