JavaScriptで指定要素の配列を削除する3つの方法

@ハクト 2022-06-20 13:07:35に投稿

JavaScriptで特定の配列要素を削除したい場合に使える3つのメソッドを紹介します。

filter

要素を順番に検索して、条件に当てはまる要素を抽出

let arr = ['Apple', 'Banana', 'Orange'];

//Banana以外の要素を抽出
let newArr=arr.filter(f => f !== 'Banana');
console.log(newArr);       //['Apple', 'Orange']
console.log(newArr.length) //2

splice

指定した配列要素を削除。置換、挿入も可能

let arr = ['Apple', 'Banana', 'Orange'];

arr.splice(1,1); //開始インデックスと削除する要素数を指定
console.log(arr);       //['Apple', 'Orange']
console.log(arr.length) //2

置換と挿入方法

arr.splice(1,1,'a'); //['Apple','a','Orange']
arr.splice(1,0,'a'); //['Apple','a','Banana','Orange']

delete

指定した配列要素を削除できる

let arr = ['Apple', 'Banana', 'Orange'];

delete arr[1]; //削除するインデックスを指定

console.log(arr);       //['Apple', empty, 'Orange']
console.log(arr.length) //3

※「delete」を使用した場合、要素は削除されますが、配列のインデックス番号は変わらず、配列の長さも削除前と同じになるので注意が必要です

@ハクト

サービス作り・デザイン好き。70年代生まれのWEBエンジニア。WEBパーツをCSSでカスタマイズしてコピペできるサービスを運営中「Pa-tu」。実装したWEBパーツやツールを利用してWEB情報やライフハックを発信してます。

Twitter