Javascript中的內建物件——陣列
阿新 • • 發佈:2021-11-25
什麼是陣列?
陣列:儲存一組或一系列相關資料的視窗,相當於多個變數的組合。
- 當有多個數據進行儲存和處理時使用陣列,如果儲存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'