web-dev-qa-db-ja.com

JavaScriptで配列を空にするにはどうすればいいですか？

配列を空にする方法はありますか？可能であれば.remove()を使ってください。

例えば、

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

どうすれば空にできますか？

javascriptarrays
2199
akano1

既存の配列をクリアする方法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（ 提案 by Matthew Crumley ）

A.length = 0

これは、その長さを0に設定することにより、既存の配列をクリアします。これは、JavaScriptのすべての実装で機能するとは限らないと主張する人もいますが、そうではないことがわかります。配列の長さプロパティは読み取り/書き込みプロパティであるため、ECMAScript 5で「厳格モード」を使用する場合にも機能します。

方法（ Anthony による 推奨 として）

A.splice(0,A.length)

.splice()の使用は完全に機能しますが、.splice()関数は削除されたすべてのアイテムを含む配列を返すため、実際には元の配列のコピーを返します。ベンチマークは、これがパフォーマンスにまったく影響を及ぼさないことを示唆しています。

方法4（ tanguy_k による 推奨 として）

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

このソリューションはそれほど簡潔ではなく、元の回答で参照された以前のベンチマークとは対照的に、最も遅いソリューションでもあります。

パフォーマンス

existing arrayをクリアするすべての方法のうち、方法2と3はパフォーマンスが非常に似ており、方法4よりもはるかに高速です。 ベンチマーク 。

回答 の下の Diadistis で指摘されているように、上記の4つの方法のパフォーマンスを決定するために使用された元のベンチマークには欠陥がありました。元のベンチマークでは、クリアされた配列が再利用されたため、2回目の反復では、すでに空の配列がクリアされていました。

次のベンチマークは、この欠陥を修正します。 http://jsben.ch/#/hyj65 。メソッド＃2（長さプロパティ）および＃3（スプライス）が最速であることを明確に示しています（元の配列を変更しないメソッド＃1はカウントしません）。

これはホットな話題であり、多くの論争の原因となっています。実際には多くの正解があり、この解答は非常に長い間受け入れられた解答としてマークされているため、ここにすべての方法を含めます。この回答に投票する場合は、私が参照した他の回答にも投票してください。

4034
Philippe Leybaert

元の配列を更新する必要がある他の参照があるために元の配列を保持する必要がある場合は、長さをゼロに設定することで新しい配列を作成せずに元の配列を消去できます。

A.length = 0;
2338
Matthew Crumley

ここで最速の実装 while 同じ配列を維持する （ "可変"）：

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

参考までに、それをwhile (array.pop())に単純化することはできません。テストは失敗します。

参考： Map および Setclear()を定義してください、 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

268
tanguy_k

以下のように、ブラウザ間でより親切で最適な解決策は、spliceメソッドを使って配列Aの内容を空にすることです。

A.splice(0, A.length);

195
Anthony

これまでに2739件もの支持を得ている答えは、誤解を招くような間違いです。

問題は、「既存の配列をどのように空にするのですか」ということです。例えば。 A = [1,2,3,4]の場合。

  1. "A = []が答えです"と言っても無知で絶対に誤りです。 [] == []は false です。

    これは、これら2つの配列が、それぞれ独自の2つのアイデンティティを持ち、デジタルの世界で独自のスペースを占めている2つの個別のオブジェクトであるためです。

あなたのお母さんがゴミ箱を空にするように頼んだとしましょう。

  • あなたはあなたが求められたことをしたかのように新しいものを持ち込むことはしません。
  • 代わりに、あなたはゴミ箱を空にします。
  • 充填されたものを新しい空の缶で置き換えるのではなく、充填された缶からラベル「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配列の内容を正しく空にする唯一のコードです。

78
Bekim Bacaj

性能テスト：

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
61
kenshou.html

これを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のような）を修正するべきではないと思う、そして私は同意する傾向がある。これを処理する方法を決定する際には注意してください。

35
leech

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が配列をクリアするための最速の方法であることを示しています（最速だが実際には既存の配列をクリアしないので[]を考慮に入れない）。

17
Diadistis

メモリの割り当てに興味がある場合は、 this 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は他のプリミティブ型とは異なる方法で文字列を管理するため、オブジェクトの配列はもちろんのこと、配列要素の型にも依存することに注意してください。タイプは何が起こるかに影響を与えるかもしれません。

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

そしてそれを呼び出します：array.clear();

14
Bendegúz

A.splice(0);

私が取り組んでいるコードでこれをしました。アレイをクリアしました。

11
David Campbell

あなたが使っているなら

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を指定すると、配列の境界をリセットするだけで、残りの配列要素はガベージコレクタによって接続されます。

これら2つの解決策の代わりに優れています。

a.splice(0,a.length)

そして

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

Kenshou.htmlによる以前の回答のとおり、2番目の方法は高速です。

10
Laxmikant Dange

あなたはそれをするための関数を簡単に作ることができます、 length を変更するか、あるいは再利用のためにremove()関数として native 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（）をプロトタイプにすることもできます。これはあなたの質問に対する答えです。上記の方法の1つを選択してJavaScriptのArrayオブジェクトにプロトタイプすることができます。

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

javaScriptアプリケーションの配列を空にするには、このように呼び出すだけです。

arr.remove(); //[]
9
Alireza

Jan の最初の提案の修正版を使用してください。

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

あなたが定数を使うならば、あなたは選択の余地がありません：

const numbers = [1, 2, 3]

あなたは再割り当てすることはできません。

numbers = []

あなただけが切り捨てることができます：

numbers.length = 0
5
Damjan Pavlica

私は誰もまだこれを示唆していないことに驚きました：

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)を使って同等の配列を生成できます。

3
Cauterite

enter image description here

配列の現在のメモリ位置を空にするには、次のように使用します。'myArray.length = 0'または'myArray.pop() UN-till its length is 0'

  • length ：配列を切り捨てるためにlengthプロパティをいつでも設定できます。 lengthプロパティを変更して配列を拡張すると、実際の要素数が増えます。
  • pop() ：popメソッドは配列から last 要素を削除し、それを返して削除された値を返します。
  • 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() ：スライス関数を使用することで、新しいメモリアドレスを持つ元の配列から要素の浅いコピーを取得します。したがって、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);
3
Yash