1. 程式人生 > >js 數組的所有操作

js 數組的所有操作

前端 new pop 常用 個數 出現 some string 比較

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 數組的所有操作