javascript數組操作總結

最近看完了《JavaScript高級程序設計》這本書的數組類型的數據結構部分,在這里簡單總結我所學到的知識。

一、數組的創建

數組的創建有兩種方法,一種是通過字面量,另一種是通過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()是從數組末尾開始遍歷。

對于javascript的數組操作總結就到這里了。若有什么錯誤的地方請大家指正,謝謝。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容