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.
目录
相关文章
|
数据采集 机器学习/深度学习 数据可视化
ICCV 2023|基于ViT的高效视频识别UniFormerV2开源,K400首次90%准确率!
ICCV 2023|基于ViT的高效视频识别UniFormerV2开源,K400首次90%准确率!
374 0
|
6月前
|
弹性计算 监控 安全
实测阿里云操作系统控制台:功能、诊断与优化
阿里云操作系统(AliOS)是阿里巴巴专为物联网和智能设备开发的操作系统,提供高效、安全、智能化的解决方案。本文介绍了如何开通和使用阿里云的云服务器ECS,包括注册、选择操作系统、创建用户及授权等步骤。通过控制台,用户可以实时监控设备状态、管理组件、进行性能诊断,并优化资源使用。掌握这些功能有助于提升系统管理和数据处理能力,满足物联网场景的多样化需求。建议进一步丰富系统健康指标和观测功能,以提供更好的用户体验。
384 24
|
10月前
|
API 开发者 Python
探索Python中的异步编程:Asyncio与Tornado的对决
在这个快节奏的世界里,Python开发者面临着一个挑战:如何让代码跑得更快?本文将带你走进Python异步编程的两大阵营——Asyncio和Tornado,探讨它们如何帮助我们提升性能,以及在实际应用中如何选择。我们将通过一场虚拟的“对决”,比较这两个框架的性能和易用性,让你在异步编程的战场上做出明智的选择。
|
5月前
|
数据采集 人工智能 运维
深度探讨操作系统运维、软件选型等社区标准,龙蜥标准化 SIG MeetUp 圆满举办
围绕软件选型、操作系统运维、RISC-V 三个方向的社区标准进行了分享与讨论。
深度探讨操作系统运维、软件选型等社区标准,龙蜥标准化 SIG MeetUp 圆满举办
|
SQL 分布式计算 DataWorks
MaxCompute产品使用合集之如何识别并执行某个字段的 SQL 语句,并输出结果
MaxCompute作为一款全面的大数据处理平台,广泛应用于各类大数据分析、数据挖掘、BI及机器学习场景。掌握其核心功能、熟练操作流程、遵循最佳实践,可以帮助用户高效、安全地管理和利用海量数据。以下是一个关于MaxCompute产品使用的合集,涵盖了其核心功能、应用场景、操作流程以及最佳实践等内容。
252 2
|
Kubernetes Linux Go
基于Goland和dlv远程调试Kubernetes组件
基于Goland和dlv远程调试Kubernetes组件
|
SQL Web App开发 XML
企望制造ERP系统存在远程命令执行漏洞
企望制造 ERP comboxstore.action接口权限设置不当,默认的配置可执行任意SQL语句,利用xp_cmdshell函数可远程执行命令,未经认证的攻击者可通过该漏洞获取服务器权限。
461 1
|
数据采集 设计模式 前端开发
实战爬虫:通过联行号轻松获取银行支行信息
经过一段时间的加班,终于是把项目熬上线了。本以为可以轻松一点,但往往事与愿违,出现了各种各样的问题。由于做的是POS前置交易系统,涉及到和商户进件以及交易相关的业务,需要向上游支付机构上送“联行号”,但是由于系统内的数据不全,经常出现找不到银行或者联行号有误等情况,导致无法进件。
实战爬虫:通过联行号轻松获取银行支行信息
|
JSON Java 数据库连接
IDEA在写Mybatis时遇到了Could not autowire. No beans of 'xxxx' type found 的错误提示
IDEA在写Mybatis时遇到了Could not autowire. No beans of 'xxxx' type found 的错误提示
379 0
|
JSON 安全 搜索推荐
【CCF-CSP】历年考点全归纳
【CCF-CSP】历年考点全归纳
621 0