Javascript jquery Array Operation summary, javascriptjquery

Source: Internet
Author: User

Javascript jquery Array Operation summary, javascriptjquery

---------------------------------------------------------- Define an array ----------------------------------------------------------
$ (Function () {var aArray = {}; // defines an array aArray ['name'] = "Zhang San"; aArray ['sex'] = "male "; aArray ['mail'] = "123456@qq.com"; // Add values to the array one by one. Var arrayValue = aArray ['name']; // retrieve one of the values alert (arrayValue) ;}or $ (function () {var aArray = {}; // define an array aArray [0] = "Zhang San"; aArray [1] = "male"; aArray [2] = "123456@qq.com "; // Add values to the array one by one. Var arrayValue = aArray [0]; // retrieve one of the values alert (arrayValue );})

---------------------------------------------------- Delete an array element ------------------------------------------------------------------------------

 

1. Delete array elements according to subscript

 

Test =NewArray (); // define removeByIndex method as part of the arrayArray. prototype. removeByIndex =Function(Index ){This. Splice (index, 1) ;}test [0] = 'apple'; test [1] = 'ball'; test [2] = 'cat '; test [3] = 'Dog'; alert ("Array before removing elements:" + test); test. removeByIndex (2); alert ("Array after removing elements:" + test );

2. Delete array elements by value

 

Test =NewArray (); Array. prototype. removeByValue =Function(Val ){For(VarI = 0; I <This. Length; I ++ ){If(This[I] = val ){This. Splice (I, 1 );Break;}}} Test [0] = 'apple'; test [1] = 'ball'; test [2] = 'cat'; test [3] = 'Dog '; alert ("Array before removing elements:" + test); test. removeByValue ('cat'); alert ("Array after removing elements:" + test); Activities );------------------------------------------------------------------------------------------------------------------------------------

Http://falchion.iteye.com/blog/186656

Delete An Array 
Method 1
/*
* Method: Array. remove (dx) reconstructs the Array through traversal.
* Function: delete an array element.
* Parameter: dx deletes the subscript of an element.
*/
Array. prototype. remove = function (dx)
{
If (isNaN (dx) | dx> this. length) {return false ;}
For (var I = 0, n = 0; I <this. length; I ++)
{
If (this [I]! = This [dx])
{
This [n ++] = this [I]
}
}
This. length-= 1
}
A = ['1', '2', '3', '4', '5'];
Alert ("elements:" + a + "\ nLength:" + a. length );
A. remove (1); // Delete the element whose subscript is 1
Alert ("elements:" + a + "\ nLength:" + a. length );



</Script>

Method 2

/*
* Method: Array. baoremove (dx)
* Function: delete an array element.
* Parameter: dx deletes the subscript of an element.
* Return value: Modify the array on the original array.
* Splice method see http://www.w3school.com.cn/js/jsref_slice_array.asp
*/



Array. prototype. baoremove = function (dx)
{
If (isNaN (dx) | dx> this. length) {return false ;}
This. splice (dx, 1 );
}
B = ['1', '2', '3', '4', '5'];
Alert ("elements:" + B + "\ nLength:" + B. length );
B. baoremove (1); // Delete the element whose subscript is 1.
Alert ("elements:" + B + "\ nLength:" + B. length );
</Script>

------------------------------------------------- Three methods of clearing the array -----------------------------------

 

Method 1, splice

 

Js Code
  1. Var ary = [1, 2, 4];
  2. Ary. splice (0, ary. length );
  3. Console. log (ary); // output [], empty array, which is cleared

 

Method 2. The value of length is 0. 

This method is very interesting. For other languages such as Java, the length of the array is read-only and cannot be assigned a value. For example

Java code
  1. Int [] ary = {1, 2, 4 };
  2. Ary. length = 0;

 

An error will be reported in Java.

In JS, yes, and the array is cleared, as shown in figure

Js Code
  1. Var ary = [1, 2, 4];
  2. Ary. length = 0;
  3. Console. log (ary); // output [], empty array, which is cleared

 

Currently, the clear method of the array in Prototype and the empty method of the array in the mootools library use this method to clear the array.

Method 3: assign a value to []

 

Js Code
  1. Var ary = [1, 2, 4];
  2. Ary = []; // assign a value to an empty array to clear the original array.

 

Use this method to clear the Ext. CompositeElementLite class.

 

Method 2 retains other attributes of the array, and method 3 does not.

 

Many people think that method 2 is more efficient, because it only assigns a value to length, and method 3 creates an object again. It is tested that method 3 is highly efficient. Test code:

 

Js Code
  1. Var a = [];
  2. For (var I = 0; I <1000000; I ++ ){
  3. A. push (I );
  4. }
  5. Var start = new Date ();
  6. // A = [];
  7. A. length = 0;
  8. Var end = new Date ();
  9. Alert (end-start );

 

Test results:

  IE6 IE7 IE8 IE9 Firefox Safari Chrome
A. length = 0 94 29 14 1 4 3 1
A = [] 0 0 0 0 0 0 0

 

 

The above results show that method 3 is faster and more efficient.

Http://www.iteye.com/topic/893955

 

----------------------------- Detailed explanation of jQuery Array Processing -------------------

 

Details about Array Processing of jQuery:

JQuery Array Processing is convenient and fully functional. recently, many applications have been used in the project, and many functions that cannot be achieved by native js arrays are encapsulated in one step. the last time is pressing. I took some time today to look back at the introduction to arrays in the jQuery Chinese document. By the way, I would like to summarize jQuery arrays. let us know.

1. $. each (array, [callback]) traversal [common]
Explanation: Unlike the $ (). each () method of the jQuery object, this method can be used to sample any object (not just an array ~). 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 the array, it can easily obtain the array index and the corresponding value. example:

Var _ mozi = ['mojie', 'mozi', 'mozi', 'both love and not attacking ', '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 (in the '_ mozi array, the index:' + key + 'corresponds to the 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 needs to 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 also be set as a string (which is not recommended for personal users and can be checked by themselves );

$. 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 'array value is: '+ key );
}
});

