jQuery.unique引发一个血案

项目开发过程中,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.

时间: 2024-08-04 01:34:44

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

一个由正则表达式引发的血案

今天为大家送上一篇很有意思的小文章,具有提神醒脑之功效.作者是来自阿里巴巴LAZADA产品技术部的申徒童鞋. 1. 血案由来 近期我在为Lazada卖家中心做一个自助注册的项目,其中的shop name校验规则较为复杂,要求: 1. 英文字母大小写 2. 数字 3. 越南文 4. 一些特殊字符,如"&","-","_"等 看到这个要求的时候,自然而然地想到了正则表达式.于是就有了下面的表达式(写的比较龊): ^([A-Za-z0-9._(

一个等号引发的血案(谈Nginx正确的404配置)_nginx

这是一个血淋淋的教训,这么说一点也不过分.因为最近发生了一个重大问题,网站流量大幅下跌,跌了近80%了.由于事件发生之前做过一些工作,加了大量友链,而且外站权重都相当高,在那天还发生了一次挂马事件,当然也即时解决了.还做了其它一些关键字内.外链优化等等.这样使得查找问题的原因就变的难上加难.偶然的原因发现,百度收录的链接开始出现错误,由于网站URL方式采用的目录式结构,最后一个字符都是/,然而百度收录的页面却无缘无故把这个线去掉了,而这种访问方式,我并没有做兼容.当时也查看了网站页面上的重写结果

一次马失前蹄的SQL优化:递归查询引发的血案

作者介绍 黄浩:从业十年,始终专注于SQL.十年一剑,十年磨砺.3年通信行业,写就近3万条SQL:5年制造行业,遨游在ETL的浪潮:2年性能优化,厚积薄发自成一家.   在上个案例分享时,有读者表示"很想知道,作者失败的时候是怎么办?",并且看热闹不嫌事大,要求"来一篇文章呗".好吧,正所谓,常在河边走,哪有不湿鞋.本人在SQL优化领域摸爬滚打多年,"接客"无数,难免会遇到些难以伺候的"官人",本文就跟大家分享一次不成功的优化

一次由注释引发的“血案”

原文:一次由注释引发的"血案" 有几天没写博客了,今天有点时间,正好把前几天遇到的一件"诡异"的问题记录一下. 我是在前几天学习CSS时遇到这个问题的.当时看到某个网站有一个CSS效果不错,就想研究一下.由于代码很短,我不想将整个页面保存下来,所以我点击"查看源文件",找到这段代码并拷贝到测试页面中. 它的主要部分是这样的: /*file设为透明,并覆盖整个触发面*/ a.files input { margin-left:-350px; fon

[WCF]缺少一行代码引发的血案

这是今天作项目支持的发现的一个关于WCF的问题,虽然最终我只是添加了一行代码就解决了这个问题,但是整个纠错过程是痛苦的,甚至最终发现这个问题都具有偶然性.具体来说,这是一个关于如何自动为服务接口(契约)的每个操作添加FaultContract与WCF服务元数据发布的问题.接下来通过一个简单的实例来说明这个因为少写了一行代码引发的血案. 一.手工添加FaultContract WCF采用基于消息的通信方式,Endpoint的ABC三要素之一的契约(Contract)的本质就是定义消息的结构.契约不

一场越狱引发的血案:越狱开发者社区的崩裂,以及“中国队友”不按套路出牌的玩法

[更新]今天下午"快用苹果助手"召开发布会,正式对外发布越狱工具"太极 7",并公开承认"太极助手"为快用旗下产品.快用 CEO 谢雷表示,由于 bug 原因快用将暂时停止和 evad3rs 团队的合作,并且太极团队将单独发布越狱工具......这是一场越狱引发的"血案"......著名的越狱团队evad3rs昨晚在毫无任何征兆的情况之下,放出 iOS 7 的越狱工具 evasi0n7.和之前越狱不同的是,evasi0n7 越

用jquery写的一个万年历

 万年历,想必大家对它都不陌生吧,下面是使用jquery写的一个万年历示例,喜欢的朋友可以参考下 代码如下: <!Doctype html><html xmlns=http://www.w3.org/1999/xhtml>  <head>  <meta http-equiv=Content-Type content="text/html;charset=utf-8">  <style>  .main{  width:600px

自己用jQuery写了一个图片的马赛克消失效果

 这篇文章主要介绍的是自己用jQuery写了一个图片的马赛克消失效果实现过程,需要的朋友可以参考下 其中的一个效果:   html代码: 代码如下: <h1>单击图片,产生效果</h1> <div class="box"></div> 插件代码: 代码如下: ; (function ($) { var defaults = { ani: 4, //动画效果.1.马赛克向中间聚拢,2.马赛克左上角聚拢,3.马赛克拉扯消失,4.原地缩小 de

jquery做的一个简单的屏幕锁定提示框

 这篇文章主要介绍了使用jquery做的一个简单的屏幕锁定提示框,需要的朋友可以参考下 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html xmlns="http://www.w3.org/1999/xhtml"&