如何將元素插入數組的指定索引？

做者：Guest Contributor
譯者：前端小智
來源：stackabuse

點贊再看，微信搜索 【大遷世界】,B站關注 【前端小智】這個沒有大廠背景，但有着一股向上積極心態人。本文 GitHub https://github.com/qq44924588... 上已經收錄，文章的已分類，也整理了不少個人文檔，和教程資料。

簡介

數組是一種線性數據結構，能夠說是編程中最經常使用的數據結構之一。修改數組是一種常見的操做，這裏，咱們來討論如何在 JS 中數組的任何位置添加元素。

元素能夠添加到數組中的三個位置

• 開始/第一個元素
• 結束/最後元素
• 其餘地方

接着，咱們一個一個過一下：

數組對象中的unshift()方法將一個或多個元素添加到數組的開頭，並返回數組的新長度：

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

startArray.unshift(-1, 0, 2);
console.log(startArray);

上面輸出的結果：

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

將元素添加到數組的末尾

使用數組的最後一個索引

要在數組末尾添加元素，能夠使用數組的長度老是比下標小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);

上面輸出的結果：

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

數組的長度是3，第二個元素是3。沒有第三個元素，因此咱們用undefined開頭。最後，在該位置插入值4。

使用 push() 方法

數組的push()方法將一個或多個元素添加到數組的末尾。就像unshift()同樣，它也會返回數組的新長度

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

上面輸出的結果：

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

使用 concat() 方法

經過數組的 concat()方法實現兩個或更多數組的合併。 它建立新的副本，且不影響原始數組。 與之前的方法不一樣，它返回一個新數組。 使用該方法，要鏈接的值始終位於數組的末尾。

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

console.log(example1NewArray);
console.log(example1Array1);

上面輸出的結果：

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

咱們能夠將一個數組與一系列值鏈接起來：

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

上面輸出的結果：

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

能夠將一個數組與多個數組鏈接起來:

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

console.log(oneToNine);

上面輸出的結果：

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

在數組的任何位置添加元素

如今咱們將討論一個masterstroke方法，它能夠用於在數組的任何位置添加元素——開始、結束、中間和中間的任何位置。

splice()方法添加，刪除和替換數組中的元素。 它一般用於數組管理，此方法不會建立新數組，而是會更新調用它的數組。

咱們來看看splice()的實際應用。這裏有一個weekdays數組，如今，咱們想在'週二'和'週四'之間添加一個'週三'元素

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

console.log(weekdays);
console.log(deletedArray);

上面輸出的結果：

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

分析一下上面的代碼。咱們想在weekdays數組的第二個位置添加'週二'。這裏不須要刪除任何元素。weekdays.splice(2, 0, 'wednesday')被讀取爲第二個位置，不移除任何元素並添加'週二'。

下面是使用splice()的通常語法:

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

• start-開始修改數組的索引。
• deleteCount -從start 刪除的數組中可選的項目數。若是省略，則start後的全部項目都將被刪除。
• item1, item2, ...-從start 添加到數組的可選項目。 若是省略，它將僅從數組中刪除元素。

咱們看一下slice()的另外一個示例，在該示例中咱們同時添加和刪除數組。 咱們將在第二個位置添加 '週三'，可是咱們還將在該處刪除錯誤的週末值：

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

console.log(weekdays);
console.log(deletedArray);

上面輸出的結果：

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

總結

在本文中，咱們研究了 JS 中能夠向數組添加元素的多種方法。 咱們能夠使用 unshift() 將它們添加到開頭。 咱們能夠使用索引，pop()方法和concat()方法將它們添加到末尾。 經過splice()方法，咱們能夠更好地控制它們的放置位置。

---

代碼部署後可能存在的BUG無法實時知道，過後爲了解決這些BUG，花了大量的時間進行log 調試，這邊順便給你們推薦一個好用的BUG監控工具 Fundebug。

原文：https://stackabse.com/javascr...

交流

文章每週持續更新，能夠微信搜索「 大遷世界 」第一時間閱讀和催更（比博客早一到兩篇喲），本文 GitHub https://github.com/qq449245884/xiaozhi 已經收錄，整理了不少個人文檔，歡迎Star和完善，你們面試能夠參照考點複習，另外關注公衆號，後臺回覆福利，便可看到福利，你懂的。