JS を使用して配列内の要素の存在を 10 分で判断する

JS を使用して配列内の要素の存在を 10 分で判断する

序文

フロントエンド開発では、配列内に要素が存在するかどうかを判断する必要があることがよくあります。実は、判断方法はたくさんあるんです。一つずつ見ていきましょう。

まず配列を定義しましょう:

定数arr = [
 13、
 間違い、
 'abcd',
 未定義、
 13、
 ヌル、
 ナン、
 [1, 2],
 { a: 123 },
 () => Date.now(),
 新しい日付('2021/03/04')、
 新しい正規表現('abc', 'ig')、
 シンボル('sym')、
];

この配列には、数値、ブール値、文字列、未定義、null、配列、オブジェクト、日付、シンボルなど、いくつかの型が含まれます。数字13は2回現れます。

準備して来てください

1. インデックス

最も馴染み深いのは indexOf です。何と言っても早くから登場し、互換性も良く、使いやすいです。

要素が存在する場合は、最初の出現のインデックスを返します。要素が配列全体に存在しない場合は、-1 を返します。

1.1 使用方法

返されたデータが -1 かどうかを判断できれば、配列に要素が含まれているかどうかがわかります。

arr.indexOf(13) >= 0; // true、indexOfは0を返す
arr.indexOf(2) >= 0; // false、indexOfは-1を返す

indexOf に対応する関数は lastIndexOf で、末尾から先頭に向かって要素を検索します。要素が存在する場合は、配列の最後のインデックスを返します。要素が存在しない場合は -1 を返します。

arr.lastIndexOf(13) >= 0; // true、lastIndexOfは最後の出現のインデックスである4を返します

変数が存在するかどうかを判断するときに、2 つのメソッドが同じ方法で呼び出されます。

1.2 2番目のオプションパラメータ

indexOf と lastIndexOf には、検索を開始するインデックスを示すために使用される 2 番目のオプション パラメーター fromIndex もあります。

indexOf では、fromIndex が配列の長さを超える場合は、直接 -1 が返されます。負の数の場合は、末尾からいくつかのインデックスをカウントし (arr.length-Math.abs(fromIndex))、逆方向に検索を開始します。

lastIndexOf では、fromIndex が配列の長さに達するかそれを超える場合、配列全体が検索されます。負の数の場合は、末尾からいくつかのインデックスをカウントし (arr.length-Math.abs(fromIndex))、次に前方検索を開始します。負の数の絶対値が配列の長さを超える場合は、-1 が直接返されます。

arr.indexOf(13, 2); // 4、インデックス 2 から検索を開始、13 の最初のインデックスは 4 です
arr.indexOf(13, -10); // 4、インデックス 1 (11-10) から前方に検索 arr.lastIndexOf(13, 2); // 0、インデックス 2 から前方に検索 arr.lastIndexOf(13, -2); // 4、インデックス 9 (11-2) から前方に検索

さらに、indexOf と lastIndexOf は厳密な等価性メソッド (===) を使用して判断します。

arr.indexOf(null); // 5、nullとundefinedの前にいくつかの偽値があり、これもnullのインデックス値を正確に見つけることができます

2. 含まれるもの

indexOf は主に要素のインデックス値を見つけるために使用されますが、返されたインデックス値を使用して、要素が配列内に存在するかどうかを間接的に判断することもできます。

ES7 (ES2016) で追加された include メソッドは、特に要素が存在するかどうかを判断するために使用されます。戻り値は true または false で、true は存在を意味し、false は非存在を意味し、単純かつ明確です。

arr.includes(13); // 真
arr.includes('abc'); // 偽
arr.includes(false); // true、false 要素が存在する

同時に、includes メソッドには 2 番目のオプション パラメータ fromIndex もあります。fromIndex の使用方法は indexOf の場合と同じです。 fromIndex が配列の長さを超える場合は、直接 -1 が返されます。負の数の場合は、末尾からいくつかのインデックスをカウントし (arr.length-Math.abs(fromIndex))、逆方向に検索を開始します。

arr.includes(13, 5); // false、インデックス5以降から検索、結果は見つからない

これまでのところ、配列、オブジェクト、日付、シンボルなどの型は判断されていません。それでは、次の要素を判断してみましょう。

// indexOf を使って判断する arr.indexOf(NaN); // -1
arr.indexOf([1, 2]); // -1
arr.indexOf({ a: 123 }); // -1
arr.indexOf(() => Date.now()); // -1
arr.indexOf(新しい日付('2021/03/04')); // -1
arr.indexOf(新しい正規表現('abc', 'ig')); // -1
arr.indexOf(Symbol('sym')); // -1

// 判断にはincludesを使用します arr.includes(NaN); // false
arr.includes([1, 2]); // 偽
arr.includes({ a: 123 }); // 偽
arr.includes(() => Date.now()); // false
arr.includes(新しい日付('2021/03/04')); // 偽
arr.includes(新しいRegExp('abc', 'ig')); // false
arr.includes(Symbol('sym')); // 偽

結果は悲惨で、これらの要素はいずれも配列内に見つかりません。しかし、実際には、それらはすべて配列内に存在します。

これは、indexOf と include の両方が厳密な等価性 (===) によって決定されるためです。

NaN === NaN; // false、2つのNaNが等しくなることはありません [1, 2] === [1, 2]; // false、宣言された各配列には個別のストレージアドレスがあります {a: 123} === {a: 123}; // false、同じ配列 new Date('2021/03/04')===new Date('2021/03/04'); // false、日付は同じに見えますが、新しいオブジェクトと比較すると、明らかに等しくありません Symbol('sym')===Symbol('sym'); // Symbol型は競合を避けるために作成されました。括弧内のプロパティは説明の便宜上のみです

取得できないこれらの型については、特殊な型を判別するための独自の関数を記述する必要があります。

3. find と findIndex

find() と findIndex() を使用すると、コールバック関数を通じて判定方法をカスタマイズできます。

3.1 メソッドの検索

find() メソッドは、指定されたテスト関数を満たす配列の最初の要素の値を返します。それ以外の場合は undefined を返します。

find() メソッドは配列内の未定義の要素を検出できません。

find() メソッドは、要素が存在しないかどうかに関係なく undefined を返すためです。ここでは他の方法を考慮する必要がありますが、これについては後で説明します。

arr.find((item) => item === 13); // 13、要素13が見つかりました
arr.find((item) => item === 3); // 未定義、要素 3 が見つからない
arr.find((item) => item === undefined); // undefined、見つかったかどうかはわかりません

上記の少し複雑なタイプについては、特別な判断が必要です。

arr.find((item) => typeof item === 'number' && isNaN(item)); // NaN

// 配列とオブジェクト型を比較す​​る場合、各要素の型を判別できないため、状況は複雑になります。 // すべて文字列、数値、ブール値、未定義、null などの基本型であることが確実な場合は、文字列に変換してから比較できます。 // 文字列を変換する方法は、JSON.stringify(arr)、arr.toString()、arr.split('|') など、多数あります。 // より複雑な場合は、1 つずつ比較するか、再帰を使用するしかありません。arr.find((item) => item.toString() === [1, 2].toString()); // [1, 2]
arr.find((item) => JSON.stringify(item) === JSON.stringify({ a: 123 })); // {a: 123}
arr.find((アイテム) => {
 if (typeof item === 'function') {
 item.toString() === (() => Date.now()).toString() を返します。
 }
 false を返します。
}); // () => Date.now()
arr.find((アイテム) => {
 if (item instanceof Date) {
 item.toString() を返します === new Date('2021/03/04').toString();
 }
 false を返します。
}); // 2021年3月4日(木)00:00:00 GMT+0800
arr.find((アイテム) => {
 if (item instanceof RegExp) {
 item.toString() を返します === new RegExp('abc', 'ig').toString();
 }
 false を返します。
}); // /abc/gi

// シンボルは比較できません。説明が同じかどうかのみ比較できます。arr.find((item) => {
 if (typeof item === 'シンボル') {
 item.toString() === Symbol('sym').toString() を返します。
 }
 false を返します。
}); // シンボル(sym)

上記の判定コードは、以下の方法でも使用されます。

3.2 2つの要素の比較

上記では様々な要素を比較してきましたが、簡単にまとめてみましょう。

まず関数を定義しましょう:

const compare = (x, y) => {};

3.2.1 基本型

文字列、数値、ブール値、未定義、null などの基本型の要素については、直接比較できます。

定数比較 = (x, y) => {
 x === y を返します。
};

3.2.2 NaNデータ

NaN は typeof を使用して数値型かどうかを判断しますが、NaN はそれ自身を含むどの数値とも等しくありません。

定数比較 = (x, y) => {
 (typeof x === 'number' && isNaN(x) && typeof y === 'number' && isNaN(y)) {
  true を返します。
 }
 x === y を返します。
};

3.2.3 関数、日付、正規表現

これらの型は、比較のために変数を文字列に変換するために使用できます。

定数比較 = (x, y) => {
 (typeof x === 'number' && isNaN(x) && typeof y === 'number' && isNaN(y)) {
  true を返します。
 }
 もし (
  (typeof x === '関数' && typeof y === '関数') ||
  (x インスタンスの日付 && y インスタンスの日付) ||
  (x 正規表現のインスタンス && y 正規表現のインスタンス) ||
  (x 文字列インスタンス && y 文字列インスタンス) ||
  (x インスタンスの数値 && y インスタンスの数値)
 ){
  x.toString() === y.toString() を返します。
 }
 x === y を返します。
};

オブジェクト型と配列の場合、各項目を分離し、上記の方法を使用して 1 つずつ比較することができます。

3.3 findIndex メソッド

配列内に undefined があるかどうかも確認したい場合は、findIndex() メソッドを使用できます。

findIndex() メソッドは、指定されたテスト関数を満たす配列の最初の要素のインデックスを返します。対応する要素が見つからない場合は -1 が返されます。

arr.findIndex((item) => item === 未定義); // 3
arr.findIndex((item) => item === 3); // -1、3番目が見つからない

他のデータ形式の判定は上記の find() と同様です。

珍しいゲスト

4. いくつか

some() メソッドは、指定された関数のテストに合格する要素が配列内に少なくとも 1 つあるかどうかをテストします。ブール値を返します。

注: 空の配列でテストすると、すべてのケースで false が返されます。

some() メソッドは find() メソッドと同じように使用されますが、some() メソッドはブール型のデータを返す点が異なります。

arr.some((item) => item === false); // true
arr.some((item) => item === undefined); // true
arr.some((item) => typeof item === 'number' && isNaN(item)); // true
arr.some((item) => item === 3); // false、数字3は存在しない
arr.some((アイテム) => {
 if (item instanceof Date) {
  item.toString() を返します === new Date('2021/03/04').toString();
 }
 false を返します。
}); // 真実

5. フィルター

filter() メソッドは、指定された関数によって実装されたテストに合格したすべての要素を含む新しい配列を作成します。

見つかった要素の数や要素が見つからなくても、filter() メソッドは配列を返し、配列内のデータが必要な要素になります。

arr.filter((item) => item === false); // 1
arr.filter((item) => item === 未定義); // 1
arr.filter((item) => typeof item === 'number' && isNaN(item)); // 1
arr.filter((item) => item === 13); // 2
arr.filter((item) => item === 3); // 0
arr.filter((アイテム) => {
 if (item instanceof Date) {
  item.toString() を返します === new Date('2021/03/04').toString();
 }
 false を返します。
}); // 1

したがって、配列の長さを使用して、元の配列に必要な要素が含まれているかどうかを判断できます。

わずかに

6. 結論

配列内の要素を見つける方法はたくさんあります。配列内の要素の形式に基づいて、より適切な方法を選択できます。すべて基本型の場合は、まず include() メソッドを使用することをお勧めします。形式がより複雑な場合は、 some() メソッドを使用することをお勧めします。どちらのメソッドもブール型を直接返すため、メソッドの結果はそれ以上の変換なしで直接使用できます。

これで、JS を使用して 10 分で配列に要素があるかどうかを判断するさまざまな方法についての記事は終了です。JS を使用して配列に要素があるかどうかを判断する方法に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • JavaScript で配列に指定された要素が含まれているかどうかを判断する方法
  • 要素が配列内にあるかどうかを判断するための JS 実装コード
  • 配列内に重複要素があるかどうかを判定するJSの方法の概要
  • 配列に特定の要素がすでに含まれているかを判断するJavaScript関数
  • 配列に特定の要素が含まれているかどうかを判定するJS実装例
  • 配列に要素が含まれているかどうかを判断するための js 関数実装メソッド
  • 配列に要素が含まれているかどうかを判断するためのjs拡張メソッドを記述する
  • JavaScript で配列内の要素が繰り返されているかどうかを判断するためのメソッドのコレクション
  • 配列に特定の要素が含まれているかどうかを判断するには js を使用します (PHP の in_array() と同様)
  • 配列に要素が含まれているかどうかを判断するための JS メソッドの概要

<<:  MySql バッチ挿入の最適化 SQL 実行効率の例の詳細な説明

>>:  Linux システムで時間を取得して使用する方法

推薦する

Vueデータ変更検出の基本的な実装の簡単な分析

目次1. オブジェクトの変更検出2. オブジェクトに関する質問配列変更検出3.1 背景3.2 実装I...

MySQL でのログインを取り消す

コンセプト紹介: MySQL の redo ログにはトランザクションの動作が記録されることはご存じの...

VSCode と SSH を使用したリモート開発

0. リモート開発が必要な理由組み込み Linux を開発する場合、便宜上、通常は Windows ...

MySQLのカバーインデックスに関する知識ポイントのまとめ

インデックスにクエリする必要があるすべてのフィールドの値が含まれている(またはカバーしている)場合、...

Docker Composeでコンテナ管理の問題を解決する

Docker の設計では、コンテナは 1 つのアプリケーションのみを実行します。しかし、現在のアプリ...

Nginx 経由で Tomcat9 クラスターを構築し、セッション共有を実現する

Nginx を使用して Tomcat9 クラスターを構築し、Redis を使用してセッション共有を実...

Nodejsはgitee実装コードに自動的に同期するドキュメント同期ツールを作成します

本来の意図このツールを作った理由は、コンピューターを使用しているときにいつでも毎日の仕事や生活を記録...

Vue プロジェクトで SVG コンポーネントをパッケージ化して構成する手順

最近新しい会社に入社しました。プロジェクトに携わった後、タイトルアイコンが svg で作られていると...

MySQL ビューの原則分析

目次更新可能なビュービューのパフォーマンスビューの制限ビューは MySQL 5.0 以降で導入されま...

MySQL の左結合操作における on 条件と where 条件の違いの紹介

優先度両方のケースで同じ条件を設定すると、異なる結果セットが生成される可能性があるのは、優先順位のた...

MySQLの日次統計レポートでは、その日にデータがない場合には0が入力されます。

1. 問題の再現:各日の合計数を日ごとにカウントします。データのない日がある場合、グループ化によっ...

js の関数の長さはどれくらいですか?

目次序文なぜいくらですか?パラメータの数デフォルトパラメータ残りのパラメータ要約する序文今日は関数の...

「いいね!」機能では MySQL と Redis のどちらを使用すればよいでしょうか?

目次1. 初心者が陥りがちな間違い2. Iteratorのremove()メソッドを使用する3. f...

MySQL インデックスの失敗を引き起こす一般的な書き込み方法の概要

序文最近、古いプロジェクトから残ったいくつかの SQL 最適化の問題に対処するのに忙しくしています。...

MySQL countの詳細な説明と関数のサンプルコード

mysql countの詳細な説明count関数はテーブルや配列内のレコードを数えるために使われます...