如何在 JavaScript 中截斷陣列?
本教程將介紹如何在 JavaScript 中截斷陣列。截斷陣列意味著從陣列末尾去除一些元素,並將截斷後的新陣列值重新賦值給原始陣列。
有時我們需要截斷陣列。例如,假設有一個數組,其中包含已排序(降序)的元素,現在我們只需要陣列中前 k 個排序的元素,並刪除其餘元素。因此,我們不需要建立額外的陣列,修改它並將其分配給原始陣列。
截斷陣列的方法有很多,讓我們看看所有這些方法。
語法
以下是截斷陣列的語法
arr.splice(index, howmany); // the splice() method. arr.length=idx; // array length property.
這裡arr是原始陣列。idx是要截斷陣列的索引/位置。index是要刪除元素的位置,howmany是要從陣列中刪除的元素數量。
演算法
- 步驟 1 - 建立一個數組arr並向其中新增元素。使用 innerHTML 屬性顯示 arr。
- 步驟 2 - 對陣列 arr 應用splice()方法,傳遞index和howmany作為引數。或者,我們可以應用 arr.length=idx。
- 步驟 3 - 使用 innerHTML 屬性顯示截斷後的陣列。
示例 1
使用Array splice()方法
在下面的示例中,我們使用陣列 splice() 方法來截斷陣列。我們定義了一個包含七個元素的陣列。我們截斷了位置 3 之後的元素。
<html> <head> <title>Example- Truncate an array in JavaScript</title> </head> <body> <h3>Truncate an Array using splice() Method-</h3> <p id="before">Array before truncate:<br></p> <p id="after">Array after truncate:<br></p> <script> let arr = ["kalyan", "ashis", "anand", "sonu", "tirupati", "nagar", "arjun"]; document.getElementById('before').innerHTML+=arr arr.splice(4, arr.length); document.getElementById('after').innerHTML+=arr </script> </body> </html>
示例 2
使用陣列 length 屬性
在這個示例中,我們使用陣列 length 屬性來截斷陣列。我們只需將所需的長度分配給陣列,其大小就會根據分配的大小而改變。
<html> <head> <title>Example- Truncate an array in JavaScript</title> </head> <body> <h3>Truncate an Array using Array length property-</h3> <p id="before">Array before truncate:<br></p> <p id="after">Array after truancate:<br></p> <script> let arr = ["kalyan", "ashis", "anand", "sonu", "tirupati", "nagar", "arjun"]; document.getElementById('before').innerHTML+=JSON.stringify(arr) arr.length=4 document.getElementById('after').innerHTML+=JSON.stringify(arr) </script> </body> </html>
在這裡,我們使用 arr.length=4 將陣列的大小更改為 4。它獲取了前 4 個元素,之後所有元素都被從陣列中刪除。
它有一個缺點,即我們只會獲得從起始索引 0 到給定大小的元素,這與 splice 不同,在 splice 中我們可以選擇定義起始和結束索引。
現在您可能會有一個疑問。如果我們分配的大小大於陣列長度會發生什麼?然後,在陣列大小之後,我們將獲得一個未定義的陣列元素。
示例 3
在下面的示例中,我們定義了一個長度為 7 的陣列,然後分配了一個大於陣列長度的大小。
<html> <body> <p id="result1"><p> <p id="result2"><p> <script> let arr = ["kalyan", "ashis", "anand", "sonu", "tirupati", "nagar", "arjun"]; arr.length=15 document.getElementById('result1').innerHTML=JSON.stringify(arr); document.getElementById('result2').innerHTML=arr[13]; </script> </body> </html>
在這裡,我們將陣列大小從 7 更改為 15,而沒有向陣列中新增元素。請注意,從索引 7 到 14 的元素為 null。
示例 4
使用Array slice()方法
在下面的示例中,我們使用陣列 slice() 方法來截斷陣列。Array slice() 方法不會更改原始陣列,它只會根據給定的引數返回元素。因此,我們需要將返回的元素儲存在一個變數中。
我們定義了一個包含七個元素的陣列。我們截斷了位置 3 之後的元素。
<html> <head> <title>Example- Truncate an array in JavaScript</title> </head> <body> <h3>Truncate an Array using slice() Method</h3> <p id="before">Array before truncate:<br></p> <p id="after">Array after truncate:<br></p> <script> let arr = ["kalyan", "ashis", "anand", "sonu", "tirupati", "nagar", "arjun"]; document.getElementById('before').innerHTML+=arr arr = arr.slice(0, 4); document.getElementById('after').innerHTML+=arr </script> </body> </html>
這裡 arr = arr.slice(0, 4); 0 是陣列的起始索引,4 是我們要擷取陣列的結束索引,在給定起始索引之前和結束索引之後的所有元素都將被刪除,然後我們將更新後的陣列分配給原始陣列。
If arr = arr.slice(2, 5); will be there then output will be Anand, sonu, tirupati
在本教程中,我們學習瞭如何使用陣列 splice() 和 slice() 方法以及 length 屬性來截斷 JavaScript 中的陣列。
資料結構
網路
關係型資料庫管理系統
作業系統
Java
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP