JavaScriptで配列の要素の中から条件をみたす要素だけを取得するfindメソッドとfindIndexメソッドの使い方

JavaScriptで配列を扱う際、複数の配列の要素の中から、特定の条件を満たす要素だけを取得したい時があります。一種のフィルター機能です。

やり方が 2つありますので、それぞれ紹介します。

構文

メソッド

メソッド意味返り値
配列.find(コールバック関数)コールバック関数の条件を満たす最初の要素を取得要素
配列.findIndex(コールバック関数)コールバック関数の条件を満たす最初の要素のインデックス番号を取得数値
find() findIndex()メソッド

コールバック関数

構文意味返り値
([要素],[インデックス],[元配列]) => 真偽値要素を受け取って、条件を満たすかどうかの真偽値を返す。真偽値
find() findIndex()メソッドのコールバック関数

サンプルコード

サンプルコードとして、IDとプログラミング言語・ライブラリを紐付けてく配列を用意しておいて、フォームに数字を入力して、合致する物が会ったら出力するサンプルコードを紹介します。

Output

Pug
.container.my-5
		.search-word-wrapper
			label プログラミング言語・ライブラリを番号から検索
				input.mt-2#search-id-input(type="number").form-control
		p#search-result.text-center 
SCSS
.search-word-wrapper {
  grid-area: search-word;
  padding: 20px;
  background-color: #576574;
  text-align: center;
	label {
		color:#fff;
	}
}
JavaScript
// idキーとlanguageキーを持つデータ配列
const DataLists = [
  { id: 1, language: 'HTML' },
  { id: 2, language: 'CSS' },
  { id: 3, language: 'JavaScript' },
	{ id: 4, language: 'SCSS' },
	{ id: 5, language: 'jQuery' },
	{ id: 6, language: 'React JS' },
	{ id: 7, language: 'PHP' },
	{ id: 8, language: 'WordPress' },
	{ id: 9, language: 'AWS' },
];

/** 検索IDを入力するinput要素 */
const searchIdInput = document.getElementById('search-id-input');

/** 検索結果を表示する要素 */
const searchResult = document.getElementById('search-result');

// 文字が入力される度に、内容のチェックを行う
searchIdInput.addEventListener('keyup', () => {
  // 検索IDを取得する
  const searchId = Number(event.target.value);
  findLanguage(searchId);
});
searchIdInput.addEventListener('click', () => {
  // 検索IDを取得する
  const searchId = Number(event.target.value);
  findLanguage(searchId);
});

/*** 言語を検索する */
function findLanguage(searchId) {
  // 該当データを取得する
  const targetData = DataLists.find((data) => data.id === searchId);
	const targetDataIndex = DataLists.findIndex((data) => data.id === searchId);
  // 該当データが存在しなかったら、「該当なし」と表示して終了
  if (targetData == null) {
    searchResult.textContent = '該当なし';
    return;
  }

  // 該当データの名前を表示する
  searchResult.textContent = `言語は${targetData.language}でインデックス番号は${targetDataIndex}です。`;
}
インストラクター
コメント

コメントを残す