JQuery對數組的處理非常便捷並且功能強大齊全,一步到位的封裝了很多原生js數組不能企及的功能。下面來看看JQuery數組的強大之處在哪。
$.each(array, [callback]) 遍歷
不同於例遍 jQuery 對象的 $.each() 方法,此方法可用於例遍任何對象(不僅僅是數組哦~). 回調函數擁有兩個參數:第一個爲對象的成員或數組的索引, 第二個爲對應變量或內容. 如果需要退出 each 循環可使回調函數返回 false, 其它返回值將被忽略.
each遍歷,相信都不陌生,在平常的事件處理中,是for循環的變體,但比for循環強大.在數組中,它可以輕鬆的攻取數組索引及對應的值.例:
使用方法如下:
1 |
var arr
= [ 'javascript' , 'php' , 'java' , 'c++' , 'c#' , 'perl' , 'vb' , 'html' , 'css' , 'objective-c' ]; |
2 |
$.each(arr, function (key,
val) { |
4 |
console.log( 'index
in arr:' +
key + ",
corresponding value:" +
val); |
再來個測試程序:
01 |
var fruit
= [ '蘋果' , '香蕉' , '橙子' , '哈密瓜' , '芒果' ]; |
03 |
var h2obj=document.getElementsByTagName( 'h2' ); |
06 |
$( 'input#js_each' ).click( function (){ |
07 |
$.each(fruit, function (key,val){ |
09 |
alert( 'fruit數組中,索引:' +key+ '對應的值爲:' +val); |
相對於原生的for..in,each更強壯一點. for..in也可以遍歷數組,並返回對應索引,但值是需要通過arrName[key]來獲取;
$.grep(array, callback, [invert])過濾
使用過濾函數過濾數組元素.此函數至少傳遞兩個參數(第三個參數爲true或false,對過濾函數返回值取反,個人覺得用處不大): 待過濾數組和過濾函數. 過濾函數必須返回 true 以保留元素或 false 以刪除元素. 另外,過濾函數還可以是可設置爲一個字條串(個人不推薦,欲瞭解自行查閱);
2 |
temp
= $.grep(arr, function (val,
key) { |
3 |
if (val.indexOf( 'c' )
!= -1) |
再來個測試程序:
02 |
$( 'input#js_grep' ).click( function (){ |
03 |
$.grep(fruit, function (val,key){ |
06 |
alert( '數組值爲
芒果 的下標是: ' +key); |
10 |
var _moziGt1=$.grep(fruit, function (val,key){ |
13 |
alert( 'fruit數組中索引值大於1的元素爲:
' +_moziGt1); |
15 |
var _moziLt1=$.grep(fruit, function (val,key){ |
19 |
alert( 'fruit數組中索引值小於等於1的元素爲:
' +_moziLt1); |
$.map(array,[callback])按給定條件轉換數組
作爲參數的轉換函數會爲每個數組元素調用, 而且會給這個轉換函數傳遞一個表示被轉換的元素作爲參數. 轉換函數可以返回轉換後的值、null(刪除數組中的項目)或一個包含值的數組, 並擴展至原始數組中.這個是個很強大的方法,但並不常用. 它可以根據特定條件,更新數組元素值,或根據原值擴展一個新的副本元素.
02 |
temp
= $.map(arr, function (val,
key) { |
04 |
if (val
=== 'vb' ) return null ; |
09 |
var obj
= {key1: 'val1' ,
key2: 'val2' ,
key3: 'val3' }; |
10 |
temp
= $.map(obj, function (val,
key) { |
再來個測試程序:
02 |
$( 'input#js_map' ).click( function (){ |
03 |
var _mapArrA=$.map(fruit, function (val){ |
06 |
var _mapArrB=$.map(fruit, function (val){ |
07 |
return val== '蘋果' ? '[只給蘋果加]' +val
: val; |
09 |
var _mapArrC=$.map(fruit, function (val){ |
11 |
return [val,(val+ '[擴展]' )]; |
13 |
alert( '在每個元素後面加\'[新加]\'字符後的數組爲:
' +
_mapArrA); |
14 |
alert( '只給元素
蘋果 添加字符後的數組爲: ' +
_mapArrB); |
15 |
alert( '爲原數組中每個元素,擴展一個添加字符\'[新加]\'的元素,返回的數組爲
' +_mapArrC); |
$.inArray(val,array)判斷值是否存在於數組中
確定第一個參數在數組中的位置, 從0開始計數(如果沒有找到則返回 -1 ).記得indexOf()方法了嗎? indexOf()返回字符串的首次出現位置,而$.inArray()返回的是傳入參數在數組中的位置,同樣的,如果找到的,返回的是一個大於或等於0的值,若未找到則返回-1.現在, 知道怎麼用了吧. 有了它, 判斷某個值是否存在於數組中,就變得輕而易舉了.
2 |
console.log($.inArray( 'javascript' ,
arr)); |
測試程序:
02 |
$( 'input#js_inarray' ).click( function (){ |
03 |
var _exist=$.inArray( '芒果' ,fruit); |
04 |
var _inexistence=$.inArray( '榴蓮' ,fruit) |
06 |
alert( '芒果
存在於數組fruit中,其在數組中索引值是: ' +_exist); |
09 |
alert( '榴蓮
不存在於數組fruit中!,返回值爲: ' +_inexistence+ '!' ); |
$.merge(first,second)合併兩個數組
返回的結果會修改第一個數組的內容——第一個數組的元素後面跟着第二個數組的元素. 這個方法是用jQuery的方法替代原生concat()方法, 但功能並沒有concat()強大, concat()可以同時合併多個數組.
1 |
var frontEnd
= [ 'javascript' , 'css' , 'html' ], |
2 |
backEnd
= [ 'java' , 'php' , 'c++' ]; |
4 |
temp
= $.merge(frontEnd, backEnd); |
測試程序
2 |
$( 'input#js_merge' ).click( function (){ |
4 |
fruitNew=$.merge(fruit,[ '水蜜桃' , '火龍果' , '西瓜' , '楊桃' , '荔枝' , '龍眼' ]) |
5 |
alert( '合併後新數組長度爲:
' +fruitNew.length+ '.
其值爲: ' +fruitNew); |
$.unique(array)過濾數組中重複元素
刪除數組中重複元素. 只處理刪除DOM元素數組,而不能處理字符串或者數字數組.第一次看到這個方法,覺得這是個很便捷的方法, 可以過濾重複, 哈, 多完美, 但仔細一看, 僅限處理DOM元素. 功能8折了.所以, 我給它定義成了一個不常用的元素, 至少, 我用jQuery以來沒用到過它.
01 |
<div>blahblahblah....</div> |
03 |
<div
class= "dup" ></div> |
04 |
<div
class= "dup" ></div> |
05 |
<div
class= "dup" ></div> |
10 |
var divs
= $( 'div' ).get(); |
12 |
divs
= divs.concat($( 'div.dup' ).get()); |
13 |
console.log( "before
unique:" +
divs.length); |
14 |
divs
= $.unique(divs); |
15 |
console.log( "after
unique:" +
divs.length); |
測試程序:
02 |
$( 'input#js_unique' ).click( function (){ |
03 |
var _h2Arr=$.makeArray(h2obj); |
05 |
_h2Arr=$.merge(_h2Arr,_h2Arr); |
06 |
var _curLen=_h2Arr.length; |
07 |
_h2Arr=$.unique(_h2Arr); |
08 |
var _newLen=_h2Arr.length; |
09 |
alert( '數組_h2Arr原長度值爲:
' +_curLen+ '
,過濾後爲: ' +_newLen+ '
.共過濾 ' +(_curLen-_newLen)+ '個重複元素' ); |
$.makeArray(obj) 將類數組對象轉換爲數組
將類數組對象轉換爲數組對象, 類數組對象有 length 屬性,其成員索引爲0至 length-1.這是個多餘的方法, 無所不能的$本來就包含了這個功能. jQuery官網上解釋的非常模糊. 其實, 它就是將某個類數組對象(比如用getElementsByTagName獲取的元素對象集合)轉換成數組對象.
首先什麼是類數組對象?jQuery官網上用divs = getElementsByTag('div')來做例子,這個divs有類似數組的一些方法比如length,通過[index]方式獲取元素等,然後通過$.makeArray(divs)使它轉爲數組,就可以用數組的其他功能,比如reverse(), pop()等。
2 |
$( 'input#js_makearray' ).click( function (){ |
3 |
var _makeArr=$.makeArray(h2obj); |
4 |
alert( 'h2元素對象集合的數據類型轉換爲:
' +_makeArr.constructor.name); |
$(dom).toArray()將所有DOM元素恢復成數組
把jQuery集合中所有DOM元素恢復成一個數組;並不常用的方法, 個人甚至覺得它和$.makeArray一樣多餘.
2 |
$( 'input#js_toarray' ).click( function (){ |
3 |
var _toArr=$( 'h2' ).toArray(); |
4 |
alert( 'h2元素集合恢復後的數據類型是:
' +_toArr.constructor.name); |