whole - 如何在JavaScript中清空數組?




js clear all array (12)

要清空數組的當前內存位置,請使用: '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());
  }
};
  • Array Array 使用Array constructorarray literal創建具有新內存位置的Array constructor

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

有沒有辦法清空一個數組,如果可能的話,使用.remove()

例如,

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

我怎麼能清空它?


A.splice(0);

我剛剛在我正在處理的一些代碼上做了這個。 它清除了陣列。


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

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

到目前為止2739投票的答案都是誤導和錯誤的。

問題是:“你如何清空你現有的陣列?” 例如, A = [1,2,3,4]

  1. 說“ A = []是答案”是無知的,絕對不正確。 [] == []假的

    這是因為這兩個數組是兩個獨立的,單獨的對象,具有自己的兩個身份,在數字世界中佔據了自己的空間,每個都獨立存在。

假設您的母親要求您清空垃圾桶。

  • 你沒有帶來一個新的,好像你已經完成了你所要求的。
  • 相反,你清空垃圾桶。
  • 你沒有用新的空罐替換填充的那個,並且你沒有從填充的罐中取出標籤“A”並將它粘在新的罐子上,如A = [1,2,3,4]; A = []; A = [1,2,3,4]; A = [];

清空數組對像是最簡單的事情:

A.length = 0;

這樣,“A”下的can不僅是空的,而且還像新的一樣乾淨!

  1. 此外,在罐子空了之前,您不需要用手取出垃圾! 您被要求在一個回合中完全清空現有的一個,而不是在罐子變空之前拿起垃圾,如:

    while(A.length > 0) {
        A.pop();
    }
    
  2. 也不是,將你的左手放在垃圾桶的底部,將你的右手握在頂部,以便能夠將其內容拉出,如下所示:

    A.splice(0, A.length);
    

不,你被要求清空它:

A.length = 0;

這是唯一正確清空給定JavaScript數組內容的代碼。


如果你正在使用

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


如果您對內存分配感興趣,可以使用類似這個jsfiddle和chrome dev工具的時間軸選項卡來比較每種方法。 您將需要使用底部的垃圾箱圖標在“清除”陣列後強制進行垃圾回收。 這應該為您選擇的瀏覽器提供更明確的答案。 這裡的很多答案都很陳舊,我不會依賴它們,而是像@ tanguy_k上面的答案那樣測試。

(有關上述標籤的介紹,您可以在here

強迫我複制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管理字符串的方式與其他基本類型不同,更不用說對像數組了。 類型可能會影響發生的事情。


如果您需要清空Angular 2+ FormArray,請在下方使用。

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


您可以輕鬆創建一個函數來為您執行此操作,更改長度 ,甚至將其作為remove()函數添加到本機Array以供重用。

想像一下你有這個數組:

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(); //[]

我很驚訝沒有人提出這個建議:

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)生成等效數組


清除現有陣列的方法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 suggested )

A.length = 0

這將通過將其長度設置為0來清除現有數組。有些人認為這可能不適用於JavaScript的所有實現,但事實證明並非如此。 它在ECMAScript 5中使用“嚴格模式”時也有效,因為數組的length屬性是讀/寫屬性。

方法3 (由Anthony suggested )

A.splice(0,A.length)

使用.splice()將完美地工作,但由於.splice()函數將返回一個包含所有已刪除項的數組,它實際上將返回原始數組的副本。 基準測試表明,這對績效沒有任何影響。

方法4 (由tanguy_k suggested )

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

這個解決方案不是很簡潔,它也是最慢的解決方案,與原始答案中引用的早期基準相反。

性能

在清除現有陣列的所有方法中,方法2和3在性能上非常相似,並且比方法4快得多。參見此benchmark

正如Diadistis在下面的answer中指出的那樣,用於確定上述四種方法性能的原始基準是有缺陷的。 原始基準重用了清除的數組,因此第二次迭代清除了一個已經為空的數組。

以下基準修復了這個缺陷: benchmarkbenchmark 。 它清楚地表明方法#2(長度屬性)和#3(拼接)是最快的(不計算方法#1不改變原始數組)。

這一直是一個熱門話題和爭議的原因。 實際上有很多正確的答案,並且由於這個答案在很長一段時間內已被標記為已接受的答案,因此我將在此處包含所有方法。 如果您投票贊成此答案,請同時提及我所引用的其他答案。


關於while; pop / shift表現在答案和評論中存在很多混亂和錯誤信息。 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是清除陣列的最快方法(不考慮[]因為雖然它是最快的,但實際上並沒有清除現有的數組)。







arrays