JS如何將元素插入數(shù)組的指定索引

這篇文章主要講解了“JS如何將元素插入數(shù)組的指定索引”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“JS如何將元素插入數(shù)組的指定索引”吧！

簡(jiǎn)介

數(shù)組是一種線性數(shù)據(jù)結(jié)構(gòu)，可以說(shuō)是編程中最常用的數(shù)據(jù)結(jié)構(gòu)之一。修改數(shù)組是一種常見(jiàn)的操作，這里，我們來(lái)討論如何在 JS 中數(shù)組的任何位置添加元素。

元素可以添加到數(shù)組中的三個(gè)位置

• 開(kāi)始/第一個(gè)元素

• 結(jié)束/最后元素

• 其他地方

1111

接著，我們一個(gè)一個(gè)過(guò)一下：

數(shù)組對(duì)象中的unshift()方法將一個(gè)或多個(gè)元素添加到數(shù)組的開(kāi)頭，并返回?cái)?shù)組的新長(zhǎng)度：

const startArray = [3, 4, 5]; const newLength = startArray.unshift(2); console.log(newLength);  console.log(startArray);  startArray.unshift(-1, 0, 2); console.log(startArray);

上面輸出的結(jié)果：

4 [ 2, 3, 4, 5 ] [ -1, 0, 2, 2, 3, 4, 5 ]

將元素添加到數(shù)組的末尾

使用數(shù)組的最后一個(gè)索引

要在數(shù)組末尾添加元素，可以使用數(shù)組的長(zhǎng)度總是比下標(biāo)小1這一技巧。

const indexArray = [1, 2, 3]; console.log(indexArray.length); console.log(indexArray[2]); console.log(indexArray[3]);  indexArray[indexArray.length] = 4 console.log(indexArray);

上面輸出的結(jié)果：

3 3 undefined [ 1, 2, 3, 4 ]

數(shù)組的長(zhǎng)度是3，第二個(gè)元素是3。沒(méi)有第三個(gè)元素，所以我們用undefined開(kāi)頭。最后，在該位置插入值4。

使用 push() 方法

數(shù)組的push()方法將一個(gè)或多個(gè)元素添加到數(shù)組的末尾。就像unshift()一樣，它也會(huì)返回?cái)?shù)組的新長(zhǎng)度

const pushArray = [1, 2, 3] const newLength = pushArray.push(4, 5, 6, 7); console.log(newLength); console.log(pushArray);

上面輸出的結(jié)果：

7 [ 1, 2, 3, 4, 5, 6, 7 ]

使用 concat() 方法

通過(guò)數(shù)組的concat()方法實(shí)現(xiàn)兩個(gè)或更多數(shù)組的合并。它創(chuàng)建新的副本，且不影響原始數(shù)組。與以前的方法不同，它返回一個(gè)新數(shù)組。使用該方法，要連接的值始終位于數(shù)組的末尾。

const example1Array1 = [1, 2, 3]; const valuesToAdd = [4, 5, 6]; const example1NewArray = example1Array1.concat(valuesToAdd);  console.log(example1NewArray); console.log(example1Array1);

上面輸出的結(jié)果：

[ 1, 2, 3, 4, 5, 6 ] [ 1, 2, 3 ]

我們可以將一個(gè)數(shù)組與一系列值連接起來(lái)：

const array = [1,2,3]; const newArray = array.concat('12', true, null, 4,5,6,'hello'); console.log(array); console.log(newArray);

上面輸出的結(jié)果：

[ 1, 2, 3 ] [ 1, 2, 3, '12', true, null, 4, 5, 6, 'hello' ]

可以將一個(gè)數(shù)組與多個(gè)數(shù)組連接起來(lái):

const array1 = [1, 2, 3]; const array2 = [4, 5, 6]; const array3 = [7, 8, 9]; const oneToNine = array1.concat(array2, array3);  console.log(oneToNine);

上面輸出的結(jié)果：

[ 1, 2, 3, 4, 5, 6, 7, 8, 9 ]

在數(shù)組的任何位置添加元素

現(xiàn)在我們將討論一個(gè)masterstroke方法，它可以用于在數(shù)組的任何位置添加元素——開(kāi)始、結(jié)束、中間和中間的任何位置。

splice()方法添加，刪除和替換數(shù)組中的元素。它通常用于數(shù)組管理，此方法不會(huì)創(chuàng)建新數(shù)組，而是會(huì)更新調(diào)用它的數(shù)組。

我們來(lái)看看splice()的實(shí)際應(yīng)用。這里有一個(gè)weekdays數(shù)組，現(xiàn)在，我們想在'周二'和'周四'之間添加一個(gè)'周三'元素

const weekdays = ['周一', '周三', '周四', '周五'] const deletedArray = weekdays.splice(2, 0, '周二');  console.log(weekdays); console.log(deletedArray);

上面輸出的結(jié)果：

["周一", "周二", "周三", "周四", "周五"] []

分析一下上面的代碼。我們想在weekdays數(shù)組的第二個(gè)位置添加'周二'。這里不需要?jiǎng)h除任何元素。weekdays.splice(2, 0,  'wednesday')被讀取為第二個(gè)位置，不移除任何元素并添加'周二'。

下面是使用splice()的一般語(yǔ)法:

let removedItems = array.splice(start[, deleteCount[, item1[, item2[, ...]]]])

• start-開(kāi)始修改數(shù)組的索引。

• deleteCount -從start 刪除的數(shù)組中可選的項(xiàng)目數(shù)。如果省略，則start后的所有項(xiàng)目都將被刪除。

• item1, item2, ...-從start 添加到數(shù)組的可選項(xiàng)目。如果省略，它將僅從數(shù)組中刪除元素。

我們看一下slice()的另一個(gè)示例，在該示例中我們同時(shí)添加和刪除數(shù)組。我們將在第二個(gè)位置添加 '周三'，但是我們還將在該處刪除錯(cuò)誤的周末值：

const weekdays = ['周一', '周三', '周六', '周日', '周四', '周五'] const deletedArray = weekdays .splice(2, 2, '周二');  console.log(weekdays); console.log(deletedArray);

上面輸出的結(jié)果：

["周一", "周三", "周二", "周四", "周五"] ["周六", "周日"]

感謝各位的閱讀，以上就是“JS如何將元素插入數(shù)組的指定索引”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)JS如何將元素插入數(shù)組的指定索引這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！