JQuery Array Processing full solution, jQuery Array Processing

JQuery Array Processing full solution, jQuery Array Processing

JQuery's Array Processing is convenient and fully functional. Recently, many projects have been used and are very practical. Many functions that cannot be achieved by native JavaScript arrays are encapsulated in one step. The last time is pressing. Today, I took some time to look back at the introduction to arrays in the jQuery Chinese document. By the way, I would like to summarize jQuery arrays and learn more from them.

It is strongly recommended that you open the DEMO and then look at the details below: http://mrthink.net/demo/ijq20101125.htm

1. $. each (array, [callback]) traversal [common]

Explanation: Unlike the $ (). each () method of the jQuery object, this method can be used to sample any object. The callback function has two parameters: the first is the object's member or array index, and the second is the corresponding variable or content. if you want to exit the each loop, the callback function returns false. Other return values are ignored.

Each traversal is a variant of the for Loop in normal event processing, but it is more powerful than the for loop. In an array, it can easily obtain array indexes and corresponding values. Example:

 

12345

var _mozi=['Mojia','Mozi','Mo Yun','Both love and attack','Shang Tong Shang Xian']; // The array used in this article, the same below$.each(_mozi,function(key,val){      // The callback function has two parameters: the first is the element index and the second is the current value.    alert('_ Mozi array, index :'+key+'Corresponding value :'+val);  });

Compared with native for. in, each is stronger. For... in can also traverse the array and return the corresponding index, but the value must be obtained through arrName [key.

 

2. $. grep (array, callback, [invert]) Filter Arrays [common]

Explanation: Filter Array elements using the filter function. this function must pass at least two parameters (the third parameter is true or false, and the return value of the filter function is reversed, which is of little use): the array to be filtered and the filter function. the filter function must return true to retain the element or false to delete the element. in addition, the filter function can be set as a string.

 

1234567891011121314151617

$.grep(_mozi,function(val,key){      // The filter function has two parameters: the first is the current element and the second is the element index.    if(val=='Mozi'){          alert('The subscript of the array value to the Mozi is :'+key);      }  });      var _moziGt1=$.grep(_mozi,function(val,key){      return key>1;  });  alert('The element whose index value is greater than 1 in the _ mozi array is :'+_moziGt1);      var _moziLt1=$.grep(_mozi,function(val,key){      return key>1;  },true);  // The third reliable parameter is input here, which is used to reverse the return value in the filter function.alert('The element whose index value is less than or equal to 1 in the _ mozi array is :'+_moziLt1);

3. $. map (array, [callback]) converts arrays by given conditions [general]

 

Explanation: the conversion function as a parameter is called for each array element, and a converted element is passed to the conversion function as a parameter. the conversion function can return the converted value, null (delete items in the array), or an array containing values, and extend it to the original array.

This is a very powerful method, but it is not often used. It can update array element values based on specific conditions, or expand a new copy element based on the original value.

 

12345678910111213

var _mapArrA=$.map(_mozi,function(val){      return val+'[New addition]';  });  var _mapArrB=$.map(_mozi,function(val){      return val=='Mozi' ? '[Add only to Mozi]'+val : val;  });  var _mapArrC=$.map(_mozi,function(val){      // Expand a new element for the array element    return [val,(val+'[Extension]')];  });  alert('The array after each element is appended with the \ '[new] \' character is :'+ _mapArrA);  alert('The array after only adding characters to the element ink child is :'+ _mapArrB);  alert('For each element in the original array, expand an element that adds the character \' [new addition] \ ', and the returned array is'+_mapArrC);

4. $. inArray (val, array) Determine whether the value exists in the array [common]

 

Explanation: determine the position of the first parameter in the array and start counting from 0 (if not found, return-1 ).

Do you remember the indexOf () method? IndexOf () returns the first occurrence position of the string, while $. inArray () returns the position of the input parameter in the array. Similarly, if found, a value greater than or equal to 0 is returned. If not found,-1 is returned. now, you know how to use it. with it, it becomes easy to determine whether a value exists in an array.

 

12345678

var _exist=$.inArray('Mozi',_mozi);  var _inexistence=$.inArray('Wei yang',_mozi)  if(_exist>=0){      alert('Mozi exists in array _ mozi, and its index value in the array is :'+_exist);  }  if(_inexistence<0){      alert('Wei Yang does not exist in array _ mozi !, Returned value :'+_inexistence+'!');  }

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

 

Explanation: The returned result modifies the content 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 the jQuery method, but the function is not concat () Powerful, concat () can merge multiple arrays at the same time.

 

123	// Native concat () may be more concise than it_moziNew=$.merge(_mozi,['Guimigu','Shang yang','Sunning','Ponjuan','Su qin','Zhang yi'])  alert('The length of the new array after merging is :'+_moziNew.length+'. Its value is :'+_moziNew);

6. $. unique (array) filters repeated elements in the array [not commonly used]

 

Explanation: delete repeated elements in an array. Only the DOM element array can be deleted, but the string or number array cannot be processed.

The first time I saw this method, I thought it was a very convenient method. It can be used to filter duplicates. But take a closer look, only the DOM elements can be processed, and the function is off. Therefore, I defined it as an uncommon element. At least, I have never used it since I used jQuery.

 

12345678

var _h2Arr=$.makeArray(h2obj);  // Repeat array _ h2Arr once_h2Arr=$.merge(_h2Arr,_h2Arr);  var _curLen=_h2Arr.length;  _h2Arr=$.unique(_h2Arr);  var _newLen=_h2Arr.length;  alert('Array _ h2Arr original length value :'+_curLen+', After filtering :'+_newLen        +'. Filter all'+(_curLen-_newLen)+'Repeated elements')

7. $. makeArray (obj) converts class array objects to arrays [not commonly used]

 

Explanation: The class array object is converted to an array object. The class array object has the length attribute, and its member index is 0 to length-1.

This is a redundant method. The omnipotent $ originally contains this function. The official jQuery website is very vague. In fact, it is to convert an array object of a class (for example, a collection of element objects obtained using getElementsByTagName) to an array object.

 

12	var _makeArr=$.makeArray(h2obj);  alert('Data type of the h2 element object set is converted :'+_makeArr.constructor.name);// Output Array

8. $ (dom). toArray () Restore all DOM elements to an array [not commonly used]

 

Explanation: restores all DOM elements in the jQuery set to an array. This method is not commonly used. I even think it is as redundant as $. makeArray.

 

12	var _toArr=$('h2').toArray();  alert('Type of the recovered h2 element set is :'+_toArr.constructor.name);