Personal summary of Jquery array operations

  • 2020-03-29 23:45:16
  • OfStack

JQuery array processing, convenient, complete function. Used in more recent projects, very practical, one-off encapsulates many native js array can't match function. In recent time, today, making some time back to see introduction to an array, jQuery Chinese document to summarize the jQuery array, by the way. So warm, as new.
It is strongly recommended that you open the DEMO presentation and then see the following steps: (link: http://mrthink.net/demo/ijq20101125.htm)

1. $. Each (array, [callback]) traverses [commonly]

Explanation: different from the case through the jQuery object $(). The each () method, this method can be used in cases of any object again oh ~ (not just array). The callback function has two parameters: the first for a member of the object or array index, the second for the corresponding variable or content. If you need to exit the each cycle can make the callback function returns false, the other the return value is ignored.
Each traversal is a variant of the for loop in normal event processing, but it is more powerful than the for loop.
 
var _mozi=[' mohism ',' mozi ',' MoZhai ',' Love everyone not attack ',' It is with attaching ']; //The array used in this article is the same as below
$.each(_mozi,function(key,val){ 
//The callback function takes two arguments, the first to the element index and the second to the current value
alert('_mozi In the array  , The index  : '+key+'  The corresponding value is : '+val); 
}); 

As opposed to the native for.. In,each is stronger. In can also iterate over groups and return the corresponding index, but the value needs to be obtained through arrName[key].

2. $. Grep (array, callback, [invert])
Explanation: use the filter function filter array elements. This function is to pass at least two parameters (the third parameter to true or false, to take the filter function return values, personal feel useless) : to filter array and filtering function. The filter function must return true to keep the elements or false to remove elements. In addition, the filter function can also be set to a note string (personal is not recommended for reference).
 
$.grep(_mozi,function(val,key){ 
//The filter function takes two arguments, the first for the current element and the second for the element index
if(val==' mozi '){ 
alert(' An array of values for   mozi   The subscript is : '+key); 
} 
}); 

var _moziGt1=$.grep(_mozi,function(val,key){ 
return key>1; 
}); 
alert('_mozi The index value in the array is greater than 1 Elements for : '+_moziGt1); 

var _moziLt1=$.grep(_mozi,function(val,key){ 
return key>1; 
},true); 
//Here a third reliable parameter is passed, inverting the return value in the filter function
alert('_mozi The index value in the array is less than or equal to 1 Elements for : '+_moziLt1); 

3. $. Map (array,[callback])

Explanation: the transform function as an argument is called for each array element and passes an element representing the converted as an argument to the transform function. The transform function can return the converted value, null(delete items in the array), or an array containing the values, and expand to the original array.
This is a powerful method, but it is not commonly used. It can update the value of an array element based on a specific condition, or extend a new replica element based on its original value.
 
var _mapArrA=$.map(_mozi,function(val){ 
return val+'[ New added ]'; 
}); 
var _mapArrB=$.map(_mozi,function(val){ 
return val==' mozi ' ? '[ Just add mozi ]'+val : val; 
}); 
var _mapArrC=$.map(_mozi,function(val){ 
//Extends a new element for the array element
return [val,(val+'[ extension ]')]; 
}); 
alert(' After each element '[ New added ]' The array after the character is : '+ _mapArrA); 
alert(' Only to elements   mozi   The array after adding the characters is : '+ _mapArrB); 
alert(' Is each element in the original array , Extends an add character '[ New added ]' The elements of the , The returned array is  '+_mapArrC); 

$. InArray (val,array) determines whether the value exists in the array.

Explanation: determine the position of the first parameter in the array and count from 0 (-1 is returned if not found).
Remember the indexOf() method? IndexOf () returns the string for the first time in the position, and $. InArray () returns the position of the incoming parameters in the array, the same, if found, returns a value greater than or equal to zero, if not found then return 1. Now, know how to use it. With it, to determine whether a value is present in the array, becomes easy.
 
var _exist=$.inArray(' mozi ',_mozi); 
var _inexistence=$.inArray(' Who martingale ',_mozi) 
if(_exist>=0){ 
alert(' mozi   Exists in array _mozi In the , Its index value in the array is : '+_exist); 
} 
if(_inexistence<0){ 
alert(' Who martingale   It doesn't exist in an array _mozi In the !, The return value is : '+_inexistence+'!'); 
} 

5.$. Merge (first,second) into two arrays [general]

Explanation: the returned result modifies the contents of the first array -- the elements of the first array are followed by the elements of the second array.
This method replaces the native concat() method with jQuery's, but is not as powerful as concat(), which can merge multiple arrays at once.
 
//Native concat() is probably a little more concise
_moziNew=$.merge(_mozi,[' guiguzi ',' Shang Yang ',' Sun bin ',' PangJuan ',' Shu qin ',' Yi cheung ']) 
alert(' The length of the new array after merging is : '+_moziNew.length+'.  The value of : '+_moziNew); 

6.$.unique(array) filters duplicate elements in an array

Deletes duplicate elements from an array. Only deletes arrays of DOM elements, not strings or arrays of Numbers.
The first time I saw this method, I thought it was a very convenient way to filter repetition, ah, how perfect, but when you look at it, it only works with DOM elements.
 
var _h2Arr=$.makeArray(h2obj); 
//Repeat the array _h2Arr
_h2Arr=$.merge(_h2Arr,_h2Arr); 
var _curLen=_h2Arr.length; 
_h2Arr=$.unique(_h2Arr); 
var _newLen=_h2Arr.length; 
alert(' An array of _h2Arr The original length is zero : '+_curLen+' , The filtered for : '+_newLen 
+' . A total of filtering  '+(_curLen-_newLen)+' Individual repeating elements ') 

7. $. MakeArray (obj) converts class array objects to arrays [not often]

Explanation: converts a class array object to an array object, which has a length property and whose member index is 0 through length-1.
This is a redundant method that is already included in the all-powerful $. The jQuery web site explains it very vaguely. In fact, it converts an array of class objects (such as a collection of element objects retrieved with getElementsByTagName) into an array object.
 
var _makeArr=$.makeArray(h2obj); 
alert('h2 The data type of the collection of element objects is converted to : '+_makeArr.constructor.name);//The output Array

$(dom).toarray () restores all dom elements to an array [not often]

Explanation: restore all the DOM elements in the jQuery collection into an array.
A less common method that individuals might find as redundant as $. MakeArray.
 
var _toArr=$('h2').toArray(); 
alert('h2 The recovered data type of the collection of elements is : '+_toArr.constructor.name); 

Related articles: