jquery 获取数组 jquery获取数组个数

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

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

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

let ages = [32, 33, 16, 40, 45, 98, 12, 35, 8,16];
    let 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()筛选遍历数组(主要用来遍历对象)

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

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

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

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

let strings = ['0','1','2','3','4','S','6'];
    let values = $.map(strings,function(value){
            let 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()筛选遍历数组(用于查找某个值第一次在数组中出现的位置)

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

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

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

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

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

二、遍历解析json对象
1.遍历json 1

let json = [{dd:'SB',AA:'东东',re1:123},{cccc:'dd',lk:'1qw'}];
for(let i=0,l=json.length;i<l;i++){
   for(let key in json[i]){
    console.log(`${key}:${json[i][key]}`);
   }
}

2、jquery遍历解析json对象 2
有如下 json对象：

let obj ={'name':'冯娟','password':'123456','department':'技术部','sex':'女','old':30};
遍历方法：

let obj ={'name':'冯娟','password':'123456','department':'技术部','sex':'女','old':30};
let str = '';
for(let 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，则不会插入任何元素。
 

实例：

/*
*二级导航生成
* pragram taskCategory任务类别集合
*set()去重  ...数组转换
*/
function creatTask(){
  let arr = [];
  $(".content:visible").find(".task-category").each(function(){
    arr.push($(this).text());
  })
  let taskCategory = [...new Set(arr)];
  let taskCategory_str = '';
  for(i=0;i<taskCategory.length;i++){
    
    taskCategory_str = taskCategory_str+'<li onclick="navClick(this)"><p>'+taskCategory[i]+'</p><span>'+countNum(arr,taskCategory[i])+'</span></li>';
  }
  $(".left-navigation ol").append(taskCategory_str);
}

/*
*查询数组内指定元素个数
*/
	function countNum(arr,res) {
		let newArrays = arr.filter(function(item){
			return item == res;
		});
		return newArrays.length;
	}