如何在 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() 方法
我們可以在 JavaScript 中對陣列應用**pop()** 和**shift()** 方法。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() 方法接受兩個引數。
**startIndex** − 這是我們想要開始刪除陣列元素的起始索引。
**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>結論
在給定的四種方法中,第一種方法最快,而第三種方法最慢。因為我們需要在第三種方法中遍歷整個陣列,所以它是一種非常慢的方法。
資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP