如何在 JavaScript 中清空数组？

【问题标题】：How do I empty an array in JavaScript?如何在 JavaScript 中清空数组？
【发布时间】：2010-11-16 22:50:12
【问题描述】：

有没有办法清空数组，如果可以的话，可以使用.remove()？

例如，

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

我怎样才能清空它？

【问题讨论】：

标签： javascript arrays


【解决方案1】：

清除现有数组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']

方法二（如suggested by Matthew Crumley）

A.length = 0

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

方法3（作为suggestedAnthony）

A.splice(0,A.length)

使用.splice() 可以完美运行，但由于.splice() 函数将返回一个包含所有已删除项的数组，它实际上将返回原始数组的副本。基准表明这对性能没有任何影响。

方法4（如suggested by tanguy_k）

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

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

性能

在清除现有数组的所有方法中，方法 2 和 3 在性能上非常相似，并且比方法 4 快很多。请参阅benchmark .

正如Diadistis 在下面的answer 中指出的那样，用于确定上述四种方法性能的原始基准存在缺陷。原始基准重用了清除的数组，因此第二次迭代清除了一个已经为空的数组。

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

这是一个热门话题，也引起了很多争议。其实正确的答案很多，因为这个答案已经被标记为接受的答案很长时间了，我将所有的方法都包括在这里。

【讨论】：

  • while (A.length) { A.pop(); }，不需要> 0
  • > 0 恕我直言更具可读性。并且两者之间没有性能差异。
  • @daghan，完全不清楚你想说什么。 b 保留对旧数组的引用，即使在 a 被分配了一个新数组之后。 c 和 d 继续引用同一个数组。因此，预计会出现输出差异。
  • @DiegoJancic 方法 #1 不算数，因为它不会清除数组。它创造了一个新的。它不应包含在基准测试中。
  • 您不能使用while(A.pop())，以防数组中的项目是假的。例如，A = [2, 1, 0, -1, -2] 将导致 A 等于 [2, 1]。即使while(A.pop() !== undefined) 也不起作用，因为您可以拥有一个未定义的数组作为值之一。可能是编译器没有优化它的原因。
【解决方案2】：

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

A.length = 0;

【讨论】：

  • ECMAScript 5 标准对此有何评论？
  • @Pacerier：它在 ES5 中仍然有效。从第 15.4 节：“...每当更改长度属性时，名称为数组索引且值不小于新长度的每个属性都会自动删除”
  • @LosManos 即使在严格模式下，length 也是一个特殊属性，但不是只读的，所以它仍然可以工作。
  • @MattewCrumley 我做了一些测试，似乎 a.length = 0 不能有效地清除整个数组。 jsperf.com/length-equal-0-or-new-array 我认为如果您有一个引用（并且您没有添加要保留的额外属性），最好创建新数组，并将旧数组留给垃圾收集器，它将在适当的时候运行。跨度>
  • @jollarvia ECMAScript 规范要求删除超过新长度的元素，因此任何正确的实现都会使任何不可访问的元素成为垃圾回收。这并不一定意味着他们会立即缩小实际阵列的存储空间。具体来说，V8 仅在新长度小于原始长度的一半时才重新分配数组，但将长度设置为零实质上是在幕后重新分配新数组。
【解决方案3】：

一个更跨浏览器友好和更优化的解决方案是使用splice方法来清空数组A的内容，如下所示：

A.splice(0, A.length);

【讨论】：

  • 为什么这对跨浏览器更友好？哪些浏览器对 A.length 有问题？
  • @jm2 你所说的并不完全正确。它实际上修改了有问题的数组，随后所有引用都会受到影响。在我的 jsFiddle 上查看测试：jsfiddle.net/shamasis/dG4PH
  • @alex 不，它没有，splice 修改数组并返回已删除的条目。先阅读文档：developer.mozilla.org/en-US/docs/JavaScript/Reference/…
  • 我们可以通过使用comma operator: A.splice(0, A.length),0; 来阻止返回的结果数组。这将留下0 的返回值，就像A.length = 0; 一样。结果数组仍在创建中，应该导致脚本运行速度变慢：（jsperf 慢约 56%）。浏览器实现会影响这一点，尽管我看不出为什么splice 会比设置length 更快。
  • 我还发现 A.splice(0) 也可以。
【解决方案4】：

您可以将其添加到您的 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);
    };
}

很多人认为您不应该修改原生对象（如数组），我倾向于同意。请谨慎决定如何处理。

【讨论】：

  • @naomik 你能解释一下你为什么不赞成这样做吗？
  • 修改 Array 和 String 等 javascript 原始函数是“不受欢迎的”。您可能正在重载已经存在的函数并丢弃对象类。可能有一个晦涩的 JavaScript 引擎，它已经具有 clear() 并期望它以不同的方式运行。我只说小心行事。
  • 对数组成员执行 foreach 会突然开始包含 clear 键的问题怎么样？
  • 作为参考：Why is extending native objects a bad practice?
【解决方案5】： 
Array.prototype.clear = function() {
    this.length = 0;
};

并称它为：array.clear();

【讨论】：

  • 请不要鼓励修改原生对象。
  • 为什么人们会有这种倾向去获取已接受的答案并将其放入原型函数中？你真的在你的项目中这样做吗？您是否在每个项目中都包含一个庞大的原型添加库？
  • 为什么不直接输入array.length = 0？
  • @naomik “请不要鼓励修改原生对象。” -- 我完全同意这一点，但只是重复这句话本身就会显得傲慢。提出这种解决方案的人可能没有意识到后果，并且将这一行放在他们身上，而不是提供简短的解释或链接，除了 “我们，比你聪明的人，告诉你不要这样做，因为我们更了解”.
  • 作为参考：Why is extending native objects a bad practice?
【解决方案6】：

这是最快的工作实现，同时保持相同的数组（“可变”）：

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

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

仅供参考 Map 和 Set 定义 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/152p>

jsPerf 离线。类似基准：https://jsben.ch/hyj65

【讨论】：

  • TT 您的答案是唯一正确且快速（同时）但“赞成票”少得多的答案。好吧，似乎人们喜欢慢的漂亮解决方案：/
  • @naomik 但这是基本功能之一，默认情况下应该有。
  • @thefourtheye 良好的性能解决方案，虽然我同意@naomik，但您不应该修改本机对象。说它应该存在是题外话，问题是您正在修改 globals，这很糟糕。如果您将代码提供给其他人使用，那么它应该没有不可预见的副作用。想象一下，如果另一个库 也 修改了 Array.prototype 并且它做了一些稍微不同的事情，那么整个代码 [].clear() 都略有错误。调试起来不会很有趣。所以，一般信息是：不要修改全局变量。
  • @thefourtheye 不修改全局范围的全部意义在于，你不会知道其他人的代码是否已经（或将要）使用该名称。我建议在本地范围内使用一个函数。因此，在您的应用程序/库的IIFE 中，执行function clear(arr) { while(arr.length) arr.pop(); }，然后使用clear(arr) 而不是arr.clear() 清除数组。
  • 事实证明这个方法比.splice()和.length=0慢很多。基准不正确。请参阅我的更新答案。
【解决方案7】：

使用Jan最初建议的修改版：

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

特塞尔：

for (let i = A.length; i > 0;A.pop(),i--) {}

或者这是另一种观点：

while(!A[Symbol.iterator]().next().done)A.shift()

【讨论】：

  • 你为什么要做这样的事情？为什么要再添加两个变量和一堆代码来做同样的事情？
【解决方案8】：

如果您对内存分配感兴趣，您可以使用 this jsfiddle 之类的内容以及 chrome 开发工具的时间线选项卡来比较每种方法。您将需要使用底部的垃圾桶图标在“清除”阵列后强制进行垃圾收集。这应该为您选择的浏览器提供更明确的答案。这里的很多答案都是旧的，我不会依赖它们，而是像上面@tanguy_k 的答案那样进行测试。

（有关上述标签的介绍，您可以查看here）

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 管理字符串的方式与其他原始类型不同，更不用说对象数组了。类型可能会影响发生的情况。

【讨论】：

    【解决方案9】：

    A.splice(0);

    我只是在我正在处理的一些代码上这样做了。它清除了数组。

    【讨论】：

    • 不，你刚刚用一个新创建的匿名数组容器交换了一个命名数组容器。 `var A = [1,2,3,4];变种 B; B = A.splice(0);控制台.log(A);控制台.log(B); '
    • @BekimBacaj 不，splice 改变原始数组并返回一个新数组。返回的结果被忽略。答案是正确的（但多余，因为这已经被无数次建议过了，多年前，已经）。
    【解决方案10】：

    性能测试：

    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

    【讨论】：

    • 如果不注意您的平台，添加百分比更改并没有多大用处。在我的机器上 pop 在 Chrome 34 中只是稍微快一点，但实际上比最新的 Firefox 中的 [] 慢。
    • 在 Firefox 39.0 32-bit 在 Windows NT 6.3 64-bit 上测试，a=[] 是最快的！
    • 这个Chrome下的测试结果肯定有问题。弹出循环怎么能比其他 3 种解决方案快得多？
    • @chqrlie 不是。这是最慢的方法。基准测试存在缺陷。
    • 请删除此答案，因为它是错误的，并链接到一个毫无意义的有缺陷的测试作为假证据。
    【解决方案11】：

    如果你正在使用

    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 之前的回答，第二种方法更快。

    【讨论】：

    • 除了a.length 上的错误之外，我没有看到这个新答案在线程中添加了什么？
    • @Bergi 我只想关注关于数组的实际内存表示
    • 您是否有任何消息来源可以确认在执行a.length=0; 时哪些JS 引擎将创建一个新数组？这些引擎将如何作用于a.length=500; 和a.length=4;？
    • 我在大多数浏览器上都试过了，比如 IE、Firefox、Chrome，它正在创建新数组。如果将长度设置为大于 0，那么它将创建一个包含未定义元素的数组，即它只会保存一些内存位置。
    • var a = [1]; var b = a; a.length = 0; console.log(b) 打印出Array [ ]，所以对我来说它似乎不是在创建一个新数组。
    【解决方案12】：

    在答案和 cmets 中存在很多关于 while;pop/shift 性能的混淆和错误信息。 while/pop 解决方案（如预期的那样）性能最差。实际发生的情况是，对于在循环中运行 sn-p 的每个样本，安装程序只运行一次。例如：

    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 是清除数组的最快方法（不考虑[]，因为虽然它是最快的，但实际上并没有清除现有数组）。

    【讨论】：

    • 非常好！我将使用正确的基准测试结果更新原始答案。
    • 我不敢相信没有人发现这个基准错误。拥有超过 50 万次观看，您会期望有人注意到它。伟大的工作 Diadistis
    【解决方案13】：

    目前获得不少于 2739 票的答案具有误导性和不正确性。

    问题是：“如何清空现有数组？”例如。为A = [1,2,3,4]。

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

      这是因为这两个数组是两个独立的独立对象，具有自己的两个身份，在数字世界中占据自己的空间，各自独立。

    假设你妈妈让你清空垃圾桶。

    • 你不会带来一个新的，就好像你已经完成了你被要求做的事情。
    • 相反，您清空了垃圾桶。
    • 不要用新的空罐子替换装满的罐子，也不要像A = [1,2,3,4]; A = []; 那样从装满罐子的标签“A”贴到新罐子上

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

    A.length = 0;

    这样，“A”下面的罐子不仅是空的，而且干净如新！

    1. 此外，在罐子清空之前，您无需手动清除垃圾！你被要求在一个回合内完全清空现有的垃圾，在罐子变空之前不要捡垃圾，如：

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

    2. 也不是，把你的左手放在垃圾桶的底部，右手放在顶部，这样就可以把它的内容拉出来：

      A.splice(0, A.length);

    不，您被要求清空：

    A.length = 0;

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

    【讨论】：

    • 您建议的解决方案的唯一问题是垃圾仍然存在，只是您更改了布告栏说没有垃圾。对旧数组的引用应该仍然存在。您能否确定设置 .length = 0 时垃圾收集器也会删除对数组及其属性的所有引用？我认为它确实如此，但对我来说这很神奇。至少可以使用 .clear() 方法来避免混淆。
    • 我从来没有说过这个解决方案是错误的。问题是这整个线程是完全不必要的。超过 3000 票表明，试图找出最好的方法应该使它成为 EMCA 破解头开发人员添加这种方法的足够有效的案例。没有人应该去弄清楚它。有三 - 四种不同的方法来做到这一点。在某些基准测试中，长度解决方案比其他解决方案慢得多。此外，对于任何合理的开发人员来说，设置 .length = 0 的想法都不会令人满意。
    • 因为要完成它应该做的事情，所以必须删除所有引用。 .length = 0 甚至不是一个方法调用，所以如果在它设置为 0 时采取了其他操作（在大多数浏览器中通过定义 setter 进行），我仍然认为它太神奇了，无法真正相信它会做它应该做的事情去做。
    • 因此，我宁愿自己清除。一个清晰的方法可以被原型化，但这很丑陋。我的观点是，这个实现应该已经存在，因此超过 10000 名开发人员不必花费数小时阅读这个线程，而不是考虑所有其他花费更多时间进行基准测试的人。
    • 我喜欢这个答案中带有真实世界的隐喻。令人印象深刻！
    【解决方案14】：

    要清空数组的当前内存位置，请使用：'myArray.length = 0' 或 'myArray.pop() UN-till its length is 0'

    • length ：您可以随时设置长度属性来截断数组。当您通过更改数组的长度属性来扩展数组时，实际元素的数量会增加。
    • pop() : pop 方法从数组中移除 last 元素并返回返回移除的值。
    • shift() : shift 方法移除 zeroeth 索引 处的元素，并将连续索引处的值向下移动，然后返回移除的值。

    例子：

    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 : Pops 直到数组的长度达到指定大小。"谁跟你说这些废话的？
    • @BekimBacaj 本质上，它的效果是一样的。它可能应该说length = ? 而不仅仅是length。
    • @BekimBacaj 我已经更新了我的答案，我只是假设长度会一直弹出到长度，但我现在更正了长度只是截断或增加数组的大小。
    【解决方案15】：

    如果你使用常量，那么你别无选择：

    const numbers = [1, 2, 3]

    你不能重新签名：

    numbers = []

    你只能截断：

    numbers.length = 0

    【讨论】：

      【解决方案16】：

      我很惊讶还没有人提出这个建议：

      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) 生成等效数组

      【讨论】：

      • 这可能是另一个问题的好答案：“如何将数组中的所有元素转换为未定义的元素”。
      • 虽然内部未定义元素和空槽（“孔”）之间存在差异
      • 那么可以简写为const originalLength = array.length; array.length = 0; array.length = originalLength;。
      【解决方案17】：

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

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

      【讨论】：

      • 这无关紧要，甚至 JavaScript 也没有。
      【解决方案18】：

      您可以轻松地为您创建一个函数来执行此操作，更改 length 甚至将其添加到 native 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; //改变长度
      猜你喜欢
      • 2011-04-04
      • 2019-06-27
      • 1970-01-01
      • 1970-01-01
      • 2012-04-05
      • 2021-02-03
      • 1970-01-01
      相关资源
      最近更新 更多
      热门标签
      Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode