视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
Jquery遍历筛选数组的几种方法和遍历解析json对象,Map()方法详解以及数组中查询某值是否存在
2020-11-27 22:01:49 责编:小采
文档

1.jquery grep()筛选遍历数组(可以得到反转的数组)

// 1.jquery grep()筛选遍历数组(可以得到反转的数组)
 var array = [1,5,9,3,12,4,48,98,4,75,2,10,11];
 var filterArray = $.grep(array,(currentValue) => {
 return currentValue > 10;
 });
 console.log(`${filterArray}---${filterArray.length}`);//12,48,98,75,11---5
 var filterReverse = $.grep(array,(currentValue) => {
 return currentValue > 10;
 },true);
 console.log(`${filterReverse}---${filterReverse.length}`);//1,5,9,3,4,4,2,10---8
 
 // for(var i=0;i<filterArray.length;i++){
 // console.log(filterArray[i]);
 // }
 for(key in filterArray){
 console.log(filterArray[key])
 }

2.filter()筛选遍历数组(与grep()不同的是调用者不同,参数不同)

var ages = [32, 33, 16, 40, 45, 98, 12, 35, 8,16];
 var filterAges = ages.filter((currentValue,index,ages) => {
 return currentValue > 20;
 })
 console.log(filterAges);//[32, 33, 40, 45, 98, 35]
 for(key in filterAges){
 console.log(filterAges[key])
 }

3.jquery each()筛选遍历数组(主要用来遍历对象)

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

4.jquery forEach()筛选遍历数组

var forArray = ['mu','zi','muzi','digbig','muzidigbig'];
 forArray.forEach((currentValue,index,forArray) => {
 console.log(`${index}---${currentValue}`)
 })

5.jquery map()筛选遍历数组

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) {
 console.log(values[key]);
 }

6.jquery inArray()筛选遍历数组(用于查找某个值第一次在数组中出现的位置)

var iArray = ['one','two','three','two'];
 var index = $.inArray('two',anArray);
 console.log(`返回该值在数组中的键值:${index}`);//返回该值在数组中的键值,返回 1
 console.log(`返回该键在数组中的值:${iArray[index]}`);//two

7.indexOf()用于查找某个值第一次在数组中出现的位置(存在返回第一次出现的索引值,不存在返回-1)

var iArray = ['one','two','three','two'];
 var indexOf = iArray.indexOf('two');
 console.log(indexOf);//1

8.includes()(判断数组中是否存在某个值返回Boolean类型)

var iArray = ['one','two','three','two'];
 var index = iArray.includes('two');
 console.log(index);//true

二、遍历解析json对象

1.遍历json 1

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]){
 console.log(`${key}:${json[i][key]}`);
 }
}

2、jquery遍历解析json对象 2

有如下 json对象:

var obj ={'name':'冯娟','password':'123456','department':'技术部','sex':'女','old':30};

遍历方法:

var obj ={'name':'冯娟','password':'123456','department':'技术部','sex':'女','old':30};
var str = '';
for(var p in obj){
 str += obj[p]+',';
// return str;
}
console.log(str);//冯娟,123456,技术部,女,30,

三、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,则不会插入任何元素。

若有不足请多多指教!希望给您带来帮助!

总结

下载本文
显示全文
专题