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


Posted in jQuery onJanuary 18, 2019

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])
  }

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

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])
  }

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

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 相关文章推荐
vue中如何引入jQuery和Bootstrap
Apr 10 jQuery
jQuery使用JSONP实现跨域获取数据的三种方法详解
May 04 jQuery
jQuery模拟爆炸倒计时功能实例代码
Aug 21 jQuery
jQuery实现的粘性滚动导航栏效果实例【附源码下载】
Oct 19 jQuery
springmvc接收jquery提交的数组数据代码分享
Oct 28 jQuery
jquery ajaxfileuplod 上传文件 essyui laoding 效果【防止重复上传文件】
May 26 jQuery
jQuery的Ajax接收java返回数据方法
Aug 11 jQuery
为jquery的ajax请求添加超时timeout时间的操作方法
Sep 04 jQuery
用jQuery将JavaScript对象转换为querystring查询字符串的方法
Nov 12 jQuery
jQuery模拟html下拉多选框的原生实现方法示例
May 30 jQuery
jquery.pager.js实现分页效果
Jul 29 jQuery
jquery实现直播视频弹幕效果
Feb 25 jQuery
jquery的$().each和$.each的区别
Jan 18 #jQuery
jquery层次选择器的介绍
Jan 18 #jQuery
jQuery无冲突模式详解
Jan 17 #jQuery
JQuery判断radio单选框是否选中并获取值的方法
Jan 17 #jQuery
Jquery获取radio选中值实例总结
Jan 17 #jQuery
jquery获取img的src值实例介绍
Jan 16 #jQuery
jQuery实现的点击图片居中放大缩小功能示例
Jan 16 #jQuery
You might like
php discuz 主题表和回帖表的设计
2009/03/13 PHP
PHP HTML代码串 截取实现代码
2009/06/29 PHP
PHP实现的下载远程文件类定义与用法示例
2017/07/05 PHP
Laravel框架中VerifyCsrfToken报错问题的解决
2017/08/30 PHP
详解no input file specified 三种解决方法
2019/11/29 PHP
select 控制网页内容隐藏于显示的实现代码
2010/05/25 Javascript
jquery+ajax每秒向后台发送请求数据然后返回页面的代码
2011/01/17 Javascript
ExtJS自定义主题(theme)样式详解
2013/11/18 Javascript
javascript如何动态加载表格与动态添加表格行
2013/11/27 Javascript
jquery插件qrcode在线生成二维码
2015/04/26 Javascript
第九章之路径分页标签与徽章组件
2016/04/25 Javascript
javascript数组对象常用api函数小结(连接,插入,删除,反转,排序等)
2016/09/20 Javascript
jquery 实现复选框的全选操作实例代码
2017/01/24 Javascript
写给vue新手们的vue渲染页面教程
2017/09/01 Javascript
Bootstrap图片轮播效果详解
2017/10/17 Javascript
vue+mousemove实现鼠标拖动功能(拖动过快失效问题解决方法)
2018/08/24 Javascript
记一次用ts+vuecli4重构项目的实现
2020/05/21 Javascript
[01:13:46]iG vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
栈和队列数据结构的基本概念及其相关的Python实现
2015/08/24 Python
python判断字符串编码的简单实现方法(使用chardet)
2016/07/01 Python
Python正则表达式匹配中文用法示例
2017/01/17 Python
python正则表达式面试题解答
2020/04/28 Python
Python在groupby分组后提取指定位置记录方法
2018/04/20 Python
DataFrame:通过SparkSql将scala类转为DataFrame的方法
2019/01/29 Python
Python 循环终止语句的三种方法小结
2019/06/24 Python
Django  ORM 练习题及答案
2019/07/19 Python
Django在Model保存前记录日志实例
2020/05/14 Python
python中怎么表示空值
2020/06/19 Python
基于Python中Remove函数的用法讨论
2020/12/11 Python
html5本地存储_动力节点Java学院整理
2017/07/12 HTML / CSS
执行力心得体会
2013/12/31 职场文书
端午节活动策划方案
2014/03/09 职场文书
森林病虫害防治方案
2014/06/02 职场文书
关于十八大的演讲稿
2014/09/15 职场文书
就业推荐表自我评价范文
2015/03/02 职场文书
教师自荐信范文
2015/03/06 职场文书