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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM