JavaScript 中陣列的子集

Shraddha Paghdar 2023年1月30日 2022年5月10日
  1. 在 JavaScript 中使用 slice() 從陣列中提取陣列元素的子集
  2. 在 JavaScript 中使用 splice() 從陣列中提取陣列元素的子集
JavaScript 中陣列的子集

陣列是程式語言的重要組成部分,因為它們包含許多有序元素。

所有這些專案都通過索引訪問。在 JavaScript 中,陣列是包含指定鍵(數字鍵)的值的常規物件。

陣列是具有固定數字鍵和動態值的 JavaScript 物件,在單個變數中包含任意數量的資料。

陣列可以是一維的,也可以是多維的。JavaScript 陣列可以儲存任何東西,例如直接值或儲存 JavaScript 物件。

與其他語言不同,JS 陣列可以在同一陣列的不同索引處儲存不同的資料型別。我們將學習如何在 JavaScript 中提取陣列的一些元素或子集。

在 JavaScript 中使用 slice() 從陣列中提取陣列元素的子集

slice() 方法是 JavaScript 提供的內建方法。此方法在兩個位置切割陣列。

通過採用兩個輸入(開始索引和結束索引)來進行切割。並基於此,將返回索引之間的陣列部分。

如果只指定了起始索引,則返回到最後一個元素。使用 slice 而不是 splice 的優點是原始陣列是未變異,因為它在拼接中。

語法:

slice()
slice(start)
slice(start, end)

startend 索引中的每個元素(包括開始元素和結束前的停止元素)都將插入到新陣列中。

結束索引完全是一個可選引數。有關詳細資訊,請參閱 slice() 方法文件。

const inputArray = [1, 2, 3, 4, 5];
const outputArray1 = inputArray.slice(0, 1);
const outputArray2 = inputArray.slice(1, 3);
const outputArray3 = inputArray.slice(-2);
console.log(outputArray1);  
console.log(outputArray2); 
console.log(outputArray3); 

當我們呼叫 slice(0, 1) 時,元素 1 從初始陣列 inputArray 複製到 outputArray1

如果起始索引大於陣列的長度,它將顯示為空,並且空陣列將作為輸出返回。

有趣的是,如果你指定負索引,則輸入引數被認為是從序列末尾的偏移量。在任何瀏覽器中執行上述程式碼後,它會列印出類似這樣的內容。

輸出:

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

在 JavaScript 中使用 splice() 從陣列中提取陣列元素的子集

splice() 方法影響或修改陣列的內容。這是通過刪除、替換現有專案並在其位置新增新專案來完成的。

語法:

splice(start)
splice(start, deleteCount)
splice(start, deleteCount, item1)
splice(start, deleteCount, item1, item2, itemN)

JavaScript splice 方法接受三個輸入引數,其中第一個是 start

必需引數指定陣列的起始位置/索引以修改陣列。如果大於陣列的長度,則將 start 設定為陣列的長度。

在這種情況下,不會刪除任何元素,但該方法的行為類似於加法函式,新增與提供的 [n*] 個元素一樣多的元素。

如果為負數,則從陣列末尾的那麼多元素開始。

第二個引數是 deleteCount,一個可選引數。此引數指定要從一開始就刪除的陣列元素的數量。

如果省略 deleteCount 或其值等於或大於 array.length - start,則刪除從陣列開頭到結尾的所有元素。

0 或負數,不刪除任何元素。在這種情況下,你至少需要輸入一個新專案。

第三個引數是 itemN...,一個可選引數。此引數指定要新增到陣列的元素,從開頭開始。

如果你不指定專案,splice() 只會消除陣列的元素。

此方法返回一個包含已刪除專案的替換陣列。如果只刪除 n 個元素,則返回一個包含 n 個元素的陣列。

如果沒有元素被刪除,則返回一個空陣列。有關詳細資訊,請參閱 splice 方法文件。

const fruitsArray =  ["Kiwi","Orange","Apple","Banana"];
console.log(fruitsArray, fruitsArray.splice(0, 2));

在上面的示例中,我們指定了各種樣式的水果。提取柑橘類水果後,它將影響原始的 fruitsArray 陣列並返回一個陣列。

這不包含柑橘類水果的名稱。在任何瀏覽器中執行上述程式碼後,它會列印出類似這樣的內容。

輸出:

["Apple", "Banana"], ["Kiwi", "Orange"]

要檢查完整的工作程式碼,單擊此處

Shraddha Paghdar avatar Shraddha Paghdar avatar

Shraddha is a JavaScript nerd that utilises it for everything from experimenting to assisting individuals and businesses with day-to-day operations and business growth. She is a writer, chef, and computer programmer. As a senior MEAN/MERN stack developer and project manager with more than 4 years of experience in this sector, she now handles multiple projects. She has been producing technical writing for at least a year and a half. She enjoys coming up with fresh, innovative ideas.

LinkedIn

相關文章 - JavaScript Array