データを一括で処理しているときに、更新のために一部のエントリを削除する必要がある場合があります。たとえば、特定の属性またはプロパティに基づいて値を削除します。これにより、関連データに便利にアクセスし、不要なエントリを削除できます。このような状況では、JavaScript でその値によって配列からオブジェクトを削除すると、データに即座にアクセスしてメモリを節約するのに非常に役立ちます。
この記事では、JavaScript で値によって配列からオブジェクトを削除する方法について説明します。
JavaScript でその値によって配列からオブジェクトを削除/削除する方法は?
JavaScript で値によって配列からオブジェクトを削除するには、次のアプローチを適用します。
記載されている各アプローチについて、1 つずつ説明しましょう。
アプローチ 1: JavaScript で findIndex() および splice() メソッドを使用してその値によって配列からオブジェクトを削除する
「 findIndex() 」メソッドは、元の配列を修正せずに要素のインデックス (位置) を返します。 「 スプライス（） 」メソッドは、特定の配列要素を追加/削除し、元の配列にも影響を与えます。これらのメソッドを利用して、削除する必要があるオブジェクトのインデックスを見つけることができます。その後、特定のオブジェクトが指定された数に基づいて接合されます。
構文
配列.findIndex ( 機能 ( currVal、インデックス、配列 ) 、 価値 )この構文では:
- 「 機能 」は、配列内の各項目に対して呼び出す必要がある関数を指します。
- 関数パラメーターは、指定された配列内の現在の値のインデックスを参照します。
- 「 価値 」は、関数に渡す必要がある値を「」として示します。 これ 」。
配列.スプライス ( インデックス、番号、新しい )
上記の構文では、次のようになります。
- 「 索引 」は、アイテムが追加または削除されるはずの位置を指します。
- 「 一つに 」は項目番号を表します。
- 「 新着 」は、代替として新しい要素に対応します。
例
以下のコードに従ってみましょう。
< 脚本 タイプ = 「テキスト/ジャバスクリプト」 >させて 与えられた配列 = [ { 年： 18 } 、 { 年： 20 } 、 { 年： 25 } ] ;
させて removeObject = givenArray.findIndex ( オブジェクト = > {
戻る object.age === 18 ;
} ) ;
console.log ( 「削除するオブジェクトのインデックスは次のとおりです:」 、removeObject ) ;
givenArray.スプライス ( removeObject、 1 ) ;
console.log ( 「値でオブジェクトを削除した後の配列は次のようになります:」 、与えられた配列 ) ;
脚本 >
上記のコード スニペットでは、次のようになります。
- 指定されたプロパティを持つオブジェクトの配列を宣言します。
- 次のステップでは、「 findIndex() 」メソッドを、前のステップで宣言された配列を使用して実行します。
- これにより、配列内の各要素 (オブジェクト) を反復処理することになります。
- その結果、配列からの特定のオブジェクトのインデックスが表示され、プロパティに対して指定された値、つまり 18 と一致します。
- その後、「 スプライス（） 」メソッドは、フェッチされたインデックスを参照して、そのインデックスに対して特定のオブジェクトを削除します。
- ご了承ください ' 1 」は、削除する必要があるオブジェクトの数を指定します。
- 最後に、結果のオブジェクトの配列を表示します。
出力
上記の出力では、特定のオブジェクトのインデックスが表示され、後で削除されることがわかります。
アプローチ 2: JavaScript で filter() メソッドを使用してその値によって配列からオブジェクトを削除する
「 フィルター（） 」メソッドは、特定のテストに合格した項目の新しい配列を作成します。このメソッドは、比較演算子を介した条件に基づいて、削除する必要があるオブジェクトをフィルター処理するために適用できます。
構文
配列.フィルター ( 機能 ( 値 ) 、 これ )ここ：
- 「 機能 」は、フィルタリング用の関数にリダイレクトする関数を指します。
- 「 値 」は現在の要素の値です。
- 「 これ 」は、関数に渡される値を示します。
例
以下の例の概要を見てみましょう。
< 脚本 タイプ = 「テキスト/ジャバスクリプト」 >させて 与えられた配列 = [ { サイズ： 35 } 、 { サイズ： 40 } 、 { サイズ： 4.5 } ] ;
console.log ( 「指定された配列は:」 、与えられた配列 )
させて newArray = givenArray.filter ( オブジェクト = > {
戻る オブジェクトのサイズ ! == 4.5 ;
} ) ;
console.log ( 「値でオブジェクトを削除した後の配列は次のようになります:」 、新しい配列 ) ;
脚本 >
上記のコード行に示されているように、次の手順を適用します。
- 同様に、オブジェクトの配列を宣言して表示します。
- その後、「 フィルター（） 要素（オブジェクト）を参照して」メソッド。
- ここで、関連付けられた配列をフィルタリングして、「 等しくない (!==) 」比較演算子。
- 最後に、フィルター処理された配列を表示します。
出力
上記の出力は、フィルタリングされたオブジェクトの新しい配列が形成されたことを示しています。
アプローチ 3: pop() メソッドを使用して、JavaScript の値で配列からオブジェクトを削除する
「 ポップ（） 」メソッドは、配列の最後の要素を削除し、元の配列にも影響を与えます。このメソッドを利用して、配列から特定のオブジェクトをポップし、削除されたオブジェクトで更新された配列を作成できます。
例
以下の例は、説明した概念を示しています。
< 脚本 タイプ = 「テキスト/ジャバスクリプト」 >させて 与えられた配列 = [ { 名前： 「ハリー」 } 、 { 名前： 「デビッド」 } ]
させて newArray = givenArray.pop ( オブジェクト = > {
戻る object.name = 「ハリー」
} )
console.log ( 「値でオブジェクトを削除した後の配列は次のようになります:」 、新しい配列 ) ;
脚本 >
上記のコード スニペットでは、次のようになります。
- 同様に、指定されたプロパティを持つオブジェクトの配列を宣言します。
- 次のステップでは、「 ポップ（） ” プロパティに対して指定された値を持つ特定のオブジェクトを削除するメソッド “ 名前 」。
- その結果、結果の配列にはオブジェクトが 1 つだけ残ります。 新到着 」。
- 最後に、更新されたオブジェクトの配列、つまり newArr を表示します。
出力
上記の出力は、目的の要件が満たされていることを示しています。
結論
「 findIndex() ' と ' スプライス（） 」メソッド、「 フィルター（） 」メソッド、または「 ポップ（） 」メソッドを適用して、JavaScript の値によって配列からオブジェクトを削除できます。これらのアプローチは、インデックス付けに基づいて特定のオブジェクトを削除するか、not equal(!==) 演算子を介してフィルター処理するか、条件に合わせて単純にポップします。この記事では、JavaScript を使用して値によって配列からオブジェクトを削除/削除する方法について説明しました。