JavaScript >> Javascript 文檔 >  >> JavaScript

JavaScript:如何將元素插入到數組的特定索引中

簡介

數組是一種線性數據結構,可以說是計算機科學中最流行的數據結構之一。修改數組是一種常見的操作。在這裡,我們將討論如何在 JavaScript 中的數組的任意位置添加元素 .

一個元素可以在三個地方添加到數組中:

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

讓我們從向數組的開頭添加元素開始吧!

將元素添加到數組的開頭

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 ]

在數組末尾添加元素

使用數組的最後一個索引

要將元素添加到數組的末尾,我們可以利用數組的長度總是比索引小一這一事實。

比如說一個數組的長度是5,那麼最後一個索引值就是4。所以,我們可以直接在last+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);

在 JS 控制台中運行它會顯示:

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 ]

免費電子書:Git Essentials

查看我們的 Git 學習實踐指南,其中包含最佳實踐、行業認可的標準以及隨附的備忘單。停止谷歌搜索 Git 命令並真正學習 它!

我們可以將數組與一系列值連接起來:

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 到 9 的數字列表:

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

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

現在我們將討論一個主線方法,該方法可用於在數組的任何位置添加元素 - 開始、結束、中間以及中間的任何其他位置。

splice() 方法添加、刪除和替換數組中的元素。它通常用於陣列管理。此方法不會創建新數組,而是更新調用它的數組。

讓我們看看splice() 在行動。我們將獲取一個工作日數組,並在“星期二”和“星期四”之間添加一個“星期三”元素:

const weekdays = ['monday', 'tuesday', 'thursday', 'friday']
const deletedArray = weekdays.splice(2, 0, 'wednesday');

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

上面的代碼將此記錄到控制台:

[ 'monday', 'tuesday', 'wednesday', 'thursday', 'friday' ]
[]

讓我們分解上面的代碼。我們想在 weekdays 中添加“星期三” 2nd 的數組 位置。這裡不需要刪除任何元素。代碼 weekdays.splice(2, 0, 'wednesday') 在第二個位置讀取,不要刪除任何元素並添加 wednesday .

這是使用 splice() 的一般語法 :

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

地點:

  • start - 開始修改數組的索引。
  • deleteCount - 數組中要從 start 中刪除的可選項目數 .如果省略,則為 start 之後的所有項目 將被刪除。
  • item1, item2, ... - 從 start 附加到數組的可選項目 .如果省略,它只會從數組中刪除元素。

讓我們看另一個slice()的例子 我們同時添加和刪除數組。我們將在第二個位置添加“星期三”,但我們也會在那裡刪除錯誤的周末值:

const weekdays = ['monday', 'tuesday', 'saturday', 'sunday', 'thursday', 'friday']
const deletedArray = array.splice(2, 2, 'wednesday');

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

上面的代碼會打印:

[ 'monday', 'tuesday', 'wednesday', 'thursday', 'friday' ]
[ 'saturday', 'sunday' ]

在上面的例子中,array.splice(2, 2, 'wednesday') 從第二個位置(開始)刪除兩個元素並在那裡添加 'wednesday'。這就是 slice() 的力量 !

結論

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


Tutorial JavaScript 教程
  1. ApolloClient - React useSuspenseQuery 鉤子

  2. 初學者的反應路由器

  3. 使用 React Hook 動態添加表格行

  4. 我不能在 javascipt 中使用這個正則表達式來拆分“(”的字符)

  5. 每個有抱負的 Javascript 開發人員必不可少的 5 個 Github 項目

  6. 🚫😩 一系列反應參考

  7. 💾 國情

  1. Enter 鍵上的項目插入

  2. Angular – 在每次 forEach 迭代後插入值

  3. Discord.JS 入門

  4. JavaScript 函數式編程的誤解

  5. 從軌道高度

  6. 至少你應該知道的 Javascript 數組方法

  7. 如何使用 ejs 創建會話/登錄?

  1. 如何在 Apollo Client for GraphQL 中使用 React 鉤子

  2. 我的基本 React 路由器 6 設置

  3. 掌握 AngularJS 指令

  4. 創建您的開發組合 - 第 1 部分:首先要做的事