javascript配列では、値をグループ化して繰り返し処理することができます。 さまざまな方法で配列要素を追加および削除できます。 残念ながら、単純な配列はありません。方法を削除します。
それでは、JavaScript配列から要素を削除するにはどうすればよいですか?,
deleteメソッドの代わりに、JavaScript配列には配列の値をクリーンアップできるさまざまな方法があります。
popを使用して配列の最後から要素を削除したり、shiftを使用して最初から要素を削除したり、spliceを使用して中間から要素を削除したりできます。 JavaScriptの配列フィルタメソッドは、必要な項目を持つ新しい配列を作成するために、不要な要素を削除するためのより高度な方法です。,Delete演算子を使用して配列要素を合法的に削除します
JavaScript配列から要素を削除するために使用できるさまざまな方法とテクニックがあります。
- pop-配列の最後から削除します
- shift-配列の先頭から削除します
- splice-特定の配列インデックスから削除します
- filter-プログラムによって要素を削除できます。また、lodashのように、それほど明白ではないかもしれない配列から要素を削除することができる他の方法も学びます。,
JavaScript配列の末尾からの要素の削除
javascript配列の要素を配列の末尾から削除するには、lengthプロパティを現在の値より小さい値に設定します。 インデックスが新しい長さ以上の要素はすべて削除されます。
var ar = ; ar.length = 4; // set length to remove elements console.log( ar ); //
popメソッドは、配列の最後の要素を削除し、その要素を返し、lengthプロパティを更新します。 これは、deleteを使用するのとは異なり、最後の要素が完全に削除され、配列の長さが減少することを意味します。,
var ar = ; ar.pop(); // returns 6 console.log( ar ); //
JavaScript配列の先頭から要素を削除する
JavaScript配列の最初の要素を削除するにはどうすればよいですか?
shiftメソッドはpopメソッドとよく似ていますが、JavaScript配列の最後の要素ではなく最初の要素を削除します。
shiftメソッドは最初の配列要素のみを削除したため、パラメータはありません。 要素が削除されると、残りの要素が下にシフトされます。,
var ar = ; ar.shift(); // returns "zero" console.log( ar ); //
shiftメソッドは、削除された要素を返し、残りの要素のインデックスを更新し、lengthプロパティを更新します。 これは、呼び出される配列を変更します。
要素がない場合、または配列の長さが0の場合、メソッドはundefinedを返します。
Spliceを使用してJavaScriptで配列要素を削除する
spliceメソッドを使用して、配列の要素を追加または削除できます。 最初の引数は、要素の追加または削除を開始する場所を指定します。 二番目の引数は、削除する要素の数を指定します。, 第三引数とそれ以降の引数は省略可能で、配列に追加される要素を指定します。
ここでは、spliceメソッドを使用して、位置三(ゼロベースのインデックス)から始まる二つの要素を削除します。
var arr = ; var removed = arr.splice(2,2);
削除された要素を含む配列がspliceメソッド 削除された配列には含まれており、元の配列には残りの値が含まれています。
spliceメソッドを使用して、配列から要素の範囲を削除することもできます。,
var list = ; list.splice(0, 2); // Starting at index position 0, remove two elements and retains .
Spliceを使用して配列項目を値で削除する
配列から削除する値がわかっている場合は、spliceメソッドを使用できます。 まず、対象項目のインデックスを特定する必要があります。 次に、インデックスを開始要素として使用し、ただ一つの要素を削除します。
var arr = ; for( var i = 0; i < arr.length; i++){ if ( arr === 5) { arr.splice(i, 1); } } //=>
これは、要素が整数である簡単な例です。 オブジェクトの配列がある場合は、より洗練されたルーチンが必要です。
これは、単一のアイテムのみを削除する場合に機能します。, あなたの基準に一致する複数の項目を削除したい場合は、不具合があります。
アイテムが配列から削除されると、インデックスはまだ増分され、一致した値の後の次のアイテムはスキップされます。
簡単な解決策は、上記の例を変更してインデックス変数をデクリメントして、配列内の次の項目をスキップしないようにすることです。
var arr = ; for( var i = 0; i < arr.length; i++){ if ( arr === 5) { arr.splice(i, 1); i--; } } //=>
変更された例では、配列に2つの5つの値を追加しました。 また、splice呼び出しの後に’i–;’を追加しました。
ループを実行すると、一致するすべての項目が削除されます。,
次の項目をスキップするループの問題を指摘してくれたKristian Slettenに感謝します。
配列フィルターメソッドを使用して値で項目を削除します
spliceメソッドとは異なり、filterは新しい配列を作成します。 filter()は呼び出された配列を変更しませんが、新しい配列を返します。
filter()は、単一のパラメータ、コールバックメソッドを持っています。 Filterメソッドが配列要素を反復処理すると、コールバックがトリガーされます。 コールバックには、現在の値または要素、現在の配列インデックス、および完全な配列の三つの値を渡します。,
コールバックメソッドはtrueまたはfalseを返す必要があります。 値(要素)をテストして、基準を満たしているかどうかを確認するのはあなたの責任です。 そうであれば、trueを返すことができます。 Trueを返す要素は、フィルター処理された新しい配列に追加されます。
var array = ; var filtered = array.filter(function(value, index, arr){ return value > 5; }); //filtered => //array =>
一致する値を含む新しい配列が返されることに注意してください。 元の配列はそのまま残されます。 だが、こうした有用なかよくしていきたいと考えてい独自のデータソースが取得するサブセットに基づく異なる論理です。,
Lodash Array Removeメソッド
ユーティリティライブラリが、より複雑な問題を解決する最良の方法であることがあります。 Lodashは、配列の操作メソッドの豊富なセットを提供します。
Lodash removeメソッドはarray filterメソッドとよく似ていますが、逆です。 元の配列値は保存されませんが、一致する要素は削除されます。 一致する要素を新しい配列として返します。
var array = ;var evens = _.remove(array, function(n) { return n % 2 === 0;});console.log(array);// => console.log(evens);// =>
Removeメソッドを作成する
前に述べたように、ネイティブ配列はありません。方法を削除します。, Lodash lodashメソッドはこの問題を解決しますが、必ずしもLodashを使用したくない場合があります。 であるということではありませんを使用することはできませんしユーティリティメソッド. John Resigは私たちに従うモデルを与えましたが、彼は配列プロトタイプを拡張しましたが、これは悪い考えです。
代わりに、ヘルパーまたはユーティリティライブラリに追加できるArray remove utilityメソッドを作成しました。 Lodash removeメソッドと同様に、最初のパラメータはターゲット配列です。 配列を使用します。値に一致しない要素を返すためのフィルター。
このメソッドは単純で、数値や文字列などの単純な値を想定しています。, Customcomparisonメソッドを使用するようにこのメソッドを変更することもできますが、filterメソッドを直接使用する方が簡単だと思います。
Delete演算子を使用して配列要素を明示的に削除します
delete演算子を使用して特定の配列要素を削除できます。
var ar = ; delete ar; // delete element with index 4 console.log( ar ); // alert( ar ); // 1,2,3,4,,6
delete演算子を使用しても、lengthプロパティには影響しません。 また、後続の要素のインデックスにも影響しません。 配列は疎になり、削除されたアイテムは削除されませんが未定義になるという派手な方法です。 以下で説明するspliceメソッドとdeleteを使用して比較します。,
delete演算子は、配列がオブジェクトであるJavaScriptオブジェクトからプロパティを削除するように設計されています。
要素が実際に配列から削除されない理由は、削除演算子は要素を削除するよりもメモリを解放することに関するものです。 メモリは、値への参照がなくなったときに解放されます。
JavaScript配列をクリアまたはリセットします
配列全体を空にしてすべての要素をダンプしたい場合はどうすればよいですか?
空の配列または新しい配列を作成するために使用できるいくつかのテクニックがあります。,
最も簡単で最速の手法は、配列変数を空の配列に設定することです。
var ar = ;//do stuffar = ;//a new, empty array!
これが作成できる問題は、変数への参照がある場合です。 この変数への参照は変更されず、元の配列の値を保持します。 このコースではバグ🐛.
これは、このシナリオの単純化された例です。
var arr1 = ;var arr2 = arr1; // Reference arr1 by another variable arr1 = ; console.log(arr2); // Output
配列をクリアする簡単なトリックは、lengthプロパティを0に設定することです。,
var ar = ;console.log(ar); // Output ar.length = 0;console.log(ar); // Output
別の、一種の不自然な手法は、2番目のパラメータとして配列の長さを渡して、スプライスメソッドを使用することです。 これにより元の要素のコピーが返され、シナリオにとって便利です。
var ar = ;console.log(ar); // Output ar.splice(0, ar.length);console.log(ar); // Output
最後の二つのテクニックは、新しい配列を作成するのではなく、配列の要素を変更します。 つまり、参照も更新する必要があります。
whileループを使用する別の方法があります。 それは私には少し奇妙に感じますが、同時に派手に見えるので、何人かの友人を感動させるかもしれません!,
var ar = ;console.log(ar); // Output while (ar.length) { ar.pop(); }console.log(ar); // Output
JavaScript配列をクリアする方法ではありませんが、動作し、読み取り可能です。 一部の性能試験においてもこれで最速の技術でもあったと思い
概要
データを管理するためには、JavaScriptの配列項目を削除することが重要です。 単一の’remove’メソッドはありませんが、不要な配列項目をパージするために使用できるさまざまなメソッドとテクニックがあります。
この記事では、これらの方法とその使用方法について検討しました。, また、配列から項目を少し簡単かつ一貫性のあるものにするヘルパーメソッドを作成する方法も見ました。
いくつかの構文的なタイプミスを指摘してくれたRob Sherwoodに感謝します!