如何在 JavaScript 中清空数组?

有没有一种方法可以清空数组,如果可以的话,可以使用.remove()吗?

例如,

A = [1,2,3,4];

我该如何清空?

答案

清除现有数组A

方法 1

(这是我对问题的原始回答)

A = [];

此代码会将变量A设置为新的空数组。如果您在其他任何地方都没有引用原始数组A则这是完美的选择,因为这实际上会创建一个全新的(空)数组。您应谨慎使用此方法,因为如果您从另一个变量或属性引用了此数组,则原始数组将保持不变。仅当仅通过其原始变量A引用该数组时,才使用它。

这也是最快的解决方案。

此代码示例显示使用此方法时可能遇到的问题:

var arr1 = ['a','b','c','d','e','f'];
var arr2 = arr1;  // Reference arr1 by another variable 
arr1 = [];
console.log(arr2); // Output ['a','b','c','d','e','f']

方法 2 (由Matthew Crumley 建议

A.length = 0

这将通过将其长度设置为 0 来清除现有数组。有人认为这可能不适用于 JavaScript 的所有实现,但事实并非如此。当在 ECMAScript 5 中使用 “严格模式” 时,它也可以工作,因为数组的 length 属性是读 / 写属性。

方法 3 (由Anthony 建议

A.splice(0,A.length)

使用.splice()可以完美地工作,但是由于.splice()函数将返回包含所有已删除项目的数组,因此它实际上将返回原始数组的副本。基准表明,这对性能没有任何影响。

方法 4 (由tanguy_k 建议

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

该解决方案不是很简洁,它也是最慢的解决方案,与原始答案中引用的早期基准相反。

性能

在清除现有数组的所有方法中,方法 2 和 3 在性能上非常相似,并且比方法 4 快得多。请参阅此基准测试

正如Diadistis在下面的回答中所指出的那样,用于确定上述四种方法的性能的原始基准存在缺陷。原始基准测试重复使用了已清除的数组,因此第二次迭代将清除已经为空的数组。

以下基准测试可修复此缺陷: http : //jsben.ch/#/hyj65 。它清楚地表明方法#2(长度属性)和#3(拼接)是最快的(不计算不会改变原始数组的方法#1)。


这一直是一个热门话题,并且引起了很多争议。实际上有许多正确答案,并且由于很长一段时间以来该答案都已被标记为可接受答案,因此我将在此处介绍所有方法。如果您对此答案投赞成票,请同时投票赞成我引用的其他答案。

如果您需要保留原始数组,因为还有其他对它的引用也应更新,则可以通过将其长度设置为零来清除它而无需创建新数组:

A.length = 0;

这里是最快的实现,同时保留了相同的数组 (“可变”):

function clearArray(array) {
  while (array.length) {
    array.pop();
  }
}

仅供参考,它不能简化为while (array.pop()) :测试将失败。

FYI MapSet定义clear() ,对于Array也具有clear()似乎是合乎逻辑的。

TypeScript 版本:

function clearArray<T>(array: T[]) {
  while (array.length) {
    array.pop();
  }
}

相应的测试:

describe('clearArray()', () => {
  test('clear regular array', () => {
    const array = [1, 2, 3, 4, 5];
    clearArray(array);
    expect(array.length).toEqual(0);
    expect(array[0]).toEqual(undefined);
    expect(array[4]).toEqual(undefined);
  });

  test('clear array that contains undefined and null', () => {
    const array = [1, undefined, 3, null, 5];
    clearArray(array);
    expect(array.length).toEqual(0);
    expect(array[0]).toEqual(undefined);
    expect(array[4]).toEqual(undefined);
  });
});

这里是更新的 jsPerf: http : //jsperf.com/array-destroy/32 http://jsperf.com/array-destroy/152

跨浏览器更友好,更优化的解决方案将是使用splice方法清空数组 A 的内容,如下所示:

A.splice(0, A.length);

到目前为止,至少有 2739 票赞成的答案具有误导性和不正确性。

问题是:“如何清空现有阵列?” 例如,对于A = [1,2,3,4]

  1. 说 “ A = []是答案” 是无知的,而且绝对不正确。 [] == []false

    这是因为这两个数组是两个单独的,独立的对象,它们具有自己的两个标识,在数字世界中占据了自己的空间,每个空间都是自己的。


假设您的母亲要您清空垃圾桶。

  • 您不会带来新的功能,就好像您已经完成了要求的操作一样。
  • 相反,您清空垃圾箱。
  • 您不要用新的空罐替换装满的罐,也不要从装满的罐中取标签 “A” 并将其粘贴到新的罐上,如A = [1,2,3,4]; A = [];

清空数组对象是最简单的事情:

A.length = 0;

这样,“A” 下的罐不仅是空的,而且还像新的一样干净!


  1. 此外,在罐头变空之前,无需手动清除垃圾!您被要求一次完全清空现有的一个,直到罐头变空之前不要捡垃圾,如下所示:

    while(A.length > 0) {
        A.pop();
    }
  2. 同样,也不要将左手放在垃圾箱的底部,而将右手放在垃圾箱的顶部,以便将其内容拉出,如下所示:

    A.splice(0, A.length);

不,您被要求清空它:

A.length = 0;

这是唯一可以正确清空给定 JavaScript 数组内容的代码。

性能测试:

http://jsperf.com/array-clear-methods/3

a = []; // 37% slower
a.length = 0; // 89% slower
a.splice(0, a.length)  // 97% slower
while (a.length > 0) {
    a.pop();
} // Fastest

您可以将其添加到 JavaScript 文件中,以 “清除” 数组:

Array.prototype.clear = function() {
    this.splice(0, this.length);
};

然后,您可以像这样使用它:

var list = [1, 2, 3];
list.clear();

或者,如果您想确保自己不破坏某些东西:

if (!Array.prototype.clear) {
    Array.prototype.clear = function() {
       this.splice(0, this.length);
    };
}

许多人认为您不应该修改本机对象(例如 Array),我倾向于同意。请谨慎决定如何处理此问题。

关于 while 的信息有很多混乱和误导;在回答和评论中都表现出流行 / 移位的表现。 while / pop 解决方案具有(预期的) 最差的性能 。实际发生的情况是,对于循环运行摘要的每个样本,安装程序仅运行一次。例如:

var arr = [];

for (var i = 0; i < 100; i++) { 
    arr.push(Math.random()); 
}

for (var j = 0; j < 1000; j++) {
    while (arr.length > 0) {
        arr.pop(); // this executes 100 times, not 100000
    }
}

我创建了一个可以正常运行的新测试:

http://jsperf.com/empty-javascript-array-redux

警告:即使在此版本的测试中,您实际上也看不到真正的区别,因为克隆阵列会占用大部分测试时间。它仍然显示splice是清除数组的最快方法(不考虑[]因为虽然最快,但实际上并未清除现有数组)。

如果您对内存分配感兴趣,可以使用jsfiddle 之类的东西与 chrome dev 工具的 “时间轴” 标签相比较,比较每种方法。您将需要使用底部的垃圾桶图标 “清除” 阵列后强制进行垃圾收集。这应该为您选择的浏览器提供更明确的答案。这里有很多答案很老,我不会依赖它们,而是像上面 @tanguy_k 的答案一样进行测试。

(有关上述标签的介绍,您可以在此处查看

Stackoverflow 迫使我复制 jsfiddle,因此它是:

<html>
<script>
var size = 1000*100
window.onload = function() {
  document.getElementById("quantifier").value = size
}

function scaffold()
{
  console.log("processing Scaffold...");
  a = new Array
}
function start()
{
  size = document.getElementById("quantifier").value
  console.log("Starting... quantifier is " + size);
  console.log("starting test")
  for (i=0; i<size; i++){
    a[i]="something"
  }
  console.log("done...")
}

function tearDown()
{
  console.log("processing teardown");
  a.length=0
}

</script>
<body>
    <span style="color:green;">Quantifier:</span>
    <input id="quantifier" style="color:green;" type="text"></input>
    <button onclick="scaffold()">Scaffold</button>
    <button onclick="start()">Start</button>
    <button onclick="tearDown()">Clean</button>
    <br/>
</body>
</html>

您应该注意,它可能取决于数组元素的类型,因为 javascript 与其他基本类型不同,其管理字符串的方式不同,更不用说对象数组了。类型可能会影响发生的情况。

Array.prototype.clear = function() {
    this.length = 0;
};

并称之为: array.clear();