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 相关文章推荐
jQuery实现鼠标经过显示动画边框特效
Mar 24 jQuery
jQuery为某个div加入行样式
Jun 09 jQuery
简述jQuery Easyui一些用法
Aug 01 jQuery
jQuery EasyUI开发技巧总结
Sep 26 jQuery
jQuery EasyUI 选项卡面板tabs的使用实例讲解
Dec 25 jQuery
jQuery中库的引用方法
Jan 06 jQuery
jQuery实现每日秒杀商品倒计时功能
Sep 06 jQuery
jquery 时间戳转日期过程详解
Oct 12 jQuery
Jquery高级应用Deferred对象原理及使用实例
May 28 jQuery
Jquery $.map使用方法实例详解
Sep 01 jQuery
jQuery实现移动端扭蛋机抽奖
Nov 08 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
MySQL中create table语句的基本语法是
2007/01/15 PHP
PHP使用静态方法的几个注意事项
2014/09/16 PHP
php格式化金额函数分享
2015/02/02 PHP
php curl 模拟登录并获取数据实例详解
2016/12/22 PHP
php获取数据库结果集方法(推荐)
2017/06/01 PHP
php基于SQLite实现的分页功能示例
2017/06/21 PHP
PHP大文件分割分片上传实现代码
2020/12/09 PHP
jQuery javaScript捕获回车事件(示例代码)
2013/11/07 Javascript
Windows系统中安装nodejs图文教程
2015/02/28 NodeJs
js实现同一页面多个运动效果的方法
2015/04/10 Javascript
js+html5实现可在手机上玩的拼图游戏
2015/07/17 Javascript
jQuery实现动态添加和删除一个div
2015/08/12 Javascript
JavaScript SHA1加密算法实现详细代码
2016/10/06 Javascript
jQuery实现大图轮播
2017/02/13 Javascript
vue中的非父子间的通讯问题简单的实例代码
2017/07/19 Javascript
vue做移动端适配最佳解决方案(亲测有效)
2018/09/04 Javascript
webpack4打包vue前端多页面项目
2018/09/17 Javascript
详解关于JSON.parse()和JSON.stringify()的性能小测试
2019/03/14 Javascript
Vue 动态路由的实现及 Springsecurity 按钮级别的权限控制
2019/09/05 Javascript
vue列表数据发生变化指令没有更新问题及解决方法
2020/01/16 Javascript
python2.7实现FTP文件下载功能
2018/04/15 Python
实例详解Matlab 与 Python 的区别
2019/04/26 Python
Python读取实时数据流示例
2019/12/02 Python
pycharm 实现本地写代码,服务器运行的操作
2020/06/08 Python
HTML5 的新的表单元素(datalist/keygen/output)使用介绍
2013/07/19 HTML / CSS
贝嫂喜欢的婴儿品牌,个性化的婴儿礼物:My 1st Years
2017/11/19 全球购物
Kneipp克奈圃美国官网:德国百年精油配方的传承
2018/02/07 全球购物
实习鉴定范文
2013/12/19 职场文书
中学教师培训制度
2014/01/31 职场文书
暑期社会实践心得体会
2014/09/02 职场文书
2014年帮扶工作总结
2014/11/26 职场文书
2015年加油站站长工作总结
2015/05/27 职场文书
军训决心书范文
2015/09/22 职场文书
2016年教师学习廉政准则心得体会
2016/01/20 职场文书
JavaScript异步操作中串行和并行
2021/11/20 Javascript
Java使用JMeter进行高并发测试
2021/11/23 Java/Android