jquery array processing, convenient, full-featured. Most recent projects have been used in a much more practical, one step package of features that many native JavaScript arrays cannot. The recent time is tight, today took some time to look back to the jquery Chinese document in the introduction of an array, by the way, the jquery arrays to make a summary, warm and know new.
It is strongly recommended that you open the demo demo and then read the following: http://mrthink.net/demo/ijq20101125.htm
1. $.each (array, [callback]) traversal [common]
Explanation: Different from 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 index of the object's member or array, and the second is the corresponding variable or content. If you need to exit each loop so that the callback function returns false, the other return values are ignored.
Each traversal, I believe, is not strange, in the ordinary event processing, is a variant of the For loop, but more powerful than for loop. In the array, it can easily take the array index and the corresponding value. Cases:
12345 |
var
_mozi=[
‘墨家‘
,
‘墨子‘
,
‘墨翟‘
,
‘兼爱非攻‘
,
‘尚同尚贤‘
];
//本文所用到的数组, 下同
$.each(_mozi,
function
(key,val){
//回调函数有两个参数,第一个是元素索引,第二个为当前值
alert(
‘_mozi数组中 ,索引 : ‘
+key+
‘ 对应的值为: ‘
+val);
});
|
For: relative to the native. In,each a little stronger. For: In can also iterate through the array and return the corresponding index, but the value needs to be obtained through Arrname[key].
2. $.grep (Array, callback, [invert]) filter array [Common]
Explanation: Use the filter function to filter the array elements. This function passes at least two arguments (the third argument is true or FALSE, the return value of the filter function is reversed and the individual is not very useful): array to filter and filter function. The filter function must return true to preserve the element or false to delete the element. In addition, the filter function can also be set to a note string.
1234567891011121314151617 |
$.grep(_mozi,
function
(val,key){
//过滤函数有两个参数,第一个为当前元素,第二个为元素索引
if
(val==
‘墨子‘
){
alert(
‘数组值为 墨子 的下标是: ‘
+key);
}
});
var
_moziGt1=$.grep(_mozi,
function
(val,key){
return key>1;
});
alert(
‘_mozi数组中索引值大于1的元素为: ‘
+_moziGt1);
var
_moziLt1=$.grep(_mozi,
function
(val,key){
return
key>1;
},
true
);
//此处传入了第三个可靠参数,对过滤函数中的返回值取反
alert(
‘_mozi数组中索引值小于等于1的元素为: ‘
+_moziLt1);
|
3. $.map (Array,[callback]) convert an array by a given condition [general]
Explanation: The conversion function as a parameter is called for each array element, and the conversion function is passed an element that represents the transformation as an argument. The conversion function can return a converted value, null (delete an item in an array), or an array containing a value, and extend to the original array.
This is a very 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 copy element based on the original value.
12345678910111213 |
var
_mapArrA=$.map(_mozi,
function
(val){
return
val+
‘[新加]‘
;
});
var
_mapArrB=$.map(_mozi,
function
(val){
return
val==
‘墨子‘
?
‘[只给墨子加]‘
+val : val;
});
var _mapArrC=$.map(_mozi,
function
(val){
//为数组元素扩展一个新元素
return
[val,(val+
‘[扩展]‘
)];
});
alert(
‘在每个元素后面加\‘[新加]\‘字符后的数组为: ‘
+ _mapArrA);
alert(
‘只给元素 墨子 添加字符后的数组为: ‘
+ _mapArrB);
alert(
‘为原数组中每个元素,扩展一个添加字符\‘[新加]\‘的元素,返回的数组为 ‘
+_mapArrC);
|
4. $.inarray (Val,array) determine if the value exists in the array [common]
Explanation: Determines the position of the first parameter in the array, counting from 0 (returns-1 if not found).
Remember the indexof () method? IndexOf () returns the first occurrence of the string, and $.inarray () returns the position of the passed-in parameter in the array, similarly, if found, returns a value greater than or equal to 0, or 1 if not found. Now, know how to use it. With it, it becomes easy to determine whether a value exists in the array.
12345678 |
var
_exist=$.inArray(
‘墨子‘
,_mozi);
var _inexistence=$.inArray(
‘卫鞅‘
,_mozi)
if
(_exist>=0){
alert(
‘墨子 存在于数组_mozi中,其在数组中索引值是: ‘
+_exist);
}
if
(_inexistence<0){
alert(
‘卫鞅 不存在于数组_mozi中!,返回值为: ‘
+_inexistence+
‘!‘
);
}
|
5. $.merge (first,second) Merge two arrays [general]
Explanation: The returned result modifies the contents of the first array-the elements of the first array followed by the elements of the second array. This method replaces the native Concat () method with jquery, but the function is not concat () powerful, and concat () can combine multiple arrays at the same time.
123 |
//原生concat()可能比它还简洁点 _moziNew=$.merge(_mozi,[ ‘鬼谷子‘ , ‘商鞅‘ , ‘孙膑‘ , ‘庞涓‘ , ‘苏秦‘ , ‘张仪‘ ]) alert( ‘合并后新数组长度为: ‘ +_moziNew.length+ ‘. 其值为: ‘ +_moziNew); |
6. $.unique (array) filter repeating elements in an array [infrequently used]
Explanation: Deletes the repeating element in the array. Handles only the deletion of an array of DOM elements, not a string or a numeric array.
The first time you see this method, I think it is a very convenient way to filter the repetition, how perfect. But a closer look, only the DOM element, function 80 percent. So, I've defined it as a less common element, at least I haven't used it since jquery.
12345678 |
var _h2arr=$.makearray (h2obj); //to repeat the array _h2arr once _h2arr=$.merge (_ H2arr,_h2arr); var _curlen=_ h2arr.length; _h2arr=$.unique (_h2arr); var _newlen=_h2arr.length; alert ( +_curlen+ Code class= "JS string", Filtered to: ' +_newlen + + (_curlen-_newlen) + ' repeating element ' ) |
7. $.makearray (obj) converts class array objects to arrays [infrequently used]
Explanation: The class array object is converted to an array object with the Length property and its member index is 0 to length-1.
This is a redundant method, the omnipotent $ would have included this feature. The jquery official's online interpretation is very vague, in fact, it is to convert a class array object (such as a collection of element objects obtained by getElementsByTagName) into a group of objects.
12 |
var _makeArr=$.makeArray(h2obj); alert( ‘h2元素对象集合的数据类型转换为: ‘ +_makeArr.constructor.name); //输出Array |
8. $ (DOM). ToArray () Restores all DOM elements to an array [infrequently used]
Explanation: Restores all DOM elements in the jquery collection to an array. It is not commonly used, and individuals even feel it is as superfluous as $.makearray.
12 |
var _toArr=$( ‘h2‘ ).toArray(); alert( ‘h2元素集合恢复后的数据类型是: ‘ +_toArr.constructor.name); |
Full solution of jquery array processing