Jquery遍历筛选数组的几种方法和遍历解析json对象|Map()方法详解

最新推荐文章于 2023-05-14 10:39:52 发布

转载最新推荐文章于 2023-05-14 10:39:52 发布 · 444 阅读

Jquery 专栏收录该内容

1 篇文章

订阅专栏

本文介绍使用JQuery进行数组及JSON对象的多种遍历方法，包括$.grep(), $.each(), $.inArray(), $.map()等函数的应用，并提供实例代码。同时涵盖JSON对象解析技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

转自： https://www.cnblogs.com/sntetwt/p/4054387.html

query遍历筛选数组的几种方法和遍历解析json对象|Map()方法详解

一、Jquery遍历筛选数组

1、jquery grep()筛选遍历数组

$().ready(
   function(){
       var array = [1,2,3,4,5,6,7,8,9];
       var filterarray = $.grep(array,function(value){
           return value > 5;//筛选出大于5的
       });
       for(var i=0;i<filterarray.length;i++){
           alert(filterarray[i]);
       }
       for (key in filterarray){
           alert(filterarray[key]);
       }
   }
);

2、jquery each()筛选遍历数组

$().ready(
   function(){
       var anObject = {one:1,two:2,three:3};//对json数组each
       $.each(anObject,function(name,value) {
           alert(name);
           alert(value);
       });
       var anArray = ['one','two','three'];
       $.each(anArray,function(n,value){
           alert(n);
           alert(value);
       }
       );
   }
);

3、jquery inArray()筛选遍历数组

$().ready(
   function(){
       var anArray = ['one','two','three'];
       var index = $.inArray(‘two’,anArray);
       alert(index);//返回该值在数组中的键值，返回1
       alert(anArray[index]);//value is two
   }
);

4、jquery map()筛选遍历数组

$().ready(
   function(){
       var strings = ['0','1','2','3','4','S','6'];
       var values = $.map(strings,function(value){
               var result = new Number(value);
               return isNaN(result) ? null:result;//isNaN:is Not a Number的缩写
           }
       );
       for (key in values) {
           alert(values[key]);
       }
   }
);

二、遍历解析json对象

var json = [{dd:'SB',AA:'东东',re1:123},{cccc:'dd',lk:'1qw'}];
for(var i=0,l=json.length;i<l;i++){
   for(var key in json[i]){
       alert(key+’:'+json[i][key]);
   }
}

2、jquery遍历解析json对象2
有如下 json对象：
var obj ={”name”:”冯娟”,”password”:”123456″,”department”:”技术部”,”sex”:” 女”,”old”:30};
遍历方法：

for(var p in obj){
   str = str+obj[p]+’,’;
   return str;
 
}

三、Map()方法详解
1、实例

构建表单中所有值的列表：

$("p").append( $("input").map(function(){
 
  return $(this).val();
 
}).get().join(", ") );

2、定义和用法

map() 把每个元素通过函数传递到当前匹配集合中，生成包含返回值的新的 jQuery 对象。

3语法

.map(callback(index,domElement))

参数

描述

callback(index,domElement)

对当前集合中的每个元素调用的函数对象。

详细说明

由于返回值是 jQuery 封装的数组，使用 get() 来处理返回的对象以得到基础的数组。

.map() 方法对于获得或设置元素集的值特别有用。请思考下面这个带有一系列复选框的表单：

<form method="post" action="">
 
 <fieldset>
    <div>
      <label for="two">2</label>
      <input type="checkbox" value="2" id="two" name="number[]">
    </div>
    <div>
      <label for="four">4</label>
      <input type="checkbox" value="4" id="four" name="number[]">
    </div>
    <div>
      <label for="six">6</label>
      <input type="checkbox" value="6" id="six" name="number[]">
    </div>
    <div>
      <label for="eight">8</label>
      <input type="checkbox" value="8" id="eight" name="number[]">
    </div>
 </fieldset>
 
</form>

我们能够获得复选框 ID 组成的逗号分隔的列表：

$(':checkbox').map(function() {
 
  return this.id;
 
}).get().join(',');

本次调用的结果是字符串："two,four,six,eight"。
在 callback 函数内部，this 引用每次迭代的当前 DOM 元素。该函数可返回单独的数据项，或者是要被插入结果集中的数据项的数组。如果返回的是数组，数组内的元素会被插入集合中。如果函数返回 null 或 undefined，则不会插入任何元素。

"唯有高屋建瓴，方可水到渠成"