zoukankan      html  css  js  c++  java
  • 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.

    参考网址:

    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

  • 相关阅读:
    Live2d Test Env
    Live2d Test Env
    Live2d Test Env
    Live2d Test Env
    Live2d Test Env
    Live2d Test Env
    Live2d Test Env
    Live2d Test Env
    python嵌套列表知多少
    旋转图像
  • 原文地址:https://www.cnblogs.com/liminjun88/p/3672970.html
Copyright © 2011-2022 走看看