Var _ moziGt1 = $. grep (_ mozi, function (val, key ){
Return key> 1;
});
Alert (the element with an index value 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 with the index value 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.

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 addition] \' character is: '+ _ mapArrA );
Alert ('the array after only adding characters to the element Mozi is '+ _ mapArrB );
Alert ('for each element in the original array, extend an element that adds the character \' [add new] \ ', 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.

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.

// Native concat () may be more concise than it
_ Effecinew = $. merge (_ mozi, ['guimigu ', 'shangyang', 'sunning', 'ponjuan ', 'suqin', 'zhangyi '])
Alert ('length of the new array after merging is '+ _ moziNew. length +'. Value: '+ _ 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. What a perfect method is, but if I take a closer look, I can only process DOM elements. off. therefore, I defined it as an uncommon element. At least, I have never used it since I used jQuery.

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: converts a class array object 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 $ already contains this function. the official jQuery website is very vague. in fact, it is to convert a class array object (for example, the element object set obtained using getElementsByTagName) into an array object.

Var _ makeArr = $. makeArray (h2obj );
Alert ('h2 element object set data type conversion: '+ _ 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.

Var _ toArr = $('h2 '). toArray ();
Alert (the data type after the 'h2 element set is recovered: '+ _ toArr. constructor. name );


Jquery operations on Arrays

Let's see these methods.




How does javascript or jquery compare two arrays and return non-repeated values?

Loop the second array in an array and insert the unfound values into the returned array,
Var arr3 = new ArrayList ();
For (var I = 0; I <arr1; I ++ ){
Var stra = arr1 [I];
Var count = 0;
For (var j = 0; I <arr2; j ++ ){
Var strb = arr2 [j];
If (stra = strb ){
Count ++;
}
}
If (count = 0) {// indicates that the value of array 1 is not repeated and put in the return list.
Arr3.push ('astra ');
}
}

Arr3 is your answer

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.