如何在 JavaScript 中清空数组?

front end technologyjavascriptweb development

本教程教我们在 JavaScript 中清空数组。在使用 JavaScript 编程时,程序员需要在很多情况下将数组清空。例如,程序员正在使用 JavaScript 进行竞赛编程。假设,为了解决某个问题,他们需要在每次调用函数时创建一个新数组或一个空数组。用户可以从以下示例中直观地看到这个问题。

function child ( ){
   // 创建一个新数组或使用单个数组,并在每次调用函数时将其清空
   }
   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 中,每个数组都有一个长度属性,该属性返回数组内的元素数量。如果我们将数组长度设为 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() // 从最后一个元素中删除元素。
array.shift() // 从第一个元素中删除元素。

示例

以下示例演示如何使用 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>使数组为空。</title>
</head>
<body>
   <h3>使用 Array.spilce() 方法在 JavaScript 中将数组清空。</h3>
   <h4>字符数组如下:</h4>
   <div id="initial"></div>
   <h4> 最终数组如下:</h4>
   <div id="final"></div>
   <script>
      let chars = ['T', 'u', 't', 'r', 'I', 'a', 'l', 's'];
      document.getElementById("initial").innerHTML = " [ " + chars + " ] ";
      // 使用 Array.spilce() 使数组为空。
      let n = chars.length;
      chars.splice(0, n);
      document.getElementById("final").innerHTML = " [ " + chars + " ] ";
   </script>
</body>
</html>

结论

在给出的四种方法中,第一种方法是最快的,第三种方法是使数组为空的最慢方法。由于我们需要在第三种方法中循环遍历整个数组,因此这是一种非常慢的方法。


相关文章