Jquery陣列操作技巧

jquery對陣列的操作技巧。

1. $.each(array, [callback]) 遍歷[常用]

解釋: 不同於例遍 jquery 物件的 $.each() 方法,此方法可用於例遍任何物件(不僅僅是陣列哦~). **函式擁有兩個引數：第乙個為物件的成員或陣列的索引, 第二個為對應變數或內容. 如果需要退出 each 迴圈可使**函式返回 false, 其它返回值將被忽略.

each遍歷,相信都不陌生,在平常的事件處理中,是for迴圈的變體,但比for迴圈強大.在陣列中,它可以輕鬆的攻取陣列索引及對應的值.例:

var _mozi=['墨家','墨子','墨翟','兼愛非攻','尚同尚賢']; //本文所用到的陣列, 下同

$.each(_mozi,function(key,val));

相對於原生的for..in,each更強壯一點. for..in也可以遍歷陣列,並返回對應索引,但值是需要通過arrname[key]來獲取;

2. $.grep(array, callback, [invert]) 過濾陣列[常用]

解釋: 使用過濾函式過濾陣列元素.此函式至少傳遞兩個引數(第三個引數為true或false,對過濾函式返回值取反,個人覺得用處不大): 待過濾陣列和過濾函式. 過濾函式必須返回 true 以保留元素或 false 以刪除元素. 另外,過濾函式還可以是可設定為乙個字條串(個人不推薦,欲瞭解自行查閱);

$.grep(_mozi,function(val,key)

});var _mozigt1=$.grep(_mozi,function(val,key));

alert('_mozi陣列中索引值大於1的元素為: '+_mozigt1);

var _mozilt1=$.grep(_mozi,function(val,key),true);

//此處傳入了第三個可靠引數,對過濾函式中的返回值取反

alert('_mozi陣列中索引值小於等於1的元素為: '+_mozilt1);

3. $.map(array,[callback])按給定條件轉換陣列 [一般]

解釋:作為引數的轉換函式會為每個陣列元素呼叫, 而且會給這個轉換函式傳遞乙個表示被轉換的元素作為引數. 轉換函式可以返回轉換後的值、null(刪除陣列中的專案)或乙個包含值的陣列, 並擴充套件至原始陣列中.

這個是個很強大的方法,但並不常用. 它可以根據特定條件,更新陣列元素值,或根據原值擴充套件乙個新的副本元素.

var _maparra=$.map(_mozi,function(val));

var _maparrb=$.map(_mozi,function(val)); （指令碼學堂 www.jbxue.com）

var _maparrc=$.map(_mozi,function(val));

alert('在每個元素後面加\'[新加]\'字元後的陣列為: '+ _maparra);

alert('只給元素墨子新增字元後的陣列為: '+ _maparrb);

alert('為原陣列中每個元素,擴充套件乙個新增字元\'[新加]\'的元素,返回的陣列為 '+_maparrc);

4 .$.inarray(val,array)判斷值是否存在於陣列中[常用]

解釋: 確定第乙個引數在陣列中的位置, 從0開始計數(如果沒有找到則返回 -1 ).

記得indexof()方法了嗎? indexof()返回字串的首次出現位置,而$.inarray()返回的是傳入引數在陣列中的位置,同樣的,如果找到的,返回的是乙個大於或等於0的值,若未找到則返回-1.現在, 知道怎麼用了吧. 有了它, 判斷某個值是否存在於陣列中,就變得輕而易舉了.

var _exist=$.inarray('墨子',_mozi);

var _inexistence=$.inarray('衛鞅',_mozi)

if(_exist>=0)

if(_inexistence<0)

5 .$.merge(first,second)合併兩個陣列[一般]

解釋: 返回的結果會修改第乙個陣列的內容——第乙個陣列的元素後面跟著第二個陣列的元素.

這個方法是用jquery的方法替代原生concat()方法, 但功能並沒有concat()強大, concat()可以同時合併多個陣列.

//原生concat()可能比它還簡潔點

_mozinew=$.merge(_mozi,['鬼谷子','商鞅','孫臏','龐涓','蘇秦','張儀'])

alert('合併後新陣列長度為: '+_mozinew.length+'. 其值為: '+_mozinew);

6 .$.unique(array)過濾陣列中重複元素[不常用]

解釋: 刪除陣列中重複元素. 只處理刪除dom元素陣列,而不能處理字串或者數字陣列.

第一次看到這個方法,覺得這是個很便捷的方法, 可以過濾重複, 哈, 多完美, 但仔細一看, 僅限處理dom元素. 功能8折了.所以, 我給它定義成了乙個不常用的元素, 至少, 我用jquery以來沒用到過它.

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) 將類陣列物件轉換為陣列[不常用]

解釋: 將類陣列物件轉換為陣列物件, 類陣列物件有 length 屬性,其成員索引為0至 length-1.

這是個多餘的方法, 無所不能的$本來就包含了這個功能. jquery官網上解釋的非常模糊. 其實, 它就是將某個類陣列物件(比如用getelementsbytagname獲取的元素物件集合)轉換成陣列物件.

var _makearr=$.makearray(h2obj);

alert('h2元素物件集合的資料型別轉換為: '+_makearr.constructor.name);//輸出array

8. $(dom).toarray()將所有dom元素恢復成陣列[不常用]

解釋: 把jquery集合中所有dom元素恢復成乙個陣列;

並不常用的方法, 個人甚至覺得它和$.makearray一樣多餘.

var _toarr=$('h2').toarray();

alert('h2元素集合恢復後的資料型別是: '+_toarr.constructor.name);

Jquery陣列操作技巧

Jquery 陣列操作

Jquery 陣列操作

jquery 工具陣列物件操作

Jquery陣列操作技巧

Jquery 陣列操作

Jquery 陣列操作

jquery 工具 陣列物件操作

相關推薦

jquery 工具陣列物件操作