JavaScript で配列からオブジェクトを削除する
-
JavaScript で
splice()メソッドを使用して配列からオブジェクトを削除する -
JavaScript で
slice()メソッドを使用して配列からオブジェクトを削除する -
filter()メソッドを使用して、配列からオブジェクトを削除する
この記事では、JavaScript 配列からオブジェクトを削除する方法を学習します。この記事では、splice()、slice()、filter() などのメソッドを紹介して実装します。
JavaScript で splice() メソッドを使用して配列からオブジェクトを削除する
メソッド splice() は、配列からオブジェクトを削除するために使用できる最良のメソッドである可能性があります。既存の要素を削除または置換するか、新しい要素を所定の位置に追加することにより、配列の内容を変更します。splice() メソッドの構文を以下に示します。
Array.splice(index, count, items1, ..., itemX)
インデックスオプションは、アイテムを追加/削除する位置を指定する整数を参照します。負の値を使用して、配列の末尾からの位置を指定することもできます。カウントオプションはオプションであり、削除するアイテムの数を示します。items1, ..., itemX オプションもオプションであり、配列に新しいアイテムを追加するために使用できます。
最初に、配列内に 3つのオブジェクトを含む myArray という名前の配列変数を宣言します。次に、2 行目で、配列に対して splice() メソッドを使用します。また、引数として 0 と 1 を示します。次に、アレイをコンソールに記録します。
最初、配列には 3つのオブジェクトが含まれています。splice() メソッドの値 0 は、配列の最初のインデックス、つまり最初のオブジェクトを示します。これは、最初のインデックスからの削除を開始することを意味します。メソッドの次の値 1 は、メソッドが開始点から 1つのアイテムを削除することを指定します。したがって、以下の例では、配列の最初のオブジェクトが削除されます。
splice() メソッドが配列を変更することに注意してください。したがって、slice() メソッドを使用して、元の配列を変更せずに、配列から目的のオブジェクトを削除できます。
コード例：
var myArray =
[{id: 1, name: 'John'}, {id: 2, name: 'Rick'}, {id: 3, name: 'Anna'}];
myArray.splice(0, 1)
console.log(myArray)
出力：
[{id:2, name:'Rick'},{id:3, name:'Anna'}]
JavaScript で slice() メソッドを使用して配列からオブジェクトを削除する
slice() メソッドは、最初から最後まで選択された配列の部分の変更されたコピーを返しますが、メソッドに渡された終了インデックスは含まれません。slice() メソッドの構文は次のとおりです。
Array.slice(startIndex, endIndex)
ここで、startIndex は、抽出を開始するゼロベースのインデックスです。シーケンスの終わりからのオフセットを示す負のインデックスを使用できます。たとえば、slice(-3) はシーケンスの最後の 3つの要素を抽出します。startIndex が定義されていない場合、slice() 関数はインデックス 0 から始まりますが、startIndex が配列のインデックス範囲より大きい場合、空の配列が返されます。
endIndex オプションは、抽出を終了する前のゼロベースのインデックスでもあります。slice() メソッドは endIndex まで抽出しますが、endIndex 自体は含まれます。オプション endIndex が除外されている場合、slice() 関数はシーケンスの最後まで、つまり array.length まで抽出します。endIndex がシーケンスの長さより大きい場合、slice() 関数もシーケンスの最後まで抽出します。
以下の例の slice(1,3) メソッドは、2 番目のインデックスから 4 番目のインデックスに要素を抽出します。配列には 4 番目のインデックスがないため、シーケンスが終了するまで要素を抽出します。
コード例：
var myArray =
[{id: 1, name: 'Morty'}, {id: 2, name: 'Rick'}, {id: 3, name: 'Anna'}];
var newArray = myArray.slice(1, 3);
console.log(newArray)
出力：
[{id:2, name:'Rick'},{id:3, name:'Anna'}]
filter() メソッドを使用して、配列からオブジェクトを削除する
filter() メソッドは、関数によって提供されるテストに合格した要素を使用して新しい配列を作成します。これは、オブジェクトの新しい配列を返すことを意味します。テストに合格する要素がない場合、関数は空の配列を返します。矢印関数を使用して、filter() メソッドを示します。
メソッド filter() は、コールバック関数と呼ばれる用語を使用します。
var newArray = myArray.filter(
(element, index, array) => {
...Items passing this condition will be added to the new array...})
このメソッドは 3つの引数を受け入れます。element オプションは、配列で処理されている現在の要素です。index はオプションであり、配列で処理されている現在の要素のインデックスを示します。最後に、array オプションは、オプションで呼び出される配列フィルターです。
まず、上記の方法で行ったように、オブジェクトを含む配列を作成します。次に、配列変数を使用して filter() 関数を呼び出します。矢印関数の引数として item を指定し、式 item.id ! == 1 で配列の要素を返します。新しい配列を newArray 変数に格納し、コンソールに記録します。
以下の例では、id が値 1 と等しくない配列の要素のみが返されます。したがって、配列の 2 番目と 3 番目の要素を返します。
サンプルコード：
var myArray =
[{id: 1, name: 'Morty'}, {id: 2, name: 'Rick'}, {id: 3, name: 'Anna'}];
var newArray = myArray.filter((item) => item.id !== 1);
console.log(newArray);
出力：
[{id:2, name:'Rick'},{id:3, name:'Anna'}]
