昨天寫了個帖子,彙總了下常見的JavaScript中的字串操作函式及用法。今天正好有時間,也去把JavaScript中常見的陣列操作函式及用法總結一下,這樣方便大家準備參考。如果恰好你也在準備各種筆試,希望對你有所幫助。同時,也歡迎補充。
1、陣列建立
建立陣列應該是最簡單的了,有用陣列字面量建立和陣列建構函式兩種方法,見下:
1 2 |
var array1 = new Array(); var array2 = []; |
上面是建立陣列的最常見的兩種方法,其中第二種方法因為簡單直觀而被開發者推崇。其中,使用建構函式建立陣列同樣可以接收用於存放於陣列的值,如:
1 |
var array3 = new Array("num1","num2","num3");//["num1", "num2", "num3"] |
同樣,如果你傳給建構函式的值是一個number,則該number如果大於0,則將是這個新建立陣列的長度,如:
1 2 |
var array4 = new Array(5); array4.length;//5 |
同樣的效果下,我們還是推薦使用字面量的形式建立陣列。
2、陣列檢測
有兩種可以檢測陣列的方式,第一種使用instanceof,如下:
1 2 |
var array5 = []; array5 instanceof Array;//true |
同時,Array也自帶了isArray()的方法,如下:
1 2 |
var array6 = []; Array.isArray(array6 );//true |
3、獲取陣列長度
陣列長度可以通過.length獲取,如下:
1 2 |
var array7 = [1,2,3,4]; array7.length;//4 |
同時,陣列的長度你也可以隨時設定,如果設定的長度超過之前的,則後面的內容會自動補充維undefined,否則會擷取有效長度的內容,如下:
1 2 3 4 5 6 7 |
var array8 = [1,2,3,4,5]; console.log(array8.length);//5 array8.length = 8; array8;//[1, 2, 3, 4, 5, undefined × 3] array8.length = 3; array8;//[1,2,3] |
4、獲取或者設定陣列值
我們可以獲取和設定陣列的值,這裡需要記住的是陣列的下標是從0開始的,如下:
1 2 3 4 |
var array9 = [1,2,3,4,5,6]; array9[2];//3 array9[2] = 4; array9[2];//4 |
5、陣列字串轉換
陣列轉換為字串可以呼叫陣列自帶的toString()方法,返回陣列的字串形式,如下:
1 2 |
var array10 = [1,2,3,4]; array10.toString();//"1,2,3,4" |
另外,陣列也有另外一個非常有用的函式join(),它接受一個字串引數,用於插在陣列各項之間形成字串,如下:
1 2 |
var array11 = [1,2,3,4]; array11.join("||");//"1||2||3||4" |
6、陣列新增和刪除項
前面講過,我們可以設定length自動給陣列新增一些undefined的值。同時,我們也可以通過訪問一個超過陣列本來的長度的數字下標以給陣列新增項,如:
1 2 3 4 |
var array12 = [1,2,3,4]; array12[5] = 5; array12[6] = 6; array12;//[1, 2, 3, 4, undefined × 1, 5, 6] |
另外,我們也可以通過push()給陣列新增新的元素,如下:
1 2 3 |
var array13 = [1,2,3,4]; array13.push(5,6); array13;//[1, 2, 3, 4, 5, 6] |
與push()相對的是有一個pop()方法,用以刪除陣列中的項,且從陣列最後一項開始,例如:
1 2 3 4 |
var array14 = [1,2,3,4]; array14.pop();//4 array14.pop();//3; array14;//[1, 2] |
同時,我們可以通過delete刪除陣列某項,但是隻會刪除該值,恢復預設的undefined,如下:
1 2 3 |
var array15 = [1,2,3,4,5]; delete array15[1]; array15;//[1, undefined × 1, 3, 4, 5] |
另外兩個非常有用的方法shift()和unshift(),跟push()和pop()方法類似,其中,shift()方法用以從陣列起始位置開始刪除元素且返回被刪除的元素,如下:
1 2 3 |
var array16 = [1,2,4,5,6]; array16.shift();//1 array16;[2,4,5,6] |
而unshift()與shift()相反,用於向陣列起始位置新增元素,並且陣列的原來元素分別後移,如下:
1 2 3 4 5 |
var array17 = [1,2,3,4]; array17.unshift(2);//返回陣列長度5,下同 array17.unshift(3); array17.unshift(4); array17;//[4, 3, 2, 1, 2, 3, 4] |
7、陣列翻轉和排序
我們可以對一個陣列進行翻轉,也可以讓一個陣列進行排序,如下:
1 2 3 |
var array18 = [21,14,54,35,23,44,103]; array18.reverse();//[103, 44, 23, 35, 54, 14, 21] array18.sort();//[103, 14, 21, 23, 35, 44, 54] |
注意,陣列預設排序並不是大小,而是按照對應字串逐個編碼排序的。你可以通過給sort()傳遞一個比較函式,類改變規則,如下:
1 2 3 |
var array18 = [21,14,54,35,23,44,103]; array18.reverse();//[103, 44, 23, 35, 54, 14, 21] array18.sort(function(a,b){return a - b;});//[14, 21, 23, 35, 44, 54, 103] |
8、陣列連線
我們可以把不同的陣列連線到一起,如下:
1 2 3 |
var array19 = [1,2,3]; var array20 = [4,5]; var array21 = array19.concat(array20);//[1, 2, 3, 4, 5] |
注意原陣列都沒有也不會發生改變。
9、陣列分割
我們同樣可以通過slice()把陣列進行分割,它接受一個引數的話表示分割的起始位置,接受第二個可選的引數是表示結束的位置,如下:
1 2 3 |
var array22 = [1,2,3,4,5,6]; var array23 = array22.slice(4);//5,6 var array24 = array22.slice(2,4);//3,4 |
注意,分割的陣列包含slice()的起始位置而不包含結束位置。
10、最強大的splice()
現在,該講講最強大的splice()函式了,它接受三個引數,可實現新增、刪除、修改等不同的功能。看下w3school上它的語法,如下:
①新增元素
1 2 3 |
var array25 = [1,2,3,4,5,6]; array25.splice(2,0,88,77);//[] 返回被刪除的元素,這裡沒有刪除,返回為空 array25;//[1, 2, 88, 77, 3, 4, 5, 6] |
②修改元素
1 2 3 |
var array26 = [1,2,3,4,5,6,7]; array26.splice(2,2,33,44);//[3,4] array26;//[1, 2, 33, 44, 5, 6, 7] |
③刪除元素
1 2 3 |
var array27 = [1,2,3,4,5,6,7]; array27.splice(2,2);//[3, 4] array27;//[1, 2, 5, 6, 7] |
結束語
匆匆總結了下,不知道有沒有漏下什麼關鍵的函式或者方法,希望大家可以給予補充!