Web前端技術分享：Javascript中的內建物件陣列講解

有關js中的陣列，很多小夥伴可能都會有疑問，尤其是面試的過程中有大量有關於原生陣列的題，以及陣列中的方法，及方法的返回值、是否會修改原陣列等等。 想要徹底解決這些問題，就要系統的解析陣列的方法，那麼今天小千就來深度解析一下這個問題哈。

什麼是陣列？ 陣列：儲存一組或一系列相關資料的視窗，相當於多個變數的組合。

當有多個資料進行儲存和處理時使用陣列，如果儲存5個、50個資料呢？

陣列是在記憶體中連續開闢的空間，相比變數，對於儲存或讀取資料的效能更高、更快。

陣列下標：能夠標識唯一一個陣列空間的索引號。（相當於房間的門牌號）

下標從0開始，最大下標：陣列的長度- 1

陣列的元素：儲存在陣列中具有唯一索引號中的資料，叫元素。

如何宣告陣列？

字面量方式：[]

建構函式方式：new Array()

var arr = []; //宣告一個空陣列

var list = new Array(); //宣告一個空陣列

兩種宣告方式的區別？

字面量方式，無論儲存什麼資料，都表示陣列元素。

建構函式中有且僅有一個正整數時，表示陣列長度。

建構函式中有一個負整數或小數時，直接報錯

建構函式中有一個或多個其它型別資料時，表示陣列元素。

var arr = [5]; // 表示陣列中有一個元素是5，長度是1

var arr = new Array(5); //表示這個陣列的長度為5，可以存放5個元素。預設元素為undefined,undefined,undefined,undefined,undefined

var arr = new Array(-5); //長度不能為負數，程式報錯

var arr = new Array(5.3); //長度不能為小數，程式報錯

var arr = new Array('3'); //表示陣列中有一個元素是'3',長度是1

var arr = new Array(1,2,3,4,5);//表示陣列中有5個元素，分別是1 2 3 4 5 ,長度是5

如何訪問陣列？

陣列名[下標]

var arr = [1,2,3,4,5]; //宣告一個陣列，存放了5個元素

arr[5] = 6; //為陣列新增了一個元素6，下標為5

console.log(arr[0]); //訪問陣列中0下標對應的元素是1

陣列的屬性

length : 表示陣列的長度（即陣列中有多少個記憶體空間）

var arr = [1,2,3,4];

console.log(arr.length); // 4 表示陣列的長度

陣列的方法（增、刪、改、截、拼、復、排、轉）

增:

unshift(元素，元素，元素，……)

作用：在陣列的首部新增新元素。

返回值：新增後陣列的長度

是否影響原陣列：是

var arr = [5,6,7,8,9]; //宣告一個陣列

console.log(arr.unshift(true,[1,2,3],false)); //unshift方法的返回值，8 表示新增後這個陣列的長度是8

console.log(arr); // 輸出原陣列 [true,[1,2,3],false,5,6,7,8,9]

push(元素，元素，元素，……)

作用：在陣列的尾部新增新元素。

返回值：新增後陣列的長度

是否影響原陣列：是

var arr = [5,6,7,8,9];

console.log(arr.push(true,[1,2,3],false)); //push方法的返回值，8 表示新增後這個陣列的長度是8

console.log(arr); // 輸出原陣列 [5, 6, 7, 8, 9, true, [1,2,3], false]

刪:

shift()

作用：刪除陣列首部的一個元素（ 一次只能刪除一個）

返回值：被刪除的元素

是否影響原陣列：是

var arr = [5,6,7,8,9];

console.log(arr.shift()); //shift方法的返回值，5 表示在陣列中刪除的元素5

console.log(arr); // 輸出原陣列 [6, 7, 8, 9]

//刪除全部元素

var arr = [5,6,0,8,9];

while(arr.length){

arr.shift();

}

console.log(arr);

pop()

作用：刪除陣列尾部的一個元素（ 一次只能刪除一個）

返回值：被刪除的元素

是否影響原陣列：是

var arr = [5,6,7,8,9];

console.log(arr.pop()); //9 pop方法的返回值，9 表示在陣列中刪除的元素9

console.log(arr); // 輸出原陣列 [5, 6, 7, 8]

改:

splice(start,del_length,元素,元素,……)

start : 從哪個下標位置開始

del_length : 刪除幾個元素

元素 ：新增的元素

作用：在陣列的任意位置可以增、刪、改的操作。

返回值：被刪除的元素陣列

是否影響原陣列：是

var arr = [5,6,7,8,9];

//只有一個引數時，表示從指定的下標開始刪除到陣列末尾

console.log(arr.splice(1)); // [6, 7, 8, 9] 返回值

console.log(arr); // [5] 原陣列

var arr1 = [5,6,7,8,9];

//兩個引數時，表示從指定的下標位置開始刪除指定長度的元素

console.log(arr1.splice(1,2)); // [6, 7]

console.log(arr1); // [5, 8, 9]

var arr2 = [5,6,7,8,9];

//在刪除的位置新增元素。從下標1開始刪除2個元素，並在下標1的位置新增true,false兩個元素

console.log(arr2.splice(1,2,true,false)); // [6, 7]

console.log(arr2); // [5, true, false, 8, 9]

var arr3 = [5,6,7,8,9];

//在下標1的位置，刪除0個元素，並在下標1的位置新增兩個元素true,false

console.log(arr3.splice(1,0,true,false)); // []

console.log(arr3); // [5, true, false, 6, 7, 8, 9]

截:

slice(start,end)

start : 從哪個下標位置開始

end : 到哪個下標位置結束（不包含結束位置）

作用：擷取陣列中指定範圍的元素

返回值：被擷取到的元素陣列

是否影響原陣列：否

var arr = [5,6,7,8,9];

// 從原陣列中的下標1位置開始擷取到陣列末尾，並返回擷取到的新陣列

console.log(arr.slice(1)); // [6, 7, 8, 9] 返回值

console.log(arr); // [5,6,7,8,9] 原陣列

var arr1 = [5,6,7,8,9];

//從原陣列中的下標1位置開始擷取到3下標之前（不包含3下標）

console.log(arr1.slice(1,3)); // [6, 7] 返回值

console.log(arr1); // [5,6,7,8,9] 原陣列

var arr2 = [5,6,7,8,9];

//從原陣列中的下標3位置開始擷取到1下標之前（因為只能向右擷取，所有未能擷取到元素）

console.log(arr2.slice(3,1)); // [] 返回值

console.log(arr2); // [5,6,7,8,9] 原陣列

var arr3 = [5,6,7,8,9];

//從原陣列中的下標-3（最後一個元素下標為-1，-3下標對應的元素為7）位置開始擷取到-1下標之前（不包含-1下標）

console.log(arr3.slice(-3,-1)); // [7, 8] 返回值

console.log(arr3); // [5,6,7,8,9] 原陣列

拼:

concat(元素，元素，……)

作用：在指定的陣列後面拼接新的元素（如果新元素是陣列，則去掉最外層的[]將裡面元素拼接）

返回值：拼接後的新陣列

是否影響原陣列：否

var arr = [5,6,7,8,9];

//拼接的元素如果是多維陣列，則取最外層陣列中的元素原樣拼接到指定陣列的後面

console.log(arr.concat(1,[true,[1,2]],3)); // [5, 6, 7, 8, 9, 1, true, [1,2], 3] 返回值

console.log(arr); // [5,6,7,8,9] 原陣列

復:

function copyArray(arr){

return arr.slice(0);

}

function cloneArray(arr){

return arr.concat();

}

排:

reverse()

作用：將陣列中的元素逆序存放

返回值：返回逆序後的陣列

是否影響原陣列：是

var arr = [3,2,10,4,5];

console.log(arr.reverse()); // [5, 4, 10, 2, 3] 返回值

console.log(arr); // [5, 4, 10, 2, 3] 原陣列

sort()

作用：將陣列中的元素按照字元編碼進行從小到大排序

返回值：返回逆序後的陣列

是否影響原陣列：是

var arr = [3,2,10,4,5];

//以字串的方式比較-排序：10 與 2 比較 1 < 2,所以10 < 2

console.log(arr.sort()); // [10, 2, 3, 4, 5] 返回值

console.log(arr); // [10, 2, 3, 4, 5] 原陣列

sort(function(a,b){return a-b;}) : 將陣列中的元素按照數字進行從小到大排序。sort(function(a,b){return b-a;}) : 將陣列中的元素按照數字進行從大到小排序。

var arr = [3,2,10,4,5];

// 按數字 從小到大

console.log(arr.sort(function(a,b){return a-b;})); //[2, 3, 4, 5, 10]

// 按數字 從大到小

console.log(arr.sort(function(a,b){return b-a;})); //[10, 5, 4, 3, 2]

轉:

join('連線符')

作用：將陣列轉為以指定連線符連線成的字串

返回值：返回轉換後的字串

是否影響原陣列：否

var arr = [1,2,3,4];

// 將陣列轉成以空字串連線成的字串

console.log(arr.join('')); //'1234'

本文來自千鋒教育，轉載請註明出處。