JavaScriptの配列で検索する方法|コード付きで徹底解説

※本サイトにはプロモーション・広告が含まれています。

(最終更新月:2023年12月)

✔この記事は下記の疑問を抱く方々に特化しています

「Javascriptの配列検索とはどのようなもの?」

「Javascriptの配列検索の書き方を学びたい」

「Javascriptの配列検索の具体的な例を見て理解したい」

✔当記事を読み進めることで把握できること

  • Javascriptの配列検索の基本的な概念
  • Javascriptの配列検索の具体的な書き方とその使い道
  • Javascriptの配列検索の実例

記事の内容は、Javascriptの配列検索の基礎から、その活用方法まで範囲が広く、具体的な例を用いて詳細に解説しています。

ぜひ記事の最後までご覧ください。

筆者プロフィール

筆者プロフィールアイコン

【現職】プロジェクトマネージャー/SE(元外資系金融機関営業)

【副業】ブログ(月間15万PV)/YouTube/Web・アプリ制作

コミュニケーション × ビジネススキル × 文章力 × プログラミングスキルを活かし、30後半からのIT系職へシフト。当サイトでは、実際に手を動かせるWebアプリの開発を通じて、プログラミングはもちろん、IT職に必要な情報を提供していきます。

【当ブログで紹介しているサイト】

当サイトチュートリアルで作成したデモ版日報アプリ

Django × Reactで開発したツール系Webアプリ

✔人に見せても恥ずかしくないコードを書こう

「リーダブルコード」は、わかりやすく良いコードの定義を教えてくれる本です。

  • 見るからにきれいなコードの書き方
  • コードの分割方法
  • 変数や関数の命名規則

エンジニアのスタンダートとすべき基準を一から解説しています。

何回も読むのに値する本なので、ぜひ手にとって読んでみてください。

配列操作の基本: 構文とメソッド

配列の基本的な構文から始めて、各メソッドの引数と返値についても詳しく見ていきます。

  • 配列の構文
  • メソッドの引数と返値: 初心者から上級者へ

配列の構文

let fruits = ['apple', 'banana', 'cherry'];

この構文は配列を作成する最も一般的な方法です。

上記の例では、3つの文字列が含まれるfruitsという名前の配列を作成しています。

メソッドの引数と返値: 初心者から上級者へ

配列メソッドは、さまざまな引数を取り、それに応じた値を返します。

これらのメソッドを適切に使用することで、データの操作が単純かつ効率的におこなえます。

配列を検索するJavaScriptのメソッド

ここでは、JavaScriptで提供されている主な配列検索メソッドについて学びます。

  • 要素の存在を確認: “includes”
  • 要素の位置を見つける: “indexOf”
  • 特定の要素を調査: “find”
  • 素元のフィルタリング: “filter”

要素の存在を確認: “includes”

let fruits = ['apple', 'banana', 'cherry'];
console.log(fruits.includes('banana')); // trueを返す

includesメソッドは配列内に特定の要素が存在するかどうかを確認します。

要素の位置を見つける: “indexOf”

console.log(fruits.indexOf('cherry')); // 2を返す

indexOfメソッドは指定した要素が配列内に存在する場合、その位置(インデックス)を返します。

特定の要素を調査: “find”

let numbers = [3, 6, 8, 12];
let found = numbers.find(element => element > 7);
console.log(found); // 8を返す

findメソッドは、指定したテスト関数を満たす最初の要素を返します。

素元のフィルタリング: “filter”

let filtered = numbers.filter(element => element > 5);
console.log(filtered); // [6, 8, 12]を返す

filterメソッドは、テスト関数を満たす全ての要素で新しい配列を作成します。

実践!配列検索の具体的な例

実際に配列メソッドを使って、特定のタスクを解決する具体例を見ていきましょう。

  • 配列内のオブジェクトを属性で探す
  • 「アロー関数」と「分割代入」を使いこなす
  • 配列で素数を検索する方法
  • 疎配列とfind()メソッドの組み合わせ
  • 配列でないオブジェクトでfind()メソッドを使うケース

配列内のオブジェクトを属性で探す

let users = [
  { id: 1, name: 'John' },
  { id: 2, name: 'Jane' },
  { id: 3, name: 'Mark' }
];

let user = users.find(user => user.id === 2);
console.log(user.name); // "Jane"を出力

このコードは、idが2のユーザーを配列から探し、その名前を出力します。

「アロー関数」と「分割代入」を使いこなす

let colors = [
  { id: 1, hex: '#ff0000' },
  { id: 2, hex: '#00ff00' }
];

let [firstColor] = colors.filter(color => color.id === 1);
console.log(firstColor.hex); // "#ff0000"を出力

アロー関数と分割代入を組み合わせることで、コードをより読みやすく簡潔に保てます。

配列で素数を検索する方法

let numbers = [4, 6, 7, 10, 11];

function isPrime(num) {
  for (let i = 2, s = Math.sqrt(num); i <= s; i++) {
    if (num % i === 0) return false; 
  }
  return num > 1;
}

let primes = numbers.filter(isPrime);
console.log(primes); // [7, 11]を出力

この関数isPrimeは素数かどうかを判断し、filterメソッドを使って配列から素数のみを抽出します。

疎配列とfind()メソッドの組み合わせ

let array = [undefined, null, 0, 'Hello', false];
let found = array.find(element => element !== undefined && element !== null);
console.log(found); // 0を出力

疎配列では、未定義の要素を飛ばして最初の「実際の」要素を見つけられます。

配列でないオブジェクトでfind()メソッドを使うケース

let pseudoArray = { 0: 'a', 1: 'b', 2: 'c', length: 3 };
let arrayLike = Array.prototype.slice.call(pseudoArray);
let found = arrayLike.find(char => char === 'b');
console.log(found); // "b"を出力

配列風のオブジェクト(Array-like Object)から実際の配列を生成し、find()メソッドを適用する例です。

よくある質問&答え

JavaScriptで配列を検索する際に出くわす可能性のある一般的な疑問に対する答えを提供します。

findメソッドとfilterメソッドの違いは何ですか?

findメソッドは配列内の最初の要素を返すのに対し、filterメソッドは条件に合致するすべての要素を新しい配列として返します。

includesメソッドがfalseを返す場合、それは配列にその要素がないということですか?

はい、その通りです。

includesメソッドは指定した要素が配列内に存在するかどうかを確認し、存在する場合はtrue、そうでない場合はfalseを返します。

indexOfメソッドで見つからない要素のインデックスはどうなりますか?

indexOfメソッドは要素が見つからない場合に-1を返します。

疎配列でfindメソッドを使う時、未定義の要素はどう扱われますか?

findメソッドは未定義の要素を無視して、最初に見つかった定義されている要素を返します。

まとめ

当記事では、Javascriptの配列検索について学習してきました。

配列は複数の値を順序付けて保持するためのJavaScriptのデータ構造です。

今回学んだincludesindexOffindfilterといったメソッドは、配列の中から特定の条件にマッチする要素を見つけ出すために非常に有用です。

これらのメソッドを適切に使用することで、データの検索、チェック、抽出が簡単かつ効率的におこなえるようになります。

タイトルとURLをコピーしました