はじめに

こんにちは！プログラミング初心者なのですが、今日は、初めてQiitaに記事を投稿します。
現在、ReactでToDoListアプリケーションの作成に挑戦しているのですが、今日はその途中で、配列の要素の削除に関してプチ「アハ体験」をしたので、備忘録も兼ねて投稿します！

一般的な配列から要素を削除する方法

JavaScriptの入門書等によく書いてある、要素の削除方法は次の2つ。

pop() 配列の末尾の要素を取得し、削除する。
shift() 配列の先頭の要素を取得し、削除する。

pop()

sample.js

let arry = ["a", "b", "c", "d", "e"];
let poppedArry = arry.pop();

console.log(arry); // ["a", "b", "c", "d"]
console.log(poppedArry); // e

上記のように、配列の末尾にある要素、今回の例では「e」を取得してきて、それを変数poppedArryに格納し、元の配列arryからは、「e」が削除されています。

shift()

sample.js

let arry2 = ["あ", "い", "う",  "え", "お"];
let shiftedArry2 = arry2.shift();

console.log(arry2); // ["い", "う", "え", "お"]
console.log(shiftedArry2); // あ

上記のように、配列の先頭にある要素、今回の例では「あ」を取得してきて、それを変数shiftedArry2に格納し、元の配列arry2からは、「あ」が削除されています。

本来は削除のための文法ではないけど削除できる文法その1!

sample.js

let arry3 = [1, 2, 3, 4, 5];
let splicedArry3 = arry3.splice(1,3);

console.log(arry3); // [1, 5]
console.log(splicedArry3); // [2, 3, 4]

上記の例では、spliceメソッドを使っています。このspliceメソッドとは、
splice(開始インデックス番号, 開始からn番目, 置き換え1, ...置き換えn);
のように、要素を置き換える働きを主にします。
しかし、上記の例にあるように、開始インデックス番号と開始からn番目の2つのみを指定し、置き換える要素を指定しなければ、それらの指定された区間(開始~n番)の要素が削除されるのです！

本来は削除のための文法ではないけど削除できる文法その2!

sample.js

let arry4 = [
{ id: 1, title: "絵本"},
{ id: 2, title: "小説"},
{ id: 3, title: "参考書" }
]
let filteredArry4 = arry4.filter(arry4 =>
    arry4.id !== 2);

console.log(filteredArry4); 
/* 
{id: 1, title: "絵本"}
{id: 3, title: "参考書"}
*/
console.log(arry4); 
/* 
{id: 1, title: "絵本"}
{id: 2, title: "小説"}
{id: 3, title: "参考書"}*/

上記の例では、filterメソッドを使っています。このfilterメソッドとは、
filter(function(value, index, array){
return 条件
});
のように、条件に合った要素で新たに配列を形成する働きを主にします。
しかし、上記の例にあるように、「連想配列のidが2ではない」を条件として、その条件に
合う要素を、変数filteredArry4に条件に合う要素のみを集めた新しい配列として格納します。元の配列arry4を見てみると、こちらでは、削除は実行されず、元のままです。

まとめ

JavaScriptで、配列・連想配列から要素を削除する時に使える文法には、

pop()
shift()
spliceメソッド
filterメソッド

参考文献

山田祥寛著『改訂新版 JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで』(2018)
※第1刷は、2016年。