Jquery 數組操作


1、數組的創建

var arrayObj = new Array(); //創建一個數組

var arrayObj = new Array([size]); //創建一個數組並指定長度,注意不是上限,是長度

var arrayObj = new Array([element0[, element1[, ...[, elementN]]]]); 創建一個數組並賦值

    要說明的是,雖然第二種方法創建數組指定了長度,但實際上所有情況下數組都是變長的,也就是說即使指定了長度為5,仍然可以將元素存儲在規定長度以外的,注意:這時長度會隨之改變。

2、數組的元素的訪問

var testGetArrValue=arrayObj[1]; //獲取數組的元素值

arrayObj[1]= "這是新值"; //給數組元素賦予新的值

3、數組元素的添加

arrayObj. push([item1 [item2 [. . . [itemN ]]]]);// 將一個或多個新元素添加到數組結尾,並返回數組新長度

arrayObj.unshift([item1 [item2 [. . . [itemN ]]]]);// 將一個或多個新元素添加到數組開始,數組中的元素自動后移,返回數組新長度

arrayObj.splice(insertPos,0,[item1[, item2[, . . . [,itemN]]]]);//將一個或多個新元素插入到數組的指定位置,插入位置的元素自動后移,返回""。

4、數組元素的刪除

arrayObj.pop(); //移除最后一個元素並返回該元素值

arrayObj.shift(); //移除最前一個元素並返回該元素值,數組中元素自動前移

arrayObj.splice(deletePos,deleteCount); //刪除從指定位置deletePos開始的指定數量deleteCount的元素,數組形式返回所移除的元素

5、數組的截取和合並

arrayObj.slice(start, [end]); //以數組的形式返回數組的一部分,注意不包括 end 對應的元素,如果省略 end 將復制 start 之后的所有元素

arrayObj.concat([item1[, item2[, . . . [,itemN]]]]); //將多個數組(也可以是字符串,或者是數組和字符串的混合)連接為一個數組,返回連接好的新的數組

6、數組的拷貝

arrayObj.slice(0); //返回數組的拷貝數組,注意是一個新的數組,不是指向

arrayObj.concat(); //返回數組的拷貝數組,注意是一個新的數組,不是指向

7、數組元素的排序

arrayObj.reverse(); //反轉元素(最前的排到最后、最后的排到最前),返回數組地址

arrayObj.sort(); //對數組元素排序,返回數組地址

8、數組元素的字符串化

arrayObj.join(separator); //返回字符串,這個字符串將數組的每一個元素值連接在一起,中間用 separator 隔開。

toLocaleString 、toString 、valueOf:可以看作是join的特殊用法,不常用

9.過濾數組

 $.grep(array, callback, [invert]) 過濾數組,此函數至少傳遞兩個參數(第三個參數為true或false,表示是否取反): 待過濾數組和過濾函數. 過濾函數必須返回 true 以保留元素或 false 以刪除元素

   grep(array,callback,invert)

  • array:待過濾數組;
  • callback:處理數組中的每個元素,並過濾元素,該函數中包含兩個參數,第一個是當前數組元素的值,一個是當前數組元素的下標,即元素索引 值,,此函數應返回一個布爾值 如$.grep(arr,function(value,index){return index>1;});。另外,此函數可設置為一個字符串,當設置為字符串時,將視為“lambda-form”(縮寫形式?),其中 a 代表數組元素,i 代表元素索引值。如“a > 0”代表“function(a){ return a > 0; }”
  • invert:布爾型可選項,默認值false,值為true或false。 如果 “invert” 為 false 或為設置,則函數返回數組中由過濾函數返回 true 的元素,當”invert” 為 true,則返回過濾函數中返回 false 的元素集。

  

擴展:

1.使用grep刪除指定值

var arr = [1, 2, 3, 4, 5]; var removeItem = 2; arr = $.grep(arr, function(value) { return value != removeItem; });

 2.數組遍歷

不同於例遍 jQuery 對象的 $().each() 方法,此方法可用於例遍任何對象(不僅僅是數組哦~). 回調函數擁有兩個參數:第一個為對象的成員或數組的索引, 第二個為對應變量或內容. 如果需要退出 each 循環可使回調函數返回 false, 其它返回值將被忽略

var _mozi=['墨家','墨子','墨翟','兼愛非攻','尚同尚賢']; //本文所用到的數組, 下同 $.each(_mozi,function(key,val){ //回調函數有兩個參數,第一個是元素索引,第二個為當前值 alert('_mozi數組中 ,索引 : '+key+' 對應的值為: '+val); }); 

3. $.map(array,[callback])按給定條件轉換數組 [一般]
解釋:作為參數的轉換函數會為每個數組元素調用, 而且會給這個轉換函數傳遞一個表示被轉換的元素作為參數. 轉換函數可以返回轉換后的值、null(刪除數組中的項目)或一個包含值的數組, 並擴展至原始數組中.
這個是個很強大的方法,但並不常用. 它可以根據特定條件,更新數組元素值,或根據原值擴展一個新的副本元素.

復制代碼
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)判斷值是否存在於數組中[常用]

解釋: 確定第一個參數在數組中的位置, 從0開始計數(如果沒有找到則返回 -1 ).
記 得indexOf()方法了嗎? indexOf()返回字符串的首次出現位置,而$.inArray()返回的是傳入參數在數組中的位置,同樣的,如果找到的,返回的是一個大於或等於0 的值,若未找到則返回-1.

復制代碼
var _exist=$.inArray('墨子',_mozi); var _inexistence=$.inArray('衛鞅',_mozi) if(_exist>=0){ alert('墨子 存在於數組_mozi中,其在數組中索引值是: '+_exist); } if(_inexistence<0){ alert('衛鞅 不存在於數組_mozi中!,返回值為: '+_inexistence+'!'); } 
復制代碼
5 .$.merge(first,second)合並兩個數組[一般]

解釋: 返回的結果會修改第一個數組的內容——第一個數組的元素后面跟着第二個數組的元素.
這個方法是用jQuery的方法替代原生concat()方法, 但功能並沒有concat()強大, concat()可以同時合並多個數組.

//原生concat()可能比它還簡潔點 _moziNew=$.merge(_mozi,['鬼谷子','商鞅','孫臏','龐涓','蘇秦','張儀']) alert('合並后新數組長度為: '+_moziNew.length+'. 其值為: '+_moziNew); 

6 .$.unique(array)過濾數組中重復元素[不常用]
解釋: 刪除數組中重復元素. 只處理刪除DOM元素數組,而不能處理字符串或者數字數組.

復制代碼
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);

參考:

http://www.open-open.com/lib/view/open1372393730385.html

http://www.jb51.net/article/57883.htm


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM