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.
目录
相关文章
|
1月前
|
JavaScript 前端开发 数据安全/隐私保护
jQuery Validate
jQuery Validate
52 4
jquery-todolist删除数据1-66
jquery-todolist删除数据1-66
68 0
jquery-todolist删除数据1-66
|
JavaScript
JQuery Tables 的应用(三)
jQuery 选择器的3个根选择器。 ----------------------------------------------------------------------------- jQuery(function ($) { }); $(document).
925 0
|
JSON JavaScript 前端开发
JQuery Tables 的应用(二)
【转贴地址】 https://blog.csdn.net/lovetea99/article/details/52026935 目标: 使用 jQuery Datatable 构造数据列表,并且增加或者隐藏相应的列,已达到数据显示要求。
1089 0
|
JavaScript 自然语言处理 前端开发
JQuery Tables 的应用(一)
具体查看参考文档 https://datatables.net/examples/index 其他参看:https://www.
1079 0