如何在 JavaScript 中清空陣列?


本教程將教會我們如何在 JavaScript 中清空陣列。在使用 JavaScript 進行程式設計時,程式設計師需要在許多情況下清空陣列。例如,編碼人員正在使用 JavaScript 進行競賽程式設計。假設,為了解決某些問題,他們需要在每次呼叫函式時建立一個新的或空的陣列。使用者可以從下面的示例中直觀地瞭解此問題。

function child ( ){
   // create a new array or use a single array and make it empty every time function invokes
   }
   function parent ( ) {
      for ( int i=0; i< 10; i++ ) {
         Child ( );
      }
   }

在上面的示例中,如果編碼人員每次都建立一個新陣列,則其程式碼效能將會下降。

為了克服類似上述的問題,我們在本教程中解釋了不同的方法。

  • 分配新的空陣列

  • 將陣列長度設定為零

  • 使用 pop() 和 shift() 方法

  • 使用 splice() 方法

分配新的空陣列

在這種方法中,我們將新的**空陣列**`[ ]`分配給陣列以使其為空。分配空陣列是使陣列為空最快且最常用的方法。但是,如果使用者已獲取引用來建立陣列,它將僅更新當前陣列,而不是他們獲取引用的父陣列。

語法

使用者可以遵循以下語法來使用此方法。

let array = ["welcome", "to", "the", "TutorialsPoint"];
array = [ ];

示例

在此示例中,我們將檢視基本的 JavaScript 程式碼,透過將其分配給空陣列來清空陣列。

<!DOCTYPE html>
<html>
<head>
   <title>Make an array.</title>
</head>
<body>
   <h2>Make an array empty by assigning new empty array.</h2>
   <h4>Initial array as follows:</h4>
   <div id="Initial"></div>
   <h4> Final array as follows:</h4>
   <div id="Final"></div>
   <script>
      let Initial = document.getElementById("Initial");
      let Final = document.getElementById("Final");
      let arr = ["welcome", "to", "the", "TutorialsPoint"];
      Initial.innerHTML = " [ " + arr + " ] ";
      arr = []; // making array empty
      Final.innerHTML = " [ " + arr + " ] ";
   </script>
</body>
</html>

在以上輸出中,使用者可以看到,在將空陣列分配給當前陣列後,它就變為空了。

將陣列長度設定為零

在 JavaScript 中,每個陣列都有一個 length 屬性,該屬性返回陣列中元素的數量。如果我們將陣列長度設定為 0,則陣列將不包含任何元素,並且我們可以實現將陣列清空的目標。

語法

使用者可以遵循以下語法來使用陣列長度屬性並將其設定為 0。

let array = ["welcome", "to", "the", "TutorialsPoint"];
array.length = 0;

示例

在此示例中,我們將編寫 JavaScript 程式碼,透過將其長度設定為零來清空陣列。

<html>
<head>
   <title>Make an array empty.</title>
</head>
<body>
   <h3>Make an array empty in JavaScript by making array length 0.</h3>
   <h4>Initial array: </h4>
   <div id="Initial"></div>
   <h4> Final array: </h4>
   <div id="Final"></div>
   <script type="text/javascript">
      let Initial = document.getElementById("Initial");
      let Final = document.getElementById("Final");
      let array = ["TutorialsPoint", "is", "the", "computer", "science", "portal."];
      Initial.innerHTML = " [ " + array + " ] ";
      array.length = 0; // making array empty by making length 0.
      Final.innerHTML = " [ " + array + " ] ";
   </script>
</body>
</html>

使用 pop() 和 shift() 方法

我們可以將**pop()** 和**shift()** 方法應用於 JavaScript 中的陣列。Array.pop() 方法從末尾刪除單個元素,而 Array.shift() 方法從開頭刪除元素。使用此方法,我們將逐一刪除陣列中的元素,直到陣列變為空。

語法

使用者可以遵循以下語法來使用Array.pop()Array.shift() 方法。

let array = [ 10, 20, 30, 100, 200, 300 ];
array.pop( ) // removes element from the last.
array.shift( ) //removes element from the first.

示例

以下示例演示瞭如何使用array.pop() 方法清空陣列。我們將執行 while 迴圈並從陣列中彈出單個元素,直到陣列變為空。

<html>
<head>
   <title>Make an array empty.</title>
<head>
<body>
   <h3>Make an array empty in JavaScript by using the Array.pop() method.</h3>
   <h4>Original Array of numbers:</h4>
   <div id="Initial"></div>
   <h4> Empty array: </h4>
   <div id="Final"></div>
   <script type="text/javascript">
      let numbers = [10, 20, 30, 100, 200, 300];
      document.getElementById("Initial").innerHTML = " [ " + numbers + " ] ";
      // making array empty using Array.pop().
      let n = numbers.length; // length of the array
      while (n--) {
         numbers.pop();
      }
      document.getElementById("Final").innerHTML = " [ " + numbers + " ] ";
   </script>
</body>
</html>

使用 splice() 方法

在這種方法中,我們將使用**splice()** 方法清空陣列。splice() 方法有助於從 JavaScript 中的列表或陣列中刪除元素。我們將使用splice() 方法刪除陣列中的所有元素。

語法

以下是使用splice() 方法並刪除陣列中所有元素的語法。

let chars = [ ‘T’, ‘u’, ‘t’, ‘r’, ‘I’, ‘a’, ‘l’, ‘s’ ];
let n = array.length;
chars.splice( start_index, n );

引數

splice() 方法接受兩個引數。

  • **strart_index** - 它是起始索引,我們希望從該索引開始刪除陣列元素。

  • **n** - 它是我們需要從起始索引刪除的元素數量。

示例

<html>
<head>
   <title>Make an array empty.</title>
</head>
<body>
   <h3>Make an array empty in JavaScript by using the Array.spilce() method.</h3>
   <h4>Array of chars as follow:</h4>
   <div id="initial"></div>
   <h4> Final array as follow:</h4>
   <div id="final"></div>
   <script>
      let chars = ['T', 'u', 't', 'r', 'I', 'a', 'l', 's'];
      document.getElementById("initial").innerHTML = " [ " + chars + " ] ";
      // making array empty using Array.spilce().
      let n = chars.length;
      chars.splice(0, n);
      document.getElementById("final").innerHTML = " [ " + chars + " ] ";
   </script>
</body>
</html>

結論

在給定的四種方法中,第一種方法最快,第三種方法最慢,用於清空陣列。由於我們需要在第三種方法中遍歷整個陣列,因此它是一種非常慢的方法。

更新於:2022-07-20

438 次瀏覽

開啟你的 職業生涯

透過完成課程獲得認證

立即開始
廣告

© . All rights reserved.