首頁(yè)技術(shù)文章正文

JavaScript數(shù)組的常用方法

更新時(shí)間:2022-03-25 來(lái)源:黑馬程序員 瀏覽量:

數(shù)組是JavaScript中最常用的數(shù)據(jù)類型之一,為此Array對(duì)象中提供了許多內(nèi)置方法,如棧方法、檢索方法、數(shù)組轉(zhuǎn)字符串的方法等。本節(jié)將針對(duì)數(shù)組的常用方法進(jìn)行詳細(xì)講解。

棧方法

JavaScript中,除了前面講解的添加與刪除數(shù)組元素的方式外,還可以利用Array對(duì)象提供的棧方法實(shí)現(xiàn)在數(shù)組的末尾或開頭添加數(shù)組的新元素,也稱為入棧;在數(shù)組的末尾或開頭刪除數(shù)組元素,也稱為出棧。具體如表3-1所示。
1648198585080_101.png

表3-1中需要注意的是,push()和unshift()方法的返回值是新數(shù)組的長(zhǎng)度,而pop()和shift()方法返回的是移出的數(shù)組元素。

為了更好地理解數(shù)組元素棧方法的使用,接下來(lái)通過(guò)案例3-6進(jìn)行演示。【例3-6】demo06.html

<script>
  var arr = ['Rose', 'Lily'];
  console.log('原數(shù)組:' + arr);
  var last = arr.pop();
  console.log('在末尾移出元素:' + last + ' -移出后數(shù)組:' + arr);
  var len = arr.push('Tulip', 'Jasmine');
  console.log('在末尾添加元素后長(zhǎng)度變?yōu)椋?#39; + len + ' -添加后數(shù)組:' + arr);
  var first = arr.shift();
  console.log('在開頭移出元素:' + first+ ' -移出后數(shù)組:' + arr);
  len = arr.unshift('Balsam', 'sunflower');
  console.log('在開頭添加元素后長(zhǎng)度變?yōu)椋?#39; + len + ' -添加后數(shù)組:' + arr);
</script>

從上述代碼可以看出,push()和unshift()方法可以為指定數(shù)組在末尾或開頭添加一個(gè)或多個(gè)元素,而pop()和shift()方法則只能移出并返回指定數(shù)組在末尾或開頭的一個(gè)元素。輸出結(jié)果如圖3-12所示。

1.檢索方法

在開發(fā)中,若要檢測(cè)給定的值是否是數(shù)組,或是查找指定的元素在數(shù)組中的位置,則可以利用Array對(duì)象提供的檢索方法,具體如表3-2所示。

1648198917666_103.png

表3-2中除了Array.isArray()方法外,其余方法默認(rèn)都是從指定數(shù)組索引的位置開始檢索,并且檢索方式與運(yùn)算符“===”相同,即只有全等時(shí)才會(huì)返回比較成功的結(jié)果。為了初學(xué)者更好的理解這些方法的使用,下面通過(guò)代碼和案例進(jìn)行演示。

(1)includes()和Array.isArray()方法

var data = ['peach', 'pear', 26, '26','grape'];
// 從數(shù)組下標(biāo)為3的位置開始檢索數(shù)字26
console.log(data.includes(26,3));     // 輸出結(jié)果:false
// 從數(shù)組下標(biāo)為data.length -3 的位置查找數(shù)字26
console.log(data.includes(26, -3));     // 輸出結(jié)果:true
// 判斷變量data是否為數(shù)組
console.log(Array.isArray(data));     // 輸出結(jié)果:true

在上述代碼中,includes()方法在使用時(shí),第1個(gè)參數(shù)表示待查找的值,第2個(gè)參數(shù)用于指定在數(shù)組中查找的索引下標(biāo),當(dāng)其值大于數(shù)組長(zhǎng)度時(shí),數(shù)組不會(huì)被檢索,直接返回false;若將下標(biāo)設(shè)置為小于0的數(shù)時(shí),則檢索的下標(biāo)位置等于數(shù)組長(zhǎng)度加上指定的負(fù)數(shù),若結(jié)果仍是小于0的數(shù),則檢索整個(gè)數(shù)組。

(2)indexOf()方法

indexOf()用于在數(shù)組中從指定下標(biāo)位置,檢索到的第一個(gè)給定值,存在則返回對(duì)應(yīng)的元素下標(biāo),否則返回-1。下面以判斷一個(gè)元素是否在指定數(shù)組中,若不在則更新數(shù)組為例進(jìn)行講解。如例3-7所示。【例3-7】demo07.html

<script>
    var arr = ['potato', 'tomato', 'chillies', 'green-pepper'];
 var search = 'cucumber';
 if (arr.indexOf(search) === -1) { // 查找的元素不存在
    arr.push(search);
    console.log('更新后的數(shù)組為: ' + arr);
 } else if (arr.indexOf(search) > -1) { // 防止返回的下標(biāo)為0,if判斷為false
    console.log(search + '元素已在arr數(shù)組中。');
    } 
</script>

上述第2行代碼用于創(chuàng)建待檢索的數(shù)組arr,第3行利用search變量保存需要檢索的值,第4~9行代碼用于檢索arr數(shù)組中是否含有search元素,若沒(méi)有則執(zhí)行第5~6行代碼,在arr數(shù)組末尾添加該元素,效果如圖3-13左側(cè)所示;若有則執(zhí)行第8行代碼,在控制臺(tái)輸出對(duì)應(yīng)的提示信息,如將search的值設(shè)置為tomato時(shí),效果如圖3-13右側(cè)所示。

1648198398417_104.png

圖3-13indexOf()方法示例

值得一提的是,indexOf()方法的第2個(gè)參數(shù)用于指定開始查找的下標(biāo),當(dāng)其值大于或等于數(shù)組長(zhǎng)度時(shí),程序不會(huì)在數(shù)組中查找,直接返回-1;當(dāng)其值為負(fù)數(shù)時(shí),查找的下標(biāo)位置等于數(shù)組長(zhǎng)度加上指定的負(fù)數(shù),若結(jié)果仍是小于0的數(shù),則檢索整個(gè)數(shù)組。

(3)lastIndexOf()方法

Array對(duì)象提供的lastIndexOf()方法,用于在數(shù)組中從指定下標(biāo)位置檢索到的最后一個(gè)給定值的下標(biāo)。與indexOf()檢索方式不同的是,lastIndexOf()方法默認(rèn)逆向檢索,即從數(shù)組的末尾向數(shù)組的開頭檢索。接下來(lái)以找出指定元素出現(xiàn)的所有位置為例進(jìn)行講解。如例3-8所示。【例3-8】demo08.html

<script>
  var res = [];
  var arr = ['a', 'b', 'a', 'c', 'a', 'd'];// 待檢索的數(shù)組
  var search= 'a';// 要查找的數(shù)組元素
  var i = arr.lastIndexOf(search);
  while (i !==-1) {
  res.push(i);
  i = (i > 0 ? arr.lastIndexOf(search, i -1): -1);
}
  console.log('元素' + search + ' 在數(shù)組中的所有位置為:' + res);
</script>

上述第2行初始化的res變量,用于保存指定元素出現(xiàn)的所有索引下標(biāo)。第5行用于獲取arr數(shù)組中search變量最后一次出現(xiàn)的位置,第6~9行通過(guò)循環(huán)獲取search變量出現(xiàn)的所有位置。其中,第7行用于從res數(shù)組的末尾添加找到的元素下標(biāo),第8行通過(guò)判斷當(dāng)前的下標(biāo)是否大于0,確定arr中是否還有元素,若結(jié)果為true,則下標(biāo)值i減1,繼續(xù)從指定位置向前檢索變量search的值最后一次出現(xiàn)的下標(biāo),直到檢索完數(shù)組,將i設(shè)置為-1結(jié)束循環(huán)。輸出結(jié)果如圖3-14所示。

1648198386184_105.png

圖3-14lastIndexOf()方法的示例

值得一提的是,lastIndexOf()方法的第2個(gè)參數(shù)用于指定查找的下標(biāo),且由于其采用逆向的方式檢索,因此當(dāng)其值大于或等于數(shù)組長(zhǎng)度時(shí),則整個(gè)數(shù)組都會(huì)被查找。當(dāng)其值為負(fù)數(shù)時(shí),則索引位置等于數(shù)組長(zhǎng)度加上給定的負(fù)數(shù),若其值仍為負(fù)數(shù),則直接返回-1。

2.數(shù)組轉(zhuǎn)字符串

在項(xiàng)目開發(fā)中,若需要將數(shù)組轉(zhuǎn)換為字符串,則可以利用JavaScript提供的join()和toString()方法實(shí)現(xiàn)。具體如表3-3所示。

表3-3數(shù)組轉(zhuǎn)字符串

1648198371452_107.png

為了讓大家更加清楚的了解數(shù)組轉(zhuǎn)字符串的使用,下面通過(guò)示例的方式演示。

console.log(['a','b','c'].join());    // 輸出結(jié)果:a,b,c
console.log([[4,5],[1,2]].join('-')); // 輸出結(jié)果:4,5-1,2
console.log(['a','b','c'].toString());// 輸出結(jié)果:a,b,c
console.log([[4,5],[1,2]].toString());// 輸出結(jié)果:4,5,1,2

從上述代碼可知,join()和toString()方法可將多維數(shù)組轉(zhuǎn)為字符串,默認(rèn)情況下使用逗號(hào)連接。不同的是,join()方法可以指定連接數(shù)組元素的符號(hào)。另外,當(dāng)數(shù)組元素為undefined、null或空數(shù)組時(shí),對(duì)應(yīng)的元素會(huì)被轉(zhuǎn)換為空字符串。

3.其他方法

除了前面講解的幾種常用方法外,JavaScript還提供了很多其他常用的數(shù)組方法。例如,合并數(shù)組、數(shù)組淺拷貝、顛倒數(shù)組元素的順序等。具體如表3-4所示。

表3-4其他方法

1648198344127_其他方法.jpg

表3-4中的slice()和concat()方法在執(zhí)行后返回一個(gè)新的數(shù)組,不會(huì)對(duì)原數(shù)組產(chǎn)生影響,剩余的方法在執(zhí)行后皆會(huì)原數(shù)組產(chǎn)生影響。

接下來(lái),以splice()方法為例演示如何在指定位置添加或刪除數(shù)組元素。如例3-9所示。

【例3-9】demo09.html

<script>
    var arr = ['sky', 'wind', 'snow', 'sun'];
// 從數(shù)組下標(biāo)2的位置開始,刪除2個(gè)元素4arr.splice(2, 2);5console.log(arr);
// 從數(shù)組下標(biāo)1的位置開始,刪除1個(gè)元素后,再添加snow元素
arr.splice(1, 1, 'snow');
console.log(arr);
// 指定下標(biāo)4大于數(shù)組的長(zhǎng)度,則直接在數(shù)組末尾添加hail和sun元素
arr.splice(4, 0, 'hail', 'sun');
console.log(arr);
// 從數(shù)組下標(biāo)3的位置開始,添加數(shù)組、null、undefined和空數(shù)組
arr.splice(3, 0, ['lala', 'yaya'], null, undefined, []);
console.log(arr);
</script>

在上述代碼中,splice()方法的第1個(gè)參數(shù)用于指定添加或刪除的下標(biāo)位置;第2個(gè)參數(shù)用于從指定下標(biāo)位置開始,刪除數(shù)組元素的個(gè)數(shù),將其設(shè)置為0,則表示該方法只添加元素。剩余的參數(shù)表示要添加的數(shù)組元素,若省略則表示刪除元素。效果如圖3-15所示。

1648198298217_108.png

圖3-15splice()方法添加或刪除數(shù)組元素

值得一提的是,splice()方法的第1個(gè)參數(shù)的值等于或大于數(shù)組長(zhǎng)度時(shí),從數(shù)組末尾開始操作;當(dāng)該值為負(fù)數(shù)時(shí),則下標(biāo)位置等于數(shù)組長(zhǎng)度加上指定的負(fù)數(shù),若其值仍為負(fù)數(shù),則從數(shù)組的開頭開始操作。


分享到:
在線咨詢 我要報(bào)名
和我們?cè)诰€交談!