[Javascript] 配列から特定の要素を取り出す(splice, findIndex, pop, shift)

Javascript での配列操作

Javascriptで配列を操作する機会は多々あるかと思いますが、特定の要素を取り出す という操作の仕方をまとめます。任意の配列について、特定の要素を取り出すことで破壊的な変更を加えます。

先頭、末尾の要素を取り出す

特定の要素が先頭や末尾の要素であれば簡単です。

先頭の要素を取り出すには、shift 関数を使います。この関数は配列の先頭要素を取り除き、それを返します。配列から先頭の要素が取り除かれているのが確認できます。

いわゆる キュー からデータを取り出す操作(dequeue)です。

const a = [1, 2, 3, 4, 5];
const first = a.shift();

console.log(a);     // [2, 3, 4, 5]
console.log(first); // 1

末尾の要素を取り除くには pop 関数を使います。この関数は配列の末尾要素を取り除き、それを返します。配列から末尾の要素が取り除かれているのが確認できます。

こちらは スタック からデータを取り出す操作です。

const a = [1, 2, 3, 4, 5];
const last = a.pop();

console.log(a);     // [1, 2, 3, 4]
console.log(last);  // 5

上記の通り、特定の要素が先頭、末尾の場合は単純に shift や pop を使えば済みます。

n番目の要素を取り出す

• Array.prototype.splice() – JavaScript | MDN

任意のインデックスの要素を取り出すには、splice 関数を使います。これは、配列から指定インデックスの要素を削除し、新しい要素を挿入するための関数です。配列の要素削除や挿入を行うため、配列には破壊的な変更が加わります。

3番目の要素を取り出す

例として3番目の要素を取り出してみます。splice 関数の構文は次の通りです。

array.splice(index, howMany, [element1][, ..., elementN]);

第1引数(index)で取り出す要素のインデックスを指定し、第2引数(howMany)で指定インデックスから何個要素を取り除くかを指定します。第3引数以降は新しく挿入する要素の指定ですが、ここでは使わないので無視します。

const a = [1, 2, 3, 4, 5];
const third = a.splice(2, 1);

console.log(a);     // [1, 2, 4, 5]
console.log(third); // [3]

複数個まとめて取り出せるので、取り出した値は配列となっているという点に、注意が必要です。

指定条件に一致する要素を1つ取り出す

• Array.prototype.findIndex() – JavaScript | MDN

最後に条件を指定して要素を取り出すという処理を考えます。

findIndex 関数を使えば、指定条件に一致する要素のインデックスを返してくれます。これを使ってインデックスを取得し、あとはそのインデックスの要素を取り出せばOKです。

const a = [1, 2, 3, 4, 5];
const index = a.findIndex(n => n === 4);
const x = a.splice(index, 1);

console.log(a);     // [1, 2, 3, 5]
console.log(x);     // [4]

要素を取得するだけでなく、取り出して配列を書き換えたいためにこのような回りくどいことをしていますが、単純に値を取得したいだけなら find 関数を使うだけでよいです。

findIndex 関数は一致する要素がなければ undefineded を返すのでそのあたりの対処も必要です。

以上。

参考URL

• Array.prototype.splice() – JavaScript | MDN
• Array.prototype.findIndex() – JavaScript | MDN