如何在JavaScript中清空数组?


2197

有没有一种方法可以清空数组.remove()

例如,

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

我该如何清空?


1
这是一个具有不同可能性的基准:jsben.ch
#

Answers:


4412

清除现有数组的方法A

方法一

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

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)。


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


183
while (A.length) { A.pop(); },无需> 0
Ivan Black

327
> 0更具可读性的恕我直言。两者之间没有性能差异。
菲利普·莱伯特

10
@daghan,不清楚您要说的是什么。b即使a分配了新数组,也保留对旧数组的引用。cd继续引用相同的数组。因此,预计会有产出差异。
shovavnik

9
@DiegoJancic方法#1不计数,因为它不会清除数组。它创建了一个新的。它不应该包含在基准中。
菲利普·莱伯特

44
如果while(A.pop())数组中的项目为假,则不能使用。例如,A = [2,1,0,-1,-2]将导致A等于[2,1]。甚至while(A.pop() !== undefined)不起作用,因为您可以将未定义的数组作为值之一。可能是编译器未对其进行优化的原因。
Jonathan Gawrych 2015年

2458

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

A.length = 0;

17
ECMAScript 5 Standard对此有何看法?
Pacerier 2011年

212
@Pacerier:它仍然可以在ES5中使用。从15.4节中:“ ...只要更改length属性,就会自动删除名称为数组索引且其值不小于新长度的每个属性”
Matthew Crumley

2
@einar:JavaScript数组始终会扩展以适合您放入其中的任何内容,因此在调用myarray.push(whatever)它时,它会增加一个长度。因此,设置长度会截断数组,但它不是永久的。
马修·克鲁姆利

12
@LosManos即使在严格模式下,它length也是一个特殊属性,但不是只读属性,因此它将仍然有效。
马修·克鲁姆利

11
@MattewCrumley我做了一些测试,似乎a.length = 0不能有效清除整个数组。jsperf.com/length-equal-0-or-new-array我想如果您有一个参考(并且您没有添加要保留的其他属性),则最好创建新的数组,并保留旧的垃圾收集器,将在适当的时候运行。
Paul Brewczynski 2013年

289

这里最快的落实工作,同时保持相同的阵列(“可变”):

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

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

FYI MapSet define clear()clear()对于Array也似乎是合乎逻辑的。

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


5
TT您的答案是唯一(同时)正确和快速但答案却少得多的答案。好吧,似乎人们喜欢缓慢的漂亮解决方案:/
obenjiro 2013年

@naomik但这是基本功能之一,默认情况下应该已经存在。
thefourtheye

7
@thefourtheye性能不错的解决方案,尽管我同意@naomik,但您不应修改本机对象。说这应该是重点,问题在于您正在修改globals,这很糟糕。如果您要提供代码供他人使用,那么它应该不会有不可预见的副作用。想象一下,如果另一个库进行了修改,Array.prototype并且所做的事情略有不同,那么整个代码[].clear()中的所有内容都是错误的。调试起来不会很有趣。因此,一般的信息是:不要修改全局变量。
jpillora 2013年

3
@thefourtheye不修改全局范围的全部要点是因为您将不知道别人的代码是否已经(或将要)使用该名称。我建议在本地范围内的功能。因此,在您应用程序/库的IIFE中,执行function clear(arr) { while(arr.length) arr.pop(); },然后使用clear(arr)而不是清除数组arr.clear()
jpillora

2
事实证明,此方法比.splice()和慢很多.length=0。基准不正确。看到我更新的答案。
Philippe Leybaert

216

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

A.splice(0, A.length);


49
为什么这种跨浏览器更友好?哪些浏览器对A.length有问题?
stricjux 2011年

4
@ jm2您所说的并不完全正确。它实际上修改了有问题的数组,随后所有引用都受到影响。参见我的jsFiddle上的测试:jsfiddle.net/shamasis/dG4PH
Shamasis Bhattacharya

3
@alex否,它不会,splice修改数组并返回删除的条目。首先阅读文档:developer.mozilla.org/en-US/docs/JavaScript/Reference/...
大卫HELLSING

