JQuery 操作数组 each、map、grep、filter
Jquery中对数组的操作大致有一下几种形式:
1、$.each( collection, callback(indexInArray, valueOfElement) )
$.each()函数和$(selector).each()不一样。$.each()函数可以用来遍历任何一个集合,不管是一个JavaScript对象或者是一个数组,如果是一个数组的话,回调函数每次传递一个数组的下标和这个下标所对应的数组的值(这个值也可以在函数体中通过this关键字获取,但是JavaScript通常会把this这个值当作一个对象即使他只是一个简单的字符串或者是一个数字),这个函数返回所遍历的对象,也就是这个函数的第一个参数,注意这里还是原来的那个数组,这是和map的区别。
其中collection代表目标数组,callback代表回调函数(自己定义),回调函数的参数第一个是数组的下标,第二个是数组的元素。当然我们也可以给回调函数只设定一个参数,这个参数一定是下标,而没有参数也是可以的。
下面举个例子:
var mem = ['a','b','c'];
var returnvalue = $.each(mem, function(index) {
alert(index);
});
或
var mem = ['a','b','c'];
var returnvalue = $.each(mem, function(index,value) {
alert(index + " " + value);
});
或
var mem = ['a','b','c'];
var returnvalue = $.each(mem, function() {
});
2、$.map( array, callback(elementOfArray, indexInArray) )
$.map()这个函数和each非常的相似,最重要的区别就是map是用来生成一个新的数组,也就是说我们可以在回调函数中修改遍历到的每一个元素(通过return返回新的值,不return就没有值了),最后返回一个新的数组。
参数方面和each基本没有什么区别,不多做解释。
下面举个例子:
var arr = [ "a", "b", "c", "d", "e" ];
var arr2 = jQuery.map(arr, function(n, i){
return (n.toUpperCase() + i);
});
alert(arr);
alert(arr2);
程序执行后的结果为:
a,b,c,d,e
A0,B1,C2,D3,E4
3、$.grep( array, function(elementOfArray, indexInArray) [, invert] )
$.grep()函数除去了不需要的元素,起到了一个筛选的作用,通过将它的元素通过一个测试函数,也就是grep()的第二个参数,需要注意的是这里参数和前面两个函数的回调函数的参数顺序相反。通过这两个参数来控制自己需要哪些元素,通过return语句返回出来(return true说明这个元素是需要的)。另外,在grep()中可以通过正则表达式(return elementOfArray.match(正则表达式))来控制筛选,这样能使筛选更加的灵活、强大。grep()函数和map()函数一样也是生成一个新的数组。grep()中的第三个参数是一个布尔数通常是省略的,默认是false,如果设置为true,那么回调函数的返回值的效果刚好相反,返回true的会被去掉。
下面举个例子:
var arr = [ 1, 9, 3, 8, 6, 1, 5, 9, 4, 7, 3, 8, 6, 9, 1 ];
arr = jQuery.grep(arr, function(n, i){
return (n != 5 && i > 4);
});
4、filter (fn) 参数是函数;
JQuery 操作数组 each、map、grep、filter的更多相关文章
- C#数组的Map、Filter、Reduce操作
在Javascript.Python等语言里,Map.Filter和Reduce是数组的常用方法,可以让你在实现一些数组操作时告别循环,具有很高的实用价值.它们三个的意义大家应该都清楚,有一个十分形象 ...
- JQuery 操作数组 each、map、grep
Jquery中对数组的操作大致有一下几种形式:1.$.each( collection, callback(indexInArray, valueOfElement) )$.each()函数和$(se ...
- Javascript/Jquery操作数组,增删改查以及动态创建HTML元素
<html> <head> <title> New Document </title> <script src="~/Scripts/j ...
- JQuery操作数组函数 push(),pop(),unshift(),shift()
1.array.push() :在数组尾部添加新的元素,并返回新的数组长度. 2.array.unshift() :在数组头部添加新的元素,并返回新的数组长度.[听说IE浏览器不支持] 3.array ...
- 原生JS数组操作的6个函数 arr.forEach arr.map arr.filter arr.some arr.every arr.findIndex
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- JavaScript数组方法的兼容性写法 汇总:indexOf()、forEach()、map()、filter()、some()、every()
ECMA Script5中数组方法如indexOf().forEach().map().filter().some()并不支持IE6-8,但是国内依然有一大部分用户使用IE6-8,而以上数组方法又确实 ...
- JQuery对数组的一些操作总结
JQuery对数组的处理非常便捷并且功能强大齐全,一步到位的封装了很多原生js数组不能企及的功能.下面来看看JQuery数组的强大之处在哪. $.each(array, [callback]) 遍历 ...
- ES6 数组遍历方法的实战用法总结(forEach,every,some,map,filter,reduce,reduceRight,indexOf,lastIndexOf)
目录 forEach every some map filter reduce && reduceRight indexOf lastIndexOf 前言 ES6原生语法中提供了非常多 ...
- 数组方法map(映射),reduce(规约),foreach(遍历),filter(过滤)
数组方法map(映射),reduce(规约),foreach(遍历),filter(过滤) map()方法返回一个由原数组中每一个元素调用一个指定方法后返回的新数组 reduce()方法接受一个函数作 ...
随机推荐
- Docker容器镜像瘦身的三个小窍门(转)
[转自:http://dockone.io/article/8174] 在构建Docker容器时,我们应尽可能减小镜像的大小.使用共享层的镜像尺寸越小,其传输和部署速度越快. 不过在每个RUN语句都会 ...
- python脚本处理下载的b站学习视频
作为常年在b站学习的我,一直以来看到有兴趣的视频,从来都是点赞收藏下载三连,但是苦于我那小钢炮iphone se屏幕大小有限,看起视频实在费劲,决定一定要找个下载电脑上下载b站视频的方法,以前用过硕鼠 ...
- L2-028 秀恩爱分得快(模拟)
古人云:秀恩爱,分得快. 互联网上每天都有大量人发布大量照片,我们通过分析这些照片,可以分析人与人之间的亲密度.如果一张照片上出现了 K 个人,这些人两两间的亲密度就被定义为 1/K.任意两个人如果同 ...
- JVM深入理解
JVM深入理解 一.JVM介绍 JVM应用百度百科的原话是: JVM是Java Virtual Machine(Java虚拟机)的缩写,JVM是一种用于计算设备的规范,它是一个虚构出来的计算机,是通过 ...
- project2
[概念] 要好好理解并且背下来记住 Java基础,呵呵呵.自己查吧. local host搞错了,整个跑不出来.真尴尬.不理解啊. static原来是全局的意思啊,好吧.以前都忘了,这次该记住了.st ...
- eclipse中启动服务时提示端口被占的2种解决方案
出现类似这样的:port '19001' at localhost are already in use 第一种:在任务管理器中关闭相关eclipse进程,然后重启eclipse.这种方法可能有时候会 ...
- HTTPClient to use http/https protocol to send request
使用了spring boot, gradle, commons-httpcomponent3. 目前httpclient 已经有了版本4. https://github.com/lvfe/httpCl ...
- Ruby http/net 中连接超时问题
下面在调用币安的接口时,经常会卡住,设置连接超时也不会抛出异常,代码如下(默认连接超时为nil, 参考:https://github.com/ruby/ruby/pull/269): require ...
- MyBatis updateByExample和updateByExampleSelective的区别
大家都用过mybatis generator来生产数据库的xml文件,但是关于updateByExample和updateByExampleSelective的区别我之前一直分不太清楚. 如果分不清楚 ...
- java整数溢出问题及提升为long型
整数溢出问题 Java 中的 int 用 32 位表示,正数最大值的情况,首位是 0,其他位都可以是 1(就是 2^31-1).但是如果正数过大了,例如 2^31,计算机不得不把首位变成 1,并且计算 ...