JavaScriptで値が配列に存在するかチェックして次の要素を取得する方法

概要

本記事では、文字列の配列を第一引数、検索対象の値を第二引数として受け取るJavaScript関数を作成します。この関数は配列内から指定された値を検索し、その値が存在すれば配列内の次の要素を返し、存在しなければfalseを返すものです。

コード例

const arr = ["", "comp", "myval", "view", "1"]

const getNext = (value, arr) => {
  const a = [undefined].concat(arr);
  const p = a.indexOf(value) + 1;
  return a[p] || false;
}

console.log(getNext('comp', arr)); // myval
console.log(getNext('foo', arr));  // false

出力結果

コンソールには以下のように出力されます。

myval
false

コードの解説

この実装のポイントは以下の3点です。

• [undefined].concat(arr)：元の配列の先頭にundefinedを連結しています。これにより、各要素のインデックスが1つずつ後ろにずれ、「次の要素」へのアクセスが容易になります。
• a.indexOf(value) + 1：検索値の位置の「次」のインデックスを計算します。値が見つからない場合、indexOf()は-1を返すため、+1すると0となり、先頭に追加したundefinedを参照することになります。
• a[p] || false：取得した要素がundefinedなどのfalsyな値であればfalseを返します。

注意点

この方法では、次の要素が空文字列（""）の場合もfalsyと判定されてfalseが返される点に注意が必要です。より厳密に判定したい場合は、includes()で存在確認を行ってから要素を取り出す方法が有効です。

別のアプローチ：includes() を使う方法

const getNext = (value, arr) => {
  if (!arr.includes(value)) return false;
  const i = arr.indexOf(value);
  return i === arr.length - 1 ? false : arr[i + 1];
}

console.log(getNext('comp', arr)); // myval
console.log(getNext('foo', arr));  // false

こちらの方法では、次の要素が空文字列であっても正しくその値が返されます。また、検索値が配列の末尾にある場合（次の要素が存在しない場合）にもfalseを返すため、意図が明確で読みやすい実装といえます。用途に応じて使い分けるとよいでしょう。