JavaScriptで配列要素を削除する方法

JavaScript は、Web ページにインタラクティブで動的なコンテンツを追加するために使用される高レベル プログラミング言語です。中でも、データ型を操作できる機能は、JavaScript が非常に人気があり重要である理由の 1 つです。データを処理するとき、多くの場合、コレクション内の要素を追加、読み取り、削除する必要があります。たとえば、ユーザーがページ上の画像上でマウスをスライドさせたとき、画像コレクション (配列など) から画像を動的に削除して、マウスをスライドさせたときにユーザーに画像が表示されなくなるようにする必要がある場合があります。画像を削除しました。このようなニーズに対応するために、JavaScript には要素を削除するためのメソッドが複数用意されています。次にそれを 1 つずつ紹介します。

1. splice() メソッドを使用する

splice() メソッドは、元の配列を変更できるメソッドです。配列内の要素を挿入または削除して、戻り値を返すことができます。削除された要素の値の配列。このメソッドは 2 つ以上のパラメータを受け取ります。最初のパラメータは削除または挿入する開始要素の位置を指定し、2 番目のパラメータは削除または挿入する要素の数を指定します。要素を 1 つだけ削除する場合は、パラメーターを 1 つだけ渡すことができます。

let myArray = ["apple", "banana", "orange", "pear"];
myArray.splice(2, 1); // 第一个参数是要删除元素的位置，第二个参数是要删除的元素数量。
console.log(myArray); // ["apple", "banana", "pear"]

このコードでは、4 つの果物の名前を含む配列 myArray を定義します。次に、splice() メソッドを使用し、2 番目のパラメータ 1 を渡します。これは、要素を 1 つだけ削除します。最初のパラメータは 2 です。これは、削除操作が 3 番目の要素から開始されることを意味します。つまり、配列内の「オレンジ」を削除します。 。最終出力は、削除操作が成功し、myArray に「apple」、「banana」、「pear」の 3 つの要素のみが含まれていることを示します。

2. delete キーワードの使用

delete キーワードは要素の削除にも使用できますが、オブジェクトのプロパティにのみ適用され、配列内の要素には適用されません。 delete キーワードを使用して配列要素を削除すると、その要素の値は単に未定義に設定されます。元の配列の長さは変わりません。したがって、実際に配列から要素を削除したい場合は、splice() メソッドを再度呼び出す必要があります。

let myArray = ["apple", "banana", "orange", "pear"];
delete myArray[2];
console.log(myArray); // ["apple", "banana", undefined, "pear"]

このコードでは、delete キーワードを使用して、myArray 配列の 3 番目の要素「orange」を削除します。ただし、この配列は [ "apple", "banana", unfineed, "pear" ] となり、削除された要素の位置は不定になります。これは、無効な要素であるだけでなく、配列を反復処理するときに問題が発生するため、削除しないよりもはるかに悪いです。したがって、配列から要素を削除するために delete を使用しないことをお勧めします。

3. filter() メソッドを使用する

JavaScript の配列メソッド filter() を使用すると、配列内の要素をフィルタリングし、特定の条件に一致するすべての要素を返すことができます。 。 例。 splice() メソッドと比較して、filter() メソッドは元の配列を変更しないため、filer() メソッドを使用して要素を削除しても、変更したくない一部の要素を変更するという問題が発生しません。

let myArray = ["apple", "banana", "orange", "pear"];
myArray = myArray.filter(function (item) {
  return item !== "orange"; // 返回所有不是“orange”元素的数组实例
});
console.log(myArray); // ["apple", "banana", "pear"]

このコードでは、4 つの果物の名前を含む配列 myArray を定義します。次に、filter() メソッドを使用して、項目を削除する条件を指定する匿名関数を渡します。この無名関数は、「オレンジ」要素ではないすべてのインスタンスを含む新しい配列を返します。この方法では、1 つの要素を削除するだけでなく、複数の要素を削除することもできます。最後に、「orange」要素が含まれなくなった、更新された myArray があります。

4. pop() または SHIFT() メソッドを使用する

POP() または SHIFT() メソッドは、配列内の要素を削除するために使用されます。 Pop() メソッドは配列の最後の要素を削除し、shift() メソッドは配列の最初の要素を削除します。コレクション内で削除する要素の位置がわかっている場合は、それを使用して特定の要素を削除できます。ただし、これは配列内の要素を直接削除するのではなく、ターゲット要素を含む新しい配列を削除するだけです。元の配列を変更する必要がある場合は、 splice() を呼び出して置き換えることができます。

let myArray = ["apple", "banana", "orange", "pear"];
myArray.pop(); // 删除 myArray 中的最后一个元素
console.log(myArray); // ["apple", "banana", "orange"]
myArray.shift(); // 删除 myArray 中的第一个元素
console.log(myArray); // ["banana", "orange"]

このコードでは、4 つの果物の名前を含む配列 myArray を定義します。次に、pop() メソッドとshift() メソッドをそれぞれ使用して、配列内の最後の要素と最初の要素を削除します。これらのメソッドを呼び出すと、元の配列が変更され、削除された要素にはアクセスできなくなります。したがって、配列を変更する必要がある場合は、最初にコピーを作成する必要があります。

要約すると、JavaScript で配列から要素を削除するには複数の方法があり、それぞれの方法に独自の長所と短所があります。 splice() は最も一般的に使用されるメソッドの 1 つで、元の配列を直接変更して、削除された要素の値を返すことができます。ただし、配列を変更したくない場合は、filter() を使用できますが、このメソッドは元の配列を直接変更できません。削除方法の具体的な選択は、特定のビジネス ニーズに基づいて決定する必要があります。

以上がJavaScriptで配列要素を削除する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。