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

作者：前端小智 2021-02-20 08:01:48

運維數據庫運維

數組是一種線性數據結構，可以說是編程中最常用的數據結構之一。修改數組是一種常見的操作，這里，我們來討論如何在 JS 中數組的任何位置添加元素。

[[382317]]

本文已經過原作者 Guest Contributor 授權翻譯!

簡介

元素可以添加到數組中的三個位置

開始/第一個元素
結束/最后元素
其他地方

1111

接著，我們一個一個過一下：

數組對象中的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()方法，我們可以更好地控制它們的放置位置。

完~ 我是小智，我要去刷碗了，我們下期見~

作者：Guest Contributor

譯者：前端小智

來源：stackabuse

原文：https://stackabse.com/javascript-how-to-inser-elements-into-a-specific-index-of-an-array/

本文轉載自微信公眾號「大遷世界」，可以通過以下二維碼關注。轉載本文請聯系大遷世界公眾號。

責任編輯：武曉燕來源：大遷世界

索引數組元素