zoukankan      html  css  js  c++  java
  • JQuery 操作数组 each、map、grep

    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()方法用于数组元素过滤筛选

    grep(array,callback,invert)

    array:待过滤数组;
    callback:处理数组中的每个元素,并过滤元素,该函数中包含两个参数,第一个是当前数组元素的值,一个是当前数组元素的下标,即元素索引值。此函数应返回一个布尔值。另外,此函数可设置为一个字符串,当设置为字符串时,将视为“lambda-form”(缩写形式?),其中 a 代表数组元素,i 代表元素索引值。如“a > 0”代表“function(a){ return a > 0; }”
    invert:布尔型可选项,默认值false,值为true或false, 如果 “invert” 为 false 或为设置,则函数返回数组中由过滤函数返回 true 的元素,当”invert” 为 true,则返回过滤函数中返回 false 的元素集。
    var arr=$.grep([0,1,2,3,4,5,6],function(n,i){
    return n>2
    });
    上面的例子返回[3,4,5,6],但是我们给invert的值为true,例如
    var arr=$.grep([0,1,2,3,4,5,6],function(n,i){
    return n>2
    },ture);
    所以现在返回的是[0,1,2],也就是被callback函数过滤掉的元素。
     
     
     
    参考:http://blog.csdn.net/zhu_ark/article/details/7077660
     
    参考2:http://www.111cn.net/wy/jquery/46753.htm
      (

    jQuery数组($.each,$.grep,$.map,$.merge,$.inArray,$.unique,$.makeArray)处理函数详解)


  • 相关阅读:
    HTML_表单
    HTML_列表、表格与媒体元素
    HTML_HTML5基础
    使用java理解程序逻辑 试题分析
    字符串
    带参数的方法
    人机猜拳
    类的无参方法
    类和对象
    vue cli+axios踩坑记录+拦截器使用,代理跨域proxy(更新)
  • 原文地址:https://www.cnblogs.com/qingqingzou-143/p/6595016.html
Copyright © 2011-2022 走看看