js 數組的所有操作
js的數組操作有很多,這裏記錄了常用的和不常用的數組操作方法。
一、數組的創建
數組的創建有兩種方法,一種是通過字面量,另一種是通過Array構造函數。
1.字面量
var num1 = [1,2,3];
值得註意的是,利用字面量創建數組時,不可在最後一個數組元素添加“,”,因為在老版本的瀏覽器中,會出現bug。如下面的例子,在num2中,會創建一個包含1,2,3,undefined四個項或包含1,2,3三個項的數組。
var num2 = [1,2,3,];//不推薦的寫法
2.Array構造函數
var num3 = new Array();//空數組
Array()可接收包含項作為參數,這時,會創建包含傳入項的數組,如num4。
也可接收一個類型為number的數字作為參數,這時,會創建數組長度為該數字的數組,如num5。
var num4 = new Array("1","2","3");//相當於["1","2","3"] var num5 = new Array(3);//length為3,元素均為undefined的數組
二、數組的轉換
關於數組的轉換,這裏只提數組轉換成字符串的兩種方法。分別是toString()和join()。
1.toString()
該方法會返回數組各個項以逗號隔開的字符串。在使用alert(array)方法打印數組時,會隱性調用toString()方法。
var num6 = [1,2,3];var num6Str = num6.toString();//"1,2,3" alert(num6);//"1,2,3"
2.join()
join()只接收一個參數,該參數為數組中各項拼接的字符串,若不傳參,默認為用“,”作為分隔符,效果相當於toString()方法。
var num7 = [1,2,3]; num7.join("$");//"1$2$3" num7.join();//"1,2,3"
三、棧方法
棧是一種先進先出的數據結構,而數組提供的push()和pop()方法類似棧的行為,所以叫棧方法。
1.push()
push()方法可以接收多個參數,把它們依次添加至數組末尾,並返回修改後數組長度。
var num8 = [1,2,3]; var num8Length = num8.push(4,5); alert(num8);//1,2,3,4,5 alert(num8Length);//5
2.pop()
pop()方法是將數組的最後一項移除,並返回移除項。
var num9 = [1,2,3]; var last = num9.pop();//3
四、隊列方法
1.shift()
shift()方法是將數組的第一項移除,並返回移除項。
var num10 = [1,2,3]; var first = num10.shift();//1
2.unshift()
unshift()方法與shift()方法用途相反,該方法可以接收多個參數,將參數依次加入數組的前端,並返回修改後數組的長度。
var num11 = [1,2,3]; var addArray = num11.unshift("-1","0");//5
五、重排序方法
1.reverse()
reverse()方法是使數組中的項進行反轉,並返回經過排序後的數組。
var num12 = [1,2,3]; num12.reverse();//[3,2,1]
2.sort()
sort()方法是默認為按照ASCII碼進行順序排序。在使用sort()方法時,會先隱性調用toString()方法將數組中的每一項進行字符串轉化,實際上是進行字符串ASCII進行排序,並返回排序後的數組。
對於數組項中均為number類型的數據,我們可以在sort()中傳入一個比較函數,該比較函數接收兩個參數,第一個參數為前一項,第二個參數為後一項。將兩個參數進行對比,若return的值>0,則將兩個對比項進行調換位置,調換位置的項,再與較前的一項進行對比,依次類推,直到return值返回為0或者<0為止。
在比較函數中,return值>0,數組項調換位置;return值<0,數組項不調換位置;return值=0,意味著兩項相等,數組項不調換位置。
var num13 = [3,2,7,14,111,0]; num13.sort(function(value1,value2){ return value1-value2; }); alert(num13);//0,2,3,7,14,111
六、操作方法
1.concat()
concat()方法是將數組與數組進行連結或者將數組項添加至數組末尾。
concat()會創建當前數組的一個副本,然後將接收到的參數依次添加到這個副本的末尾。如果沒有傳入參數,則返回的是當前數組的副本,相當於數組的復制;如果傳入一個或多個數組參數,則會在副本的末尾依次添加數組參數中的每一個項;如果傳入的是一個或多個非數組類型的數據,則這些值會依次被添加至副本的末尾。
註:可利用concat()方法返回一個新數組的特性用於數組的復制。
var num14 = [1,2,3]; var num15 = num14.concat([4,5],[6,7]); alert("參數為多個數組時:"+num15);//1,2,3,4,5,6,7 var num16 = num14.concat(4,5); alert("參數為非數組時:"+num16);//1,2,3,4,5
2.slice()
slice()可以基於當前數組中的一個或多個項創建一個新的數組,並返回新的數組。
slice()可以接收一個或兩個參數,即要返回項的起始位置和結束位置。當只有一個參數時,會返回從該參數指定的位置開始到數組的末尾位置;傳入兩個參數時,會返回從起始位置到結束位置前一項的數組項。
註:可利用slice(0)方法返回一個新數組的特性用於數組的復制。
var num17 = [1,2,3]; num17.slice(1);//[2,3] num17.slice(1,2);//[2]
3.splice()
splice()方法是比較強大的數組操作方法。因為可以利用該方法對數組進行刪除,插入和替換操作。
刪除:splice(index,number),只需要傳入兩個參數,index為刪除的第一項位置,number為刪除的項數。
插入:splice(index,0,value1,value2,...),需要至少傳入三個參數,index為從位置index處插入value1,value2...。
替換:splice(index,number,value1,value2...),需要至少傳入三個參數,index為開始替換的位置,number為替換的項數,value1,value2等是替換的項。
返回值:splice()方法返回的始終是一個數組,若有刪除項,則返回含有所有被刪除項的數組,若沒有刪除項,這返回空數組。
var num18 = [1,2,3]; //刪除操作 num18.splice(0,2);//返回[1,2],此時num18 = [3] //插入操作 num18.splice(1,0,4,5,6);//返回[],此時num18 =[3,4,5,6] //替換操作 num18.splice(2,2,3,3);//返回[5,6],此時num18 = [3,4,3,3]
七、位置方法
位置方法包含了兩種方法,分別為indexOf()和lastIndexOf(),兩個方法都接收兩個參數,第一個參數為查找項,第二個參數(可選)為查找的起始位置,都返回查找項所出現的第一個位置,沒有找到則返回-1。查找項和數組中的每一項進行比較時,使用使用的是全等操作符===,故需要值和數據類型一致。
1.indexOf()
indexOf(value)該方法是從數組的開頭開始查找值為value的項。
indexOf(value,index)該方法是從下標為index的項開始查找值為value的項。
var num19 = [1,2,3]; num19.indexOf(1);//返回0 num19.indexOf(3,1);//返回2
2.lastIndexOf()
lastIndexOf(value)該方法是從數組的末尾開始查找值為value的項。
lastIndexOf(value,index)該方法是從數組末尾開始往前(從0開始)index的項開始向數組開頭查找值為value的項。
var num20 = [1,2,3]; num20.lastIndexOf(1);//返回0 num20.lastIndexOf(1,1);//返回0
八、叠代方法
1.every()
every(function(item,index,array){reutrn...;})對數組的每一項都傳入給定函數,如該函數對每一項都返回true,則返回true,否則為false。(類似且操作符)
var num21 = [1,2,3]; var every = num21.every(function(item,index,array){ return (item>0); });//true var every1 = num21.every(function(item,index,array){ return (item>2) });//false
2.some()
some(function(item,index,array){return...})對數組的每一項都傳入給定函數,如函數對某一項返回true,則返回true,否則為false。(類似或操作符)
var num22 = [1,2,3]; var some= num21.some(function(item,index,array){ return (item>2); });//true var some1= num22.some(function(item,index,array){ return (item>6) });//false
3.forEach()
forEach(function(item,index,array){})對數組的每一項都傳入給定函數,沒有返回值。(類似for循環)
var num23 = [1,2,3]; num23.forEach(function(item,index,array){ console.log(item); });
4.map()
map(function(item,index,array){})對數組的每一項都傳入給定函數,返回值為對數組操作後的數組。
var num24 = [1,2,3]; num24.map(function(item,index,array){ return item+2; });//[3,4,5]
5.filter()
filter(function(item,index,array){})對數組的每一項都傳入給定函數,返回值為給定函數返回為true的項組成的數組。
var num25 = [1,2,3]; num25.filter(function(item,index,array){ return (item>2); });//[3]
九、歸並方法
歸並方法有兩個,分別為reduce()和reduceRight()。該兩個方法接收兩個參數,分別為給定函數和pre初始值(可選)。均叠代數組的每一項傳入給定函數,並構造一個最終返回值。
1.reduce()
reduce(function(pre,cur,index,array){return...})從第一項開始,叠代時,會將給定函數返回的值作為pre參數給到下一次叠代,直到最後。cur指當前項,index為當前項下標,array為調用的數組。
var num26 = [1,2,3];
//只傳給定函數 num26.reduce(function(pre,cur,index,array){ return pre+cur; });//6
//傳入給定函數和pre初始值
num26.reduce(function(pre,cur,index,array){
return pre+cur;
},4);//10
2.reduceRight()
reduceRight()和reduce()方法除了從數組的末尾還是開始開始遍歷不同外,其他都一致。reduceRight()是從數組末尾開始遍歷。
js 數組的所有操作