jQuery.unique引发一个血案
时间:2022-04-22
本文章向大家介绍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
- 简单的jquery拖曵原理js特效实例
- 使用MiniProfiler调试ASP.NET MVC网站性能
- 大金主撑腰 4声母Mynt.com竟36万元结拍
- ASP.NET MVC4 Web API 堆栈将添加指定消息处理功能
- 页面copyright部分始终居于页面底部
- Hammock for REST
- 网页超过一屏时自动浮动在网页最上方的图层特效
- 关于gcc、glibc和binutils模块之间的关系
- 贝叶斯过滤算法
- 強大的jQuery Chart组件-Highcharts
- vue2.0 配置 选项 属性 方法 事件 ——速查
- 亲密接触IIS 8和Web Deploy 3.0
- vue2.0 组件通信
- 在MongoDB中实现聚合函数
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Mac 下搭建 Clion + OpenCV4.x 的开发环境
- 超详细,Windows系统搭建Flink官方练习环境
- MySQL 覆盖索引与延迟关联
- Java面试题总结之数据结构、算法和计算机基础(刘小牛和丝音的爱情故事1)
- 在Java中什么时候才要考虑线程安全
- android功耗优化(2)--对齐唤醒
- Android 功耗(3)---高通功耗问题分析方法
- 搞定Java快速排序
- Android 功耗(4)---MTK平台待机功耗分析流程
- 使用iframe实现在pc端预览移动端页面的效果
- html+css实现彩色渐变滑动条
- 项目实战 01:将唐诗三百首写入 Elasticsearch 会发生什么?
- 装饰器和代理模式的区别,从一碗小米粥谈起
- EasyNVR部署在centos虚拟机上出现无法访问情况,该如何排查?
- RTSP协议网页无插件直播平台EasyNVR视频广场无法搜索纯数字关键词的通道,该如何解决的?