您的位置：首页 > Web前端 > JQuery

【转载】jQuery.unique引发一个血案

2018-03-06 16:59 218 查看

原文地址：链接项目开发过程中，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/#uniqStack Overflow:http://stackoverflow.com/questions/7366095/how-to-use-unique-function

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 去重

相关文章推荐

新的分享

章节导航