The use of jquery-based arrays

jQuery’s array processing is convenient and fully functional. It encapsulates many functions that native JavaScript array cannot achieve in one step. The following is a detailed explanation of the use of jquery arrays. Friends who need it can refer to

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

Explanation: Different from traversing jQuery objects The $().each() method can be used to iterate over any object. Callback function has two parameters: the first is the member of the object or the index of the array, and the second is the corresponding variable or content. If you need to exit the each loop, you can make the callback function return false, and other return values ​​will be be ignored.

Each traversal is familiar to everyone. In ordinary event processing, it is a variant of the for loop, but it is more powerful than the for loop. In an array, it can easily capture the array index and corresponding value. Example:

The code is as follows:

var _mozi=['墨家','墨子','墨翟','兼爱非攻','尚同尚贤']; //本文所用到的数组, 下同  
$.each(_mozi,function(key,val){  
    //回调函数有两个参数,第一个是元素索引,第二个为当前值  
    alert('_mozi数组中 ,索引 : '+key+' 对应的值为: '+val);  
});

Compared with the 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 array [commonly used]

Explanation: Use the filter function to filter array elements. This function passes at least two parameters (the third Each parameter is true or false, and the return value of the filter function is inverted. I personally think it is not very useful): the array to be filtered and the filter function. The filter function must return true to retain the elements or false to delete the elements. In addition, the filter function can also be Can be set to a text string.

The code is as follows:

$.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 array according to given conditions [General]

Explanation: The conversion function as a parameter will be called for each array element, and the conversion function will be passed an element representing the converted element as a parameter. The conversion function can return the converted value, null (delete the item in the array) or an array containing values, expanded into 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 specific conditions, or expand a new copy element based on the original value.

The code is as follows:

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) determines whether the value exists in the array [commonly used]

Explanation: Determine 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, while $.inArray() returns the position of the incoming parameter in the array. Similarly, if found, What is returned is a value greater than or equal to 0, or -1 if not found. Now, you know how to use it. With it, it becomes easy to determine whether a value exists in the array.

The code is as follows:

var _exist=$.inArray('墨子',_mozi);  
var _inexistence=$.inArray('卫鞅',_mozi)  
if(_exist>=0){  
    alert('墨子 存在于数组_mozi中,其在数组中索引值是: '+_exist);  
}  
if(_inexistence<0){  
    alert(&#39;卫鞅 不存在于数组_mozi中!,返回值为: &#39;+_inexistence+&#39;!&#39;);  
}

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

Explanation: Returned results will modify the contents of the first array - the elements of the first array are followed by the elements of the second array. This method uses jQuery's method to replace the native concat() method, but its function is not as powerful as concat(), which can merge multiple arrays at the same time.

The code is as follows:

//原生concat()可能比它还简洁点  
_moziNew=$.merge(_mozi,['鬼谷子','商鞅','孙膑','庞涓','苏秦','张仪'])  
alert('合并后新数组长度为: '+_moziNew.length+'. 其值为: '+_moziNew);

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

Explanation: Delete duplicate elements in the array. Only deletes are processed An array of DOM elements, but cannot handle string or numeric arrays.

The first time I saw this method, I thought it was a very convenient method that can filter duplicates. How perfect. But if you take a closer look, you can see that it can only handle DOM elements, and its functionality is 20% off. Therefore, I defined it as an element that is not commonly used. At least, I have not used it since I started using jQuery.

The code is as follows:

var _h2Arr=$.makeArray(h2obj);  
//将数组_h2Arr重复一次  
_h2Arr=$.merge(_h2Arr,_h2Arr);  
var _curLen=_h2Arr.length;  
_h2Arr=$.unique(_h2Arr);  
var _newLen=_h2Arr.length;  
alert('数组_h2Arr原长度值为: '+_curLen+' ,过滤后为: '+_newLen  
      +' .共过滤 '+(_curLen-_newLen)+'个重复元素')

7. $.makeArray(obj) Convert array-like objects into arrays [not commonly used]

Explanation: Convert an array-like object into an array object. The array-like object has a length attribute, and its member indexes range from 0 to length-1.
This is a redundant method. The omnipotent $ originally includes this function. The explanation on the jQuery official website is very vague. In fact, it converts an array-like object (such as a collection of element objects obtained with getElementsByTagName) into an array object.
The code is as follows:

var _makeArr=$.makeArray(h2obj);  
alert('h2元素对象集合的数据
类型转换
为: '+_makeArr.constructor.name);//输出Array

8. $(dom).toArray() restores all DOM elements into arrays [not commonly used]

Explanation : Restore all DOM elements in the jQuery collection into an array. It is not a commonly used method. I personally think it is as redundant as $.makeArray.
The code is as follows:

var _toArr=$('h2').toArray();  
alert('h2元素集合恢复后的
数据类型
是: '+_toArr.constructor.name);

The above is the detailed content of The use of jquery-based arrays. For more information, please follow other related articles on the PHP Chinese website!