JQuery 操作数组 each、map、grep、filter

来源:网络 责任编辑:栏目编辑 发表时间:2013-07-01 23:24 点击:

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);
});   www.2cto.com
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) 参数是函数;


作者:cqkxzyi

    相关新闻>>

      发表评论
      请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
      用户名: 验证码:点击我更换图片
      最新评论 更多>>

      推荐热点

      • Gb2312转utf-8编码的方法(vbs+js)
      • 如何使用Ajax技术开发Web应用程序(1)
      • js跳转路径问题
      • JavaScript模仿桌面窗口
      • 用js检测两个线段是否相交
      • 我知道的JavaScript -- 设计模式(桥接)应用之 – 验证器
      • 运用JavaScript构建你的第一个Metro式应用程序(on Windows
      • 我是如何去了解jquery的(六),案例之幻灯片轮换
      • Jquery封装幻灯片效果
      网站首页 - 友情链接 - 网站地图 - TAG标签 - RSS订阅 - 内容搜索
      Copyright © 2008-2015 计算机技术学习交流网. 版权所有

      豫ICP备11007008号-1