Web前端技术分享：Javascript中的内置对象数组讲解
有關(guān)js中的數(shù)組，很多小伙伴可能都會(huì)有疑問(wèn)，尤其是面試的過(guò)程中有大量有關(guān)于原生數(shù)組的題，以及數(shù)組中的方法，及方法的返回值、是否會(huì)修改原數(shù)組等等。想要徹底解決這些問(wèn)題，就要系統(tǒng)的解析數(shù)組的方法，那么今天小千就來(lái)深度解析一下這個(gè)問(wèn)題哈。
什么是數(shù)組？數(shù)組：存儲(chǔ)一組或一系列相關(guān)數(shù)據(jù)的窗口，相當(dāng)于多個(gè)變量的組合。
當(dāng)有多個(gè)數(shù)據(jù)進(jìn)行存儲(chǔ)和處理時(shí)使用數(shù)組，如果存儲(chǔ)5個(gè)、50個(gè)數(shù)據(jù)呢？
數(shù)組是在內(nèi)存中連續(xù)開(kāi)辟的空間，相比變量，對(duì)于存儲(chǔ)或讀取數(shù)據(jù)的性能更高、更快。
數(shù)組下標(biāo)：能夠標(biāo)識(shí)唯一一個(gè)數(shù)組空間的索引號(hào)。（相當(dāng)于房間的門(mén)牌號(hào)）
下標(biāo)從0開(kāi)始，最大下標(biāo)：數(shù)組的長(zhǎng)度- 1
數(shù)組的元素：存儲(chǔ)在數(shù)組中具有唯一索引號(hào)中的數(shù)據(jù)，叫元素。
如何聲明數(shù)組？
字面量方式：[]
構(gòu)造函數(shù)方式：new Array()
var arr = []; //聲明一個(gè)空數(shù)組
var list = new Array(); //聲明一個(gè)空數(shù)組
兩種聲明方式的區(qū)別？
字面量方式，無(wú)論存儲(chǔ)什么數(shù)據(jù)，都表示數(shù)組元素。
構(gòu)造函數(shù)中有且僅有一個(gè)正整數(shù)時(shí)，表示數(shù)組長(zhǎng)度。
構(gòu)造函數(shù)中有一個(gè)負(fù)整數(shù)或小數(shù)時(shí)，直接報(bào)錯(cuò)
構(gòu)造函數(shù)中有一個(gè)或多個(gè)其它類(lèi)型數(shù)據(jù)時(shí)，表示數(shù)組元素。
var arr = [5]; // 表示數(shù)組中有一個(gè)元素是5，長(zhǎng)度是1
var arr = new Array(5); //表示這個(gè)數(shù)組的長(zhǎng)度為5，可以存放5個(gè)元素。默認(rèn)元素為undefined,undefined,undefined,undefined,undefined
var arr = new Array(-5); //長(zhǎng)度不能為負(fù)數(shù)，程序報(bào)錯(cuò)
var arr = new Array(5.3); //長(zhǎng)度不能為小數(shù)，程序報(bào)錯(cuò)
var arr = new Array(‘3’); //表示數(shù)組中有一個(gè)元素是’3’,長(zhǎng)度是1
var arr = new Array(1,2,3,4,5);//表示數(shù)組中有5個(gè)元素，分別是1 2 3 4 5 ,長(zhǎng)度是5
如何訪(fǎng)問(wèn)數(shù)組？
數(shù)組名[下標(biāo)]
var arr = [1,2,3,4,5]; //聲明一個(gè)數(shù)組，存放了5個(gè)元素
arr[5] = 6; //為數(shù)組新增了一個(gè)元素6，下標(biāo)為5
console.log(arr[0]); //訪(fǎng)問(wèn)數(shù)組中0下標(biāo)對(duì)應(yīng)的元素是1
數(shù)組的屬性
length : 表示數(shù)組的長(zhǎng)度（即數(shù)組中有多少個(gè)內(nèi)存空間）
var arr = [1,2,3,4];
console.log(arr.length); // 4 表示數(shù)組的長(zhǎng)度
數(shù)組的方法（增、刪、改、截、拼、復(fù)、排、轉(zhuǎn)）
增:
unshift(元素，元素，元素，……)
作用：在數(shù)組的首部添加新元素。
返回值：新增后數(shù)組的長(zhǎng)度
是否影響原數(shù)組：是
var arr = [5,6,7,8,9]; //聲明一個(gè)數(shù)組
console.log(arr.unshift(true,[1,2,3],false)); //unshift方法的返回值，8 表示新增后這個(gè)數(shù)組的長(zhǎng)度是8
console.log(arr); // 輸出原數(shù)組 [true,[1,2,3],false,5,6,7,8,9]
push(元素，元素，元素，……)
作用：在數(shù)組的尾部添加新元素。
返回值：新增后數(shù)組的長(zhǎng)度
是否影響原數(shù)組：是
var arr = [5,6,7,8,9];
console.log(arr.push(true,[1,2,3],false)); //push方法的返回值，8 表示新增后這個(gè)數(shù)組的長(zhǎng)度是8
console.log(arr); // 輸出原數(shù)組 [5, 6, 7, 8, 9, true, [1,2,3], false]
刪:
shift()
作用：刪除數(shù)組首部的一個(gè)元素（ 一次只能刪除一個(gè)）
返回值：被刪除的元素
是否影響原數(shù)組：是
var arr = [5,6,7,8,9];
console.log(arr.shift()); //shift方法的返回值，5 表示在數(shù)組中刪除的元素5
console.log(arr); // 輸出原數(shù)組 [6, 7, 8, 9]
//刪除全部元素
var arr = [5,6,0,8,9];
while(arr.length){
arr.shift();
}
console.log(arr);
pop()
作用：刪除數(shù)組尾部的一個(gè)元素（ 一次只能刪除一個(gè)）
返回值：被刪除的元素
是否影響原數(shù)組：是
var arr = [5,6,7,8,9];
console.log(arr.pop()); //9 pop方法的返回值，9 表示在數(shù)組中刪除的元素9
console.log(arr); // 輸出原數(shù)組 [5, 6, 7, 8]
改:
splice(start,del_length,元素,元素,……)
start : 從哪個(gè)下標(biāo)位置開(kāi)始
del_length : 刪除幾個(gè)元素
元素 ：新增的元素
作用：在數(shù)組的任意位置可以增、刪、改的操作。
返回值：被刪除的元素?cái)?shù)組
是否影響原數(shù)組：是
var arr = [5,6,7,8,9];
//只有一個(gè)參數(shù)時(shí)，表示從指定的下標(biāo)開(kāi)始刪除到數(shù)組末尾
console.log(arr.splice(1)); // [6, 7, 8, 9] 返回值
console.log(arr); // [5] 原數(shù)組
var arr1 = [5,6,7,8,9];
//兩個(gè)參數(shù)時(shí)，表示從指定的下標(biāo)位置開(kāi)始刪除指定長(zhǎng)度的元素
console.log(arr1.splice(1,2)); // [6, 7]
console.log(arr1); // [5, 8, 9]
var arr2 = [5,6,7,8,9];
//在刪除的位置新增元素。從下標(biāo)1開(kāi)始刪除2個(gè)元素，并在下標(biāo)1的位置新增true,false兩個(gè)元素
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];
//在下標(biāo)1的位置，刪除0個(gè)元素，并在下標(biāo)1的位置新增兩個(gè)元素true,false
console.log(arr3.splice(1,0,true,false)); // []
console.log(arr3); // [5, true, false, 6, 7, 8, 9]
截:
slice(start,end)
start : 從哪個(gè)下標(biāo)位置開(kāi)始
end : 到哪個(gè)下標(biāo)位置結(jié)束（不包含結(jié)束位置）
作用：截取數(shù)組中指定范圍的元素
返回值：被截取到的元素?cái)?shù)組
是否影響原數(shù)組：否
var arr = [5,6,7,8,9];
// 從原數(shù)組中的下標(biāo)1位置開(kāi)始截取到數(shù)組末尾，并返回截取到的新數(shù)組
console.log(arr.slice(1)); // [6, 7, 8, 9] 返回值
console.log(arr); // [5,6,7,8,9] 原數(shù)組
var arr1 = [5,6,7,8,9];
//從原數(shù)組中的下標(biāo)1位置開(kāi)始截取到3下標(biāo)之前（不包含3下標(biāo)）
console.log(arr1.slice(1,3)); // [6, 7] 返回值
console.log(arr1); // [5,6,7,8,9] 原數(shù)組
var arr2 = [5,6,7,8,9];
//從原數(shù)組中的下標(biāo)3位置開(kāi)始截取到1下標(biāo)之前（因?yàn)橹荒芟蛴医厝?#xff0c;所有未能截取到元素）
console.log(arr2.slice(3,1)); // [] 返回值
console.log(arr2); // [5,6,7,8,9] 原數(shù)組
var arr3 = [5,6,7,8,9];
//從原數(shù)組中的下標(biāo)-3（最后一個(gè)元素下標(biāo)為-1，-3下標(biāo)對(duì)應(yīng)的元素為7）位置開(kāi)始截取到-1下標(biāo)之前（不包含-1下標(biāo)）
console.log(arr3.slice(-3,-1)); // [7, 8] 返回值
console.log(arr3); // [5,6,7,8,9] 原數(shù)組
拼:
concat(元素，元素，……)
作用：在指定的數(shù)組后面拼接新的元素（如果新元素是數(shù)組，則去掉最外層的[]將里面元素拼接）
返回值：拼接后的新數(shù)組
是否影響原數(shù)組：否
var arr = [5,6,7,8,9];
//拼接的元素如果是多維數(shù)組，則取最外層數(shù)組中的元素原樣拼接到指定數(shù)組的后面
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] 原數(shù)組
復(fù):
function copyArray(arr){
return arr.slice(0);
}
function cloneArray(arr){
return arr.concat();
}
排:
reverse()
作用：將數(shù)組中的元素逆序存放
返回值：返回逆序后的數(shù)組
是否影響原數(shù)組：是
var arr = [3,2,10,4,5];
console.log(arr.reverse()); // [5, 4, 10, 2, 3] 返回值
console.log(arr); // [5, 4, 10, 2, 3] 原數(shù)組
sort()
作用：將數(shù)組中的元素按照字符編碼進(jìn)行從小到大排序
返回值：返回逆序后的數(shù)組
是否影響原數(shù)組：是
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] 原數(shù)組
sort(function(a,b){return a-b;}) : 將數(shù)組中的元素按照數(shù)字進(jìn)行從小到大排序。sort(function(a,b){return b-a;}) : 將數(shù)組中的元素按照數(shù)字進(jìn)行從大到小排序。
var arr = [3,2,10,4,5];
// 按數(shù)字 從小到大
console.log(arr.sort(function(a,b){return a-b;})); //[2, 3, 4, 5, 10]
// 按數(shù)字 從大到小
console.log(arr.sort(function(a,b){return b-a;})); //[10, 5, 4, 3, 2]
轉(zhuǎn):
join(‘連接符’)
作用：將數(shù)組轉(zhuǎn)為以指定連接符連接成的字符串
返回值：返回轉(zhuǎn)換后的字符串
是否影響原數(shù)組：否
var arr = [1,2,3,4];
// 將數(shù)組轉(zhuǎn)成以空字符串連接成的字符串
console.log(arr.join(’’)); //‘1234’
本文來(lái)自千鋒教育，轉(zhuǎn)載請(qǐng)注明出處。
總結(jié)
以上是生活随笔為你收集整理的Web前端技术分享：Javascript中的内置对象数组讲解的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 那些常见的Web前端学习误区分享
- 下一篇： Web前端与HTML5有什么区别，百分之