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 システムで時間を取得して使用する方法

推薦する

JavaScript でタブバーの切り替え効果を実装する

フロントエンド開発者が必ず知っておくべきケースとして、タブバーの切り替え効果があります。タブバー自体...

JavaScript で外部変数にアクセスするサブ関数の 3 つのソリューション

序文Web ページを作成するときに、次のような状況に遭遇することはよくあります。 <本文>...

HTML いくつかの特別な分割線効果

1. 基本ライン 2. 特殊効果(効果は独立しておらず、互いに組み合わせることができます) 1. 両...

Ubuntu 18.04にmysql5.7をインストールする

Ubuntu 18.04では参考までにmysql 5.7をインストールします。具体的な内容は以下のと...

HTML 5.1 学習: 14 の新機能とアプリケーション例

序文ご存知のとおり、HTML5 はインターネット コミュニティ全体に標準を提供する組織である Wor...

Dockerボリュームマウントの実装方法

最も単純な hello world 出力イメージを作成することは最も簡単なスタートですが、実行中のコ...

JavaがMySQL 8.0に接続できない問題の解決策

この記事では、参考までにMySQL 8.0に接続できないJavaの問題をまとめて紹介します。具体的な...

MySQL でタイムスタンプを日付に変換する例

序文職場で次のような状況に遭遇しました。ログ システムのテーブルでは、時間フィールドには日付データで...

MySQL データを誤って削除した場合の簡単な解決策 (MySQL フラッシュバック ツール)

概要Binlog2sql は、Python で開発されたオープンソースの MySQL Binlog ...

Dockerでランナーコンテナを構成する方法

1. ランナーコンテナを作成する mk@mk-pc:~/Desktop$ docker run -d...

Vue ターンテーブル抽選の簡単な実装

この記事では、ホイール抽選を簡単に実装するためのVueの具体的なコードを参考までに共有します。具体的...

MySQL マルチバージョン同時実行制御 MVCC の基本原理の分析

目次1 トランザクションの同時実行で発生する問題1.1 ダーティリード1.2 繰り返し不可能な読み取...

Docker による Oracle 11g イメージ構成のプルに関する詳細なチュートリアル

さっそくAlibaba の oracle11g イメージをプルして構成する docker の記録を開...

Weibo の一括フォロー解除機能を実装する JavaScript コード

Weibo ユーザーのフォローを一括で解除するクールな JavaScript コードWeibo には...

vueを使用して登録ページの効果を実現し、vueを使用してSMS認証コードログインを実現します

この記事の例では、登録ページの効果を実現するためのVueの具体的なコードを参考までに共有しています。...