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

JavaScriptの配列で要素を削除する方法について書いています。
配列の要素を削除するには、下記の方法で削除することができます。

deleteで要素を削除する

delete演算子で、配列の要素を削除することができます。

let fruits = ['orange', 'grape', 'apple', 'peach']

delete fruits[2]

console.log(fruits) // ['orange', 'grape', なし, 'peach']
console.log(fruits.length) // 4

fruits変数に4つの要素で、配列を作成しています。
次の処理で、delete演算子を使って要素を削除しました。

2番目の要素を削除しています。
出力すると、2番目の要素がなくなりました。

ですが、2番目の位置は空で残ったままになります。
2番目にアクセスすると、undefinedが返ってきて、要素も4つのままです。

popメソッドで要素を削除する

popメソッドを使って、要素を削除することができます。
popメソッドを使うと、最後に配列に入れた要素が取り出されて削除されます。

let fruits = ['orange', 'grape', 'apple', 'peach']
let popValue = fruits.pop()

console.log(popValue) // peach
console.log(fruits) // [ 'orange', 'grape', 'apple' ]
console.log(fruits.length) // 3

fruits変数に4つの要素で、配列を作成しています。
次の処理で、fruits変数からpopメソッドを呼び出しました。

こうするとfruits変数(配列)から、最後の要素が取り出されて削除されます。
そして、popValue変数に取り出された要素が代入されます。

出力すると、fruits配列から最後の要素が削除されていることが確認できました。
lengthで要素数を数えると、要素数も3つになっています。

shiftメソッドで要素を削除する

shiftメソッドを使うことでも、要素を削除することができます。
shiftメソッドを使うと、先頭から要素を取り出して削除します。

let fruits = ['orange', 'grape', 'apple', 'peach']
let shiftValue = fruits.shift()

console.log(shiftValue) // orange
console.log(fruits) // [ 'grape', 'apple', 'peach' ]
console.log(fruits.length) // 3

最初に、同じようにfruits変数(配列)を作っています。
次の処理でfruits配列からshiftメソッドを使いました。

これでfruits変数(配列)の先頭から要素が削除されて取り出されます。
そして、取り出した要素をshiftValue変数に代入しました。

それぞれの変数を出力すると、最初の要素の「orange」が配列から削除されて、取り出されたことが確認できました。
lengthで要素数を数えると、要素数も3つになっています。

spliceメソッドで要素を削除する

spliceメソッドを使うことでも、配列の要素を削除することができます。
spliceメソッドは配列に対して、要素を切り抜いたり、追加したりできるメソッドです。

例えば、下記のように使います。

let fruits = ['orange', 'grape', 'apple', 'peach', 'banana']
let spliceFruits = fruits.splice(1, 2)

console.log(spliceFruits) // [ 'grape', 'apple' ]
console.log(fruits) // [ 'orange', 'peach', 'banana' ]

最初にfruits変数に対して、5つの要素で配列を作成しています。

次の処理で、fruits配列からspliceメソッドを呼び出しています。
第1引数で渡しているのが、削除を開始したい位置です。
第2引数で渡しているのが、削除したい要素の数です。

今回は1番目の要素から、2つの要素を削除するようにしています。
指定した削除する要素が、返ってくるのでspliceFruits変数で受け取りました。

出力するとspliceFruits変数に削除するのに指定した要素の['grape', 'apple']が出力されました。
fruits配列には、指定した削除要素が消えていることが確認できました。

filterメソッドで要素を削除する

filterメソッドを使うことでも、配列から要素を削除することができます。
例えば、下記のように使うことができます。

let fruits = ['orange', 'grape', 'apple', 'peach', 'banana']

let filterFruits = fruits.filter((value) => {
    return 'grape' != value && 'peach' != value
})

console.log(filterFruits) // [ 'orange', 'apple', 'banana' ]

fruits配列を5つの要素で作成しています。

次の処理で、fruits配列からfilterメソッドを呼び出しています。
filterメソッドを使うことで、配列の要素をフィルタリングして、条件に合う要素だけを返してくれます。

filterメソッドの中に書いている処理で返す要素を判定しています。
今回はgrape・peachじゃないときに返すようにしています。

返ってきた要素をfilterFruits変数に格納して出力しました。
出力して確認すると「[ 'orange', 'apple', 'banana' ]」となりました。

配列の要素を削除する方法まとめ

今回はJavaScriptで配列の要素を削除する方法について書きました。
内容をまとめると、下記のようになります。