[[382317]]

本文已經(jīng)過(guò)原作者 Guest Contributor 授權(quán)翻譯!

簡(jiǎn)介

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

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

• 開始/第一個(gè)元素
• 結(jié)束/最后元素
• 其他地方

1111

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

數(shù)組對(duì)象中的unshift()方法將一個(gè)或多個(gè)元素添加到數(shù)組的開頭，并返回?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開頭。最后，在該位置插入值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ù)組的任何位置添加元素——開始、結(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-開始修改數(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é)果：

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

總結(jié)

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

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

作者：Guest Contributor

譯者：前端小智

來(lái)源：stackabuse

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

本文轉(zhuǎn)載自微信公眾號(hào)「大遷世界」，可以通過(guò)以下二維碼關(guān)注。轉(zhuǎn)載本文請(qǐng)聯(lián)系大遷世界公眾號(hào)。