首页 文章

如何在JavaScript中清空数组?

提问于
浏览
2199

有没有办法清空数组,如果可能的话 .remove()

例如,

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

我怎么能清空它?

18 回答

  • 3636

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

    • length:您可以设置length属性以随时截断数组 . 通过更改其length属性来扩展数组时,实际元素的数量会增加 .

    • pop():pop方法从数组中删除 last 元素并返回返回已删除的值 .

    • shift():shift方法删除 zeroeth index 处的元素并将连续索引处的值向下移动,然后返回删除的值 .

    例:

    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 constructorarray 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():通过使用切片函数,我们从原始数组中获得了一个浅层的元素副本,带有新的内存地址,因此对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);
    
  • 8

    您可以将其添加到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),我倾向于同意 . 请谨慎决定如何处理此问题 .

  • 187

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

    A.length = 0;
    
  • 3

    A.splice(0);

    我刚刚在我正在处理的一些代码上做了这个 . 它清除了阵列 .

  • 14

    关于while; pop / shift表现在答案和评论中存在很多混乱和错误信息 . while / pop解决方案(如预期的那样) worst performance . 实际发生的情况是,对于在循环中运行代码段的每个样本,安装程序只运行一次 . 例如:

    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

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

  • 10

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

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

  • 10

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

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

    清除现有数组的方法 A

    Method 1

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

    A = [];
    

    此代码将变量 A 设置为新的空数组 . 如果你在其他任何地方没有 references to the original array 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']
    

    Method 2suggested by Matthew Crumley

    A.length = 0
    

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

    Method 3suggested by Anthony

    A.splice(0,A.length)
    

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

    Method 4suggested by tanguy_k

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

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

    Performance

    在清除 existing array 的所有方法中,方法2和3在性能上非常相似,并且比方法4快得多 . 请参见benchmark .

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

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


    这一直是一个热门话题和事业很多争议 . 实际上有很多正确的答案,并且由于这个答案在很长一段时间内已被标记为已接受的答案,因此我将在此处包含所有方法 . 如果您投票赞成此答案,请同时提及我所引用的其他答案 .

  • 33

    到目前为止2739投票的答案都是误导和错误的 .

    问题是:"How do you empty your existing array?"例如为 A = [1,2,3,4] .

    • 说“ A = [] 就是答案”是无知的,绝对不正确 . [] == []false .

    这是因为这两个数组是两个独立的,单独的对象,具有自己的两个身份,在数字世界中占据了自己的空间,每个都独立存在 .


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

    • 你没有完成你所要求的工作 .

    • 而是清空垃圾桶 .

    • 你不要从填充的 jar 里取出标签"A"并将其粘贴到新的标签 A = [1,2,3,4]; A = [];

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

    A.length = 0;
    

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


    • 此外,在 jar 空了之前,您不需要用手取出垃圾!您被要求在一个回合中完全清空现有的一个,而不是在 jar 变空之前拿起垃圾,如:
    while(A.length > 0) {
        A.pop();
    }
    
    • 也不要将你的左手放在垃圾桶的底部,将你的右手放在顶部以便能够将其内容拉出来,如下所示:
    A.splice(0, A.length);
    

    不,你被要求清空它:

    A.length = 0;
    

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

  • 2290

    您可以轻松创建一个函数来为您执行此操作,更改 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 = []; //[]
    

    如果您查看数组函数,还有许多其他方法可以执行此操作,但最推荐的方法可能是更改长度 .

    正如我先说的那样,你也可以将remove()原型化,因为它是你问题的答案 . 您可以简单地选择上述方法之一并将其原型化为JavaScript中的Array对象,例如:

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

    你可以简单地调用它来清空你的javascript应用程序中的任何数组:

    arr.remove(); //[]
    
  • 5
    Array.prototype.clear = function() {
        this.length = 0;
    };
    

    并称之为: array.clear();

  • 15

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

    A.splice(0, A.length);

  • -4

    性能测试:

    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
    
  • 2

    如果你正在使用

    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 时,我们只是重置数组的边界,而rest数组元素的内存将由垃圾收集器连接 .

    而不是这两种解决方案更好 .

    a.splice(0,a.length)
    

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

    根据kenshou.html之前的回答,第二种方法更快 .

  • 7

    这里是 keeping the same array ("mutable")最快的工作实现:

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

    仅供参考Map定义了 clear() 所以对于Array来说也是合乎逻辑的 clear() .

    或者作为Underscore.js mixin

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

    或者一个简单的功能:

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

    TypeScript版本:

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

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

    以及随之而来的测试:

    describe('Array', () => {
      it('should clear the array', () => {
        let array = [1, 2, 3, 4, 5];
        array.clear();
        expect(array.length).toEqual(0);
        expect(array[0]).toEqual(undefined);
        expect(array[4]).toEqual(undefined);
    
        // Even with undefined or null inside
        array = [1, undefined, 3, null, 5];
        array.clear();
        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

  • 16

    如果你使用常量,那么你别无选择:

    const numbers = [1, 2, 3]
    

    你不能重新签名:

    numbers = []
    

    你只能截断:

    numbers.length = 0
    
  • 62

    如果您对内存分配感兴趣,可以使用this jsfiddle和chrome dev工具' timeline tab. You will want to use the trash bin icon at the bottom to force a garbage collection after '_清除' the array. This should give you a more definite answer for the browser of your choice. A lot of answers here are old and I wouldn' t依赖它们来比较每种方法,而不是像@ 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>
        
    </body> </html>

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

  • 261

    如果您需要清空Angular 2 FormArray,请在下方使用 .

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

相关问题