JavaScript配列削除で気になること3つを解説！(splice,filterも)
abyblog
「JavaScriptの配列削除でわからないところをまとめてほしい」
今回は、このような人のために、
JavaScriptで配列削除をするための3つの方法を解説いたします。
実際に実行可能なコードとしてテストしていますので、ぜひ自身の環境でコピペして実行してみてください！
目次（クリックで読みたい部分にジャンプできます）
指定した場所を削除～spliceメソッド～
splice()メソッドは、指定された位置から指定された数の要素を削除し、必要に応じて新しい要素を追加することができます。
splice の使い方
配列.splice ( 開始位置 , 長さ ,追加したい要素1 , 追加したい要素2 , ... )
※「開始位置、長さ」は必須、「追加したい要素」は任意
spliceメソッドは、要素を削除して、詰めてしまうので、全体の要素数が変わってしまうことに注意しましょう。
全体の要素数を変えたくない場合は、次で紹介するdeleteメソッドを使うといいですね。
以下は、配列の2番目の要素を削除する例です。
let arr = [1, 2, 3, 4, 5];
arr.splice(1, 1);
console.log(arr); // [1, 3, 4, 5]
spliceは要素を削除して、追加することも可能です。
let arr = [1, 2, 3, 4, 5];
arr.splice(1, 1,"10", "20");
console.log(arr); // [1, "10","20",3, 4, 5]詳しくは以下の記事で紹介していますので、併せてご覧ください。
指定した場所を削除～deleteメソッド～
deleteメソッドを使用することで、配列の指定された要素を削除することができます。
delete の使い方
配列.delete [ 削除位置 ]
※（ ではなく、[ になっているので注意しましょう。
ただし、delete演算子は、要素を削除するだけで、削除された要素のインデックスにはundefinedが残ります。
以下は、配列の2番目の要素を削除する例です。
let arr = [1, 2, 3, 4, 5];
delete arr[1];
console.log(arr); // [1, undefined, 3, 4, 5]
もし、undefinedを削除したい場合はどうすればいいの？
filterメソッドを使うと、undefinedを消して、要素を詰めることができるよ！
次のように使ってみてね！
let arr = [1, 2, 3, 4, 5];
delete arr[1];
arr = arr.filter(Boolean);
console.log(arr); // [1, 3, 4, 5]条件を指定して削除～filterメソッド～
filter メソッドは、コールバック関数の条件が trueとなったときの配列の要素のみを保持する新しい配列を作成します。
filterの使い方
let 新しい配列 = 配列.filter ( value, index , arry ) => {
return 真偽値
} [, _this]
※コールバック関数（=> がつく関数）がよくわからなかったら下の例のfunctionを使ったものから慣れていってね！
こ、、、コールバックかんすう？？
=> がついている関数を「コールバック関数」というよ！
よくわからなかったら下の例のfunctionを使ったものでも、filterメソッドを使えるから、そこから慣れていってね！
let arr = [1, 2, 3, 4, 5];
function gt3(value){
return value > 3;
}
const newArr = arr.filter( gt3 );
console.log( newArr ) //[4, 5]まとめ
今回は、JavaScriptの配列削除で気になる、３つのメソッドを紹介しました。
以下の記事では、配列追加についても解説しています。
ぜひ併せてご覧ください！
