JavaScript を使用して配列内の要素を検索する方法: DOM の例を含む包括的なガイド

配列内の要素を検索することは、JavaScript プログラミングの一般的なタスクです。 ?項目が存在するかどうかを確認する場合でも、そのインデックスを取得する場合でも、リストをフィルタリングする場合でも、JavaScript には配列を操作するためのメソッドがいくつか用意されています。 ?このガイドでは、配列内の要素を検索するためのさまざまなアプローチを取り上げ、これらのメソッドを DOM と組み合わせて使用​​してインタラクティブな Web アプリケーションを作成する方法を示します。 ?✨

目次

1 JavaScript 配列の概要
要素を検索するための 2 つの基本的な方法
|- IndexOf()
を使用する |- find()
を使用する |- findIndex()

を使用する

要素を検索するための 3 つの高度な方法
|- include()
の使用 |- filter() を使用する

4 DOM を使用した簡単な例
5 結論

JavaScript 配列の概要

JavaScript 配列は、複数の値を 1 つの変数に格納できる多用途のデータ構造です。配列には、文字列、数値、オブジェクト、さらにはその他の配列など、さまざまなデータ型の要素を保持できます。以下に例を示します:

let fruits = ['Apple', 'Banana', 'Mango', 'Orange'];

上記の配列には 4 つの要素が含まれています。次のセクションでは、このような配列内の要素を検索するためのさまざまな方法を検討します。

要素を検索するための基本的な方法

JavaScript には、配列内の要素を検索するためのいくつかの組み込みメソッドが用意されています。以下に、一般的に使用されるメソッドをいくつか示します:

indexOf() の使用
IndexOf() メソッドは、指定された要素が最初に出現したインデックスを返します。要素が見つからない場合は -1 を返します。

構文:

array.indexOf(searchElement, fromIndex);

例

let fruits = ['Apple', 'Banana', 'Mango', 'Orange'];
let position = fruits.indexOf('Mango');
console.log(position); // Output: 2

この例では、「Mango」は​​インデックス 2 にあります。

find() の使用
find() メソッドは、指定された条件を満たす最初の要素を返します。一致する要素がない場合は未定義を返します。

構文:

array.find(function(element, index, array) { /* ... */ });

例

let numbers = [5, 12, 8, 130, 44];
let found = numbers.find(element => element > 10);
console.log(found); // Output: 12

ここでは、10 より大きい最初の数値は 12 です。

findIndex() の使用
findIndex() メソッドは find() に似ていますが、条件を満たす最初の要素のインデックスを返します。

構文:

array.findIndex(function(element, index, array) { /* ... */ });

例:

let numbers = [5, 12, 8, 130, 44];
let index = numbers.findIndex(element => element > 10);
console.log(index); // Output: 1

この場合、10 より大きい最初の要素のインデックスは 1 です。

要素を検索するための高度な方法

includes() の使用
include() メソッドは、配列に指定された要素が含まれているかどうかをチェックし、true または false を返します。

構文:

array.includes(searchElement, fromIndex);

例:

let fruits = ['Apple', 'Banana', 'Mango', 'Orange'];
let hasBanana = fruits.includes('Banana');
console.log(hasBanana); // Output: true

filter() の使用
filter() メソッドは、指定された条件を満たす要素を含む新しい配列を返します。

構文:

let fruits = ['Apple', 'Banana', 'Mango', 'Orange'];

例:

array.indexOf(searchElement, fromIndex);

DOM を使用した簡単な例

これらの概念をより実践的にするために、上記の配列メソッドを使用し、結果を Web ページ上に動的に表示する単純な Web アプリケーションを作成しましょう。

HTML 構造
Index.html という名前の HTML ファイルを作成します:

let fruits = ['Apple', 'Banana', 'Mango', 'Orange'];
let position = fruits.indexOf('Mango');
console.log(position); // Output: 2

この HTML には、結果が表示されるボタンと段落が含まれています。

JavaScript コード (script.js)
次のコードを使用して、script.js という名前の JavaScript ファイルを作成します:

array.find(function(element, index, array) { /* ... */ });

コードの説明

1. findCar(): IndexOf() を使用して「Ford」のインデックスを検索し、それに応じて result1 の内容を更新します。
2. findLongNameCar(): find() を使用して 4 文字以上の車名を検索し、結果を result2 に表示します。
3. checkForAudi(): include() を使用して「Audi」が配列内にあるかどうかを確認し、結果を result3 に表示します。
4. filterCars(): filter() を使用して「B」で始まるすべての車を検索し、結果を更新します。

サンプルの実行
Webブラウザでindex.htmlファイルを開きます。ボタンをクリックしてさまざまな配列メソッドの動作を確認し、動的に表示される結果を観察します。

JavaScript 配列メソッドと DOM 操作を組み合わせることで、ユーザーのアクションに応答するインタラクティブな Web ページを作成できます。 ?このガイドでは、基本的な配列検索テクニックと高度な配列検索テクニックを取り上げ、これらのメソッドを DOM と統合する方法の実践的な例を示しました。 ??これらのテクニックを使用して、JavaScript スキルを強化し、より動的な Web アプリケーションを構築します。 ?✨

コーディングを楽しんでください! ?

以上がJavaScript を使用して配列内の要素を検索する方法: DOM の例を含む包括的なガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。