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

はじめに

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

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

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

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


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

1. 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」が削除されています。

2. 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メソッド

の4つがあります！

個人開発などにおいて、配列や連想配列から要素を削除する機能を付けたいということが多々あると思います。そんな時に、通常のpop()やshift()だけでなく、spliceメソッドやfilterメソッドを選択肢に入れてみてください！
拙い投稿ですが、最後まで読んでくださり、ありがとうございます！

参考文献

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