Jquery遍历筛选数组的几种方法和遍历解析json对象,Map()方法详解以及数组中查询某值是否存在
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，则不会插入任何元素。
若有不足请多多指教！希望给您带来帮助！
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对的支持。如果你想了解更多相关内容请查看下面相关链接