3
我们可以使用逗号运算符防止返回结果数组:A.splice(0, A.length),0;。这将保持0原样的返回值A.length = 0;。仍然会创建结果数组,并且导致脚本运行速度更慢:(jsperf慢56%)。浏览器的实现会对此产生影响,尽管我认为没有理由splice会比设置更快length
埃文·肯尼迪

8
我还发现这A.splice(0)也行得通。
corwin.amber 2014年

97

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

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

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

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


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

  • 您不会带来新的功能,就好像您已经完成了要求的操作一样。
  • 相反,您清空垃圾箱。
  • 您不要用新的空罐替换装满的罐,也不要从装满的罐上取标签“ 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数组内容的代码。


11
建议解决方案的唯一问题是垃圾仍然存在,只是您更改了告示板说没有垃圾。对旧数组的引用仍然应该存在。您可以确定设置.length = 0时的垃圾收集器还会删除对数组及其属性的所有引用吗?我认为确实如此,但对我而言,这是不可思议的。至少可以避免使用.clear()方法来避免混淆。
毫米

8
我从未说过这种解决方案是错误的。问题在于,整个线程是完全不必要的。超过3000票的投票结果表明,试图找出最好的方法应该使它成为EMCA精打细算的开发人员添加这样一种方法的足够有效的案例。没有人应该去弄清楚它。有三种-四种不同的方法可以做到这一点。在某些基准测试中,长度解决方案比其他解决方案要慢得多。此外,对于任何合理的开发人员来说,设置.length = 0的想法都不是令人满意的。
毫米

2
因为要完成应有的工作,所以必须删除所有引用。.length = 0甚至都不是方法调用,因此,如果将其设置为0时还有其他动作(大多数浏览器中都通过define setter进行),我仍然认为实际上相信它按预期运行确实太神奇了去做。
毫米

7
因此,我宁愿自己清除它。可以将一种清晰的方法原型化,但这很丑陋。我的观点是,该实现应该已经存在,以便超过10,000个开发人员不必花费数小时仅阅读该线程,而不必考虑所有其他花费更多时间进行基准测试的人。
毫米

1
只有一种方法可以清空您的数组,用新的传入数据填充它并再次丢弃它。所有其他人要么不是,要么就是效率低下,并且对CPU的饥饿程度令人无法原谅。唯一可行的替代方法是A(n) = A.splice( 0, A.length );您需要备份以前的内容。ps Array.length是一个读写属性\方法,以防您错过了这个基本事实。意思是,您可以将其扩展为新的长度,不能将其修剪为所需的任何长度,除其他外,还可以通过将其长度缩短为0来丢弃所有成员。这是数组的瑞士刀。
Bekim Bacaj

63

性能测试:

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

9
添加百分比更改不会引起太多使用,也不会引起您平台的注意。在我的机器上,Chrome 34中的pop播放速度非常慢,但实际上比最新的Firefox中的[]慢。
Matt Styles 2014年

2
在Windows NT 6.3 64位的Firefox 39.0 32位中进行测试时,a = []最快!
Reza-S4

5
在Chrome下,此测试结果中肯定有一些问题。到底该弹出循环如何比其他3个解决方案快得多?
chqrlie

9
@chqrlie不是。这是最慢的方法。基准测试有缺陷。
Philippe Leybaert '16

15
请删除此答案,因为它是错误的,并链接到无意义的有缺陷的测试作为伪造证据。
詹姆斯·韦克菲尔德

35

您可以将其添加到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),我倾向于同意。在决定如何处理时,请谨慎使用。


1
@naomik您能解释为什么不赞成这样做的原因吗?
2013年

17
修改诸如Array和String之类的JavaScript基本函数是“不可思议的”。您可能重载了一个已经存在的函数并破坏了该对象类。可能有一个晦涩的javascript引擎已经具有clear(),并希望它表现出不同的方式。我只说轻便的踩一下。
由Adrian设计,2014年

在数组成员上进行foreach突然突然开始包含clear键的问题怎么样?
ErikE 2015年


19

关于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是清除阵列的最快方法(没有[]考虑,因为虽然这是最快的,但实际上并未清除现有阵列)。


很好点!我将使用正确的基准测试结果更新原始答案。
菲利普·莱巴特

我无法相信没有人发现该基准错误。观看次数超过一百万,您会期望有人注意到它。Diadistis的出色作品-Philippe Leybaert
2015年

15

如果您对内存分配感兴趣,可以使用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与其他基本类型不同,其管理字符串的方式更不用说对象数组了。类型可能会影响发生的情况。


15

您可以轻松创建一个函数来为您执行此操作,更改长度,甚至将其添加到本机Array作为remove()函数以供重用。

假设您有以下数组:

var arr = [1, 2, 3, 4, 5]; //the array

好的,只需运行以下命令:

arr.length = 0; //change the length

结果是:

[] //result

清空数组的简单方法...

也可以使用循环,这不是必需的,而只是另一种方式:

/* could be arr.pop() or arr.splice(0)
don't need to return as main array get changed */

function remove(arr) {
  while(arr.length) {
    arr.shift(); 
  }
}

您还可以考虑一些棘手的方法,例如:

arr.splice(0, arr.length); //[]

因此,如果arr有5个项目,它将从0拼接5个项目,这意味着数组中将不存在任何内容。

还可以使用其他方法,例如简单地重新分配数组:

arr = []; //[]

如果您看一下Array函数,还有许多其他方法可以做到这一点,但是最推荐的方法可能是更改长度。

正如我首先说的,您还可以原型remove(),因为它是您问题的答案。您只需选择上述方法之一,然后将其原型化为JavaScript中的Array对象,例如:

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

并且您可以像这样简单地调用它以清空javascript应用程序中的任何数组:

arr.remove(); //[]

arr.length = 0; //更改长度
Ajay Malhotra,

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

并称之为: array.clear();


77
请不要鼓励修改本机对象。
谢谢您

21
为什么人们倾向于抓住已接受的答案并将其放入原型函数中?您实际上在项目中这样做吗?您是否在每个项目中都包含一个庞大的原型添加库?
nurettin

4
为什么不只输入array.length = 0?
由Adrian设计,2014年

10
@naomik “请不要鼓励修改本机对象。” -我完全同意这一点,但是仅仅重复句子本身就显得很自大。提出这样一种解决方案的人可能不会意识到后果,因此在其上面加上这句话而不是提供简短的解释或链接不会传达任何含义,除了“我们,比您聪明的人,告诉您不要这样做,因为我们知道得更多”
John Weisz


12

A.splice(0);

我只是在我正在处理的某些代码上执行过此操作。它清除了数组。


不,您只是将命名数组容器与新创建的匿名容器交换了。var A = [1,2,3,4]; var B; B = A.splice(0); console.log(A); console.log(B); '
Bekim Bacaj

12

如果您正在使用

a = []; 

然后,您要为a分配新的数组引用,如果a中的引用已经分配给任何其他变量,则它也不会清空该数组,因此垃圾收集器将不会收集该内存。

对于前。

var a=[1,2,3];
var b=a;
a=[];
console.log(b);// It will print [1,2,3];

要么

a.length = 0;

当我们指定时a.length,我们只是在重置数组的边界,其余数组元素的内存将由垃圾收集器连接。

代替这两种解决方案更好。

a.splice(0,a.length)

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

根据kenshou.html的先前答案,第二种方法更快。


10
除了弄错了a.length,我看不到这个新答案为线程增加了什么?
Bergi 2014年

@Bergi我只想关注数组的实际内存表示形式
Laxmikant

您是否有任何来源可以确认执行时哪些JS引擎将创建一个新数组a.length=0;?这些引擎将如何行事a.length=500;a.length=4;
joeytwiddle

我在大多数浏览器(如IE,Firefox,Chrome)上都尝试过,它正在创建新数组。如果将长度设置为大于0,则它将创建一个包含未定义元素的数组,即它将仅保存一些内存位置。
Laxmikant Dange 2014年

1
var a = [1]; var b = a; a.length = 0; console.log(b)prints Array [ ],所以似乎并没有为我创建一个新数组。
约翰·蒙哥马利

9

使用Jan最初建议的修改版本:

var originalLength = A.length;
for (var i = originalLength; i > 0; i--) {
     A.pop();
}

12
你为什么要这样做?为什么还要再添加两个变量和一堆代码来做同样的事情?
Killah 2014年


5

在此处输入图片说明

要清空阵列的当前内存位置,请使用:'myArray.length = 0''myArray.pop() UN-till its length is 0'

  • length:您可以设置length属性以随时截断数组。通过更改数组的length属性扩展数组时,实际元素的数量会增加。
  • pop() :pop方法从数组中删除最后一个元素,并返回返回删除的值。
  • shift():shift方法将移除零位索引处的元素,并将连续索引处的值向下移位,然后返回移除的值。

例:

var arr = ['77'];
arr.length = 20;
console.log("Increasing : ", arr); // (20) ["77", empty × 19]
arr.length = 12;
console.log("Truncating : ", arr); // (12) ["77", empty × 11]

var mainArr = new Array();
mainArr = ['1', '2', '3', '4'];

var refArr = mainArr;
console.log('Current', mainArr, 'Refered', refArr);

refArr.length = 3;
console.log('Length: ~ Current', mainArr, 'Refered', refArr);

mainArr.push('0');
console.log('Push to the End of Current Array Memory Location \n~ Current', mainArr, 'Refered', refArr);

mainArr.poptill_length(0);
console.log('Empty Array \n~ Current', mainArr, 'Refered', refArr);

Array.prototype.poptill_length = function (e) {
  while (this.length) {
    if( this.length == e ) break;

    console.log('removed last element:', this.pop());
  }
};

  • new Array() | [] 使用Array constructor或创建具有新内存位置的数组array literal

    mainArr = []; // a new empty array is addressed to mainArr.
    
    var arr = new Array('10'); // Array constructor
    arr.unshift('1'); // add to the front
    arr.push('15'); // add to the end
    console.log("After Adding : ", arr); // ["1", "10", "15"]
    
    arr.pop(); // remove from the end
    arr.shift(); // remove from the front
    console.log("After Removing : ", arr); // ["10"]
    
    var arrLit = ['14', '17'];
    console.log("array literal « ", indexedItem( arrLit ) ); // {0,14}{1,17}
    
    function indexedItem( arr ) {
        var indexedStr = "";
        arr.forEach(function(item, index, array) {
            indexedStr += "{"+index+","+item+"}";
            console.log(item, index);
        });
        return indexedStr;
    }
  • slice() :通过使用slice函数,我们从原始数组中获得了具有新存储器地址的浅表元素副本,从而对cloneArr进行的任何修改都不会影响实际数组。

    var shallowCopy = mainArr.slice(); // this is how to make a copy
    
    var cloneArr = mainArr.slice(0, 3); 
    console.log('Main', mainArr, '\tCloned', cloneArr);
    
    cloneArr.length = 0; // Clears current memory location of an array.
    console.log('Main', mainArr, '\tCloned', cloneArr);

“ length:弹出直到数组的长度达到指定的大小。” 谁告诉你这个废话?
Bekim Bacaj

@BekimBacaj本质上,它具有相同的效果。它可能应该说length = ?而不是仅仅说length
Tuupertunut

@BekimBacaj我已经更新了我的答案,我只是假设长度突然变长,但是现在我改正了,长度只是截断或增加了数组的大小。
Yash

3

我很惊讶还没有人建议这样做:

let xs = [1,2,3,4];
for (let i in xs)
    delete xs[i];

这将产生与其他解决方案完全不同的状态的数组。从某种意义上说,该数组已被“清空”:

xs
=> Array [ <4 empty slots> ]

[...xs]
=> Array [ undefined, undefined, undefined, undefined ]

xs.length
=> 4

xs[0]
=> ReferenceError: reference to undefined property xs[0]

您可以使用[,,,,]或生成等效数组Array(4)


7
这可能是一个不同问题的好答案:“如何将数组中的所有元素转换为未定义的元素”。
鲁宾

尽管在内部,未定义的元素和空的插槽(“孔”)之间存在差异
Cauterite

-9

如果需要清空Angular 2+ FormArray,请在下面使用。

public emptyFormArray(formArray:FormArray) {
    for (let i = formArray.controls.length - 1; i >= 0; i--) {
        formArray.removeAt(i);
    }
}

10
这是无关紧要的,甚至不是JavaScript。
Emile Bergeron
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.