Jquery遍历筛选数组的几种方法和遍历解析json对象,Map()方法详解以及数组中查询某值是否存在

 更新时间:2019年01月18日 10:21:12   作者:muzidigbig  
今天小编就为大家分享一篇关于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,则不会插入任何元素。

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

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对脚本之家的支持。如果你想了解更多相关内容请查看下面相关链接

相关文章

  • jQuery+css实现的时钟效果(兼容各浏览器)

    jQuery+css实现的时钟效果(兼容各浏览器)

    这篇文章主要介绍了jQuery+css实现的时钟效果,使用js的setTimeout方法实时修改页面元素,实现动态显示时钟的功能.该代码可兼容各浏览器,需要的朋友可以参考下
    2016-01-01
  • jquery操作HTML5 的data-*的用法实例分享

    jquery操作HTML5 的data-*的用法实例分享

    从jQuery 1.4.3起, HTML 5 data- 属性 将自动被引用到jQuery的数据对象中。也就是说虽然 data-* 是在html5 中的元素, 但是如果使用 jquery 1.4.3库以上的.还是可以 在非HTML5的页面或浏览器里, 仍然可以使用.data(obj)方法来操作"data-*" 数据.
    2014-08-08
  • 在JQuery dialog里的服务器控件 事件失效问题

    在JQuery dialog里的服务器控件 事件失效问题

    今天遇到个问题,在dialog中放了服务器端的空间dropdownlist,但是写selectindexchange事件却怎么也触发不了,然后就在网上搜,终于看到有个哥们解决了这个问题,真的谢谢他。
    2010-12-12
  • jQuery判断checkbox选中状态

    jQuery判断checkbox选中状态

    这篇文章主要介绍了jQuery判断checkbox选中状态的相关资料,非常具有参考借鉴价值,感兴趣的朋友一起学习吧
    2016-05-05
  • jquery封装插件时匿名函数形参和实参的写法解释

    jquery封装插件时匿名函数形参和实参的写法解释

    本文主要介绍了jquery封装插件时匿名函数形参和实参的写法解释。具有很好的参考价值,下面跟着小编一起来看下吧
    2017-02-02
  • jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果代码

    jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果代码

    这篇文章主要介绍了jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果代码,涉及jQuery针对页面元素动态操作及响应鼠标事件动态修改页面元素样式的相关技巧,需要的朋友可以参考下
    2016-02-02
  • jQuery插件PageSlide实现左右侧栏导航菜单

    jQuery插件PageSlide实现左右侧栏导航菜单

    jQuery pageSlide 是一个可以让网页出现滚动效果的jQuery插件,它可以控制一个隐藏页面的显示和关闭。具体来说,就是当前页占一个完整页面,隐藏页是看不到的,你设置一个控制的地方,点击该控制时触发事件,隐藏的页面就滑出来,再次点击隐藏页面以外的地方,它就又关闭
    2015-04-04
  • 最原始的jQuery注册验证方式

    最原始的jQuery注册验证方式

    这篇文章主要为大家详细介绍了最原始的jQuery注册验证方式,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-10-10
  • EasyUI实现第二层弹出框的方法

    EasyUI实现第二层弹出框的方法

    本文给大家分享的是一则使用EasyUI实现第二层弹出框的方法,核心代码是网友提供,这里结合自己的项目需求,完善了下,推荐给大家。
    2015-03-03
  • jquery插件之easing使用

    jquery插件之easing使用

    很简单的一个效果插件,但不是经常用,怕忘了,以后在用又要去看文档,所以现在把笔记写下来,方便以后
    2010-08-08

最新评论