1.jquery grep() filters and traverses the array (you can get the reversed array)
// 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() filters and traverses the array (different from grep() in that the caller is different and the parameters are different)
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() filter and traverse the array (mainly used to traverse the object)
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() filter and traverse the array
let forArray = ['mu','zi','muzi','digbig','muzidigbig'];
forArray.forEach((currentValue,index,forArray) => {
console.log(`${index}---${currentValue}`)
})
5.jquery map() filter traverses the array
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() filters and traverses the array (used to find the position where a value first appears in the array)
let iArray = ['one','two','three','two'];
let index = $.inArray('two',anArray);
console.log(`返回该值在数组中的键值:${index}`);//返回该值在数组中的键值，返回 1
console.log(`返回该键在数组中的值:${iArray[index]}`);//two
7. indexOf() is used to find the position where a value appears for the first time in the array (returns the index value of the first occurrence if it exists, returns -1 if it does not exist)
let iArray = ['one','two','three','two'];
let indexOf = iArray.indexOf('two');
console.log(indexOf);//1
8. includes() (judging whether there is a value in the array returns Boolean type)
let iArray = ['one','two','three','two'];
let index = iArray.includes('two');
console.log(index);//true
2. Traversing and parsing json objects
1. Traversing 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 traverses and parses json objects 2
has the following json objects:
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,
3. Detailed explanation of Map() method
1. Example
Build a list of all values in the form:
$("p").append( $("input").map(function(){
return $(this).val();
}).get().join(", ") );
2. Definition and usage
map() Pass each element to the current matching collection through the function, and generate a new jQuery object containing the return value.
3. Syntax
. map(callback(index, domElement))
parameter
description
callback(index, domElement) is the function object invoked by each element in the current collection.
Detailed description
Since the return value is an array encapsulated by jQuery, use get() to process the returned object to get the underlying array.
The .map() method is especially useful for getting or setting the value of a set of elements. Consider the following form with a series of check boxes:
<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>
We can get a comma-separated list of checkbox IDs:
$(':checkbox').map(function() {
return this.id;
}).get().join(',');
The result of this call is the string: "two,four,six,eight".
Inside the callback function, this refers to the current DOM element for each iteration. The function can return individual data items, or an array of data items to be inserted into the result set. If an array is returned, the elements in the array will be inserted into the collection. If the function returns null or undefined, no elements will be inserted.
Example:
/*
*二级导航生成
* 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;
}