如何通过单击按钮清除javascript中数组的内容？

Question

我有许多按钮，单击这些按钮可以将单词添加到数组中。该数组用于 url 名称中以下载文件：

 <button id="button9" onclick="myFunction7();"</button>

 <script>
 var a = []; 
 function myFunction7() { 
 a.push("h"); 
 }

 <button id="button10" onclick="myFunction8();"</button>

 <script>
 var b = []; 
 function myFunction8() { 
 b.push("h"); 
 } 


 var url = [a,b,c,d];

（我刚刚包含了两个按钮，它们也以相同的格式存在于 c、d 中）

按钮的功能有效并加载了正确的文件。有没有办法重置 url 变量并清空数组？我想要一个按钮来重置我网页上的 url 变量，以便可以创建一个新数组。我创建了一个刷新整个页面的按钮，但这并不理想，因为每次我的网页都必须重新加载以清除数组！

Answer 1

关于这个问题，我想讨论两个想法和概念。

概念 1：

在 ES6 (ECMAScript 2015) 中，我们主要使用 const 关键字声明数组和对象。

const url = ['a','b','c','d'];

在这种情况下，如果我们直接尝试使用url=[] 清除数组，我们会得到一个错误，看起来像这样。

script.js:96 Uncaught TypeError：赋值给常量变量。 在 HTMLImageElement.flipcard (script.js:96)

我们可以用来清除数组内容的另一种方法是使用可用于每个数组的 pop() 方法。

while(url.length>0){
 url.pop();
}

概念 2：

如果我们直接做url=[]，我们基本上是给同一个变量url分配了一个空数组，而旧数组['a','b','c','d']在内存堆中的某个地方漫游 strong> 但没有任何引用变量指向它。 由于数组是 javascript 中的对象，我们不认为在我们的程序中让对象指向任何对象不是一个好习惯。因为这可能会导致我们程序中称为MEMORY LEAKS的概念。

注意： 通过在数组上使用 pop() 方法，我们基本上是在更改相同的数组 url 本身，而无需重新分配它，这样我们也停止了 内存泄漏。

下面是完整的 js 程序关于如何做到这一点：

var url = ['a', 'b', 'c', 'd'];
console.log(url) // added for example

function clearArray() {
  while(url.length>0){
    url.pop();
 }
  return url;
}
function getArray() {
  return console.log(url)
}

console.log("clearArray function return back an empty array :",clearArray());

Answer 2

要清除数组，只需将其重新声明为空数组url = []

var url = ['a', 'b', 'c', 'd'];
console.log(url) // added for example

function clearArray() {
  return url = []
}
function getArray() {
  return console.log(url)
}

<button onclick="clearArray(); alert('Array cleared. Now click getArray() button')">Clear Array</button>
<button onclick="getArray()">Get Array</button> <!-- click me after clearing the array -->