序文フロントエンド開発では、配列内に要素が存在するかどうかを判断する必要があることがよくあります。実は、判断方法はたくさんあるんです。一つずつ見ていきましょう。 まず配列を定義しましょう: 定数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 と findIndexfind() と 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 つあるかどうかをテストします。ブール値を返します。
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 をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: MySql バッチ挿入の最適化 SQL 実行効率の例の詳細な説明
今日、Tomcat サーバーの設定時にちょっとした問題が発生したので、参考までにいくつかご説明したい...
目次1. v-on指令1. 基本的な使い方2. 糖衣構文3. イベントパラメータ4. イベント修飾子...
1. ビジネスシナリオの紹介MySQLを使用する電子商取引システムがあるとします。大量のデータを保存...
html.cssオーバーフローの包括的な理解XML/HTML コードコンテンツをクリップボードにコピ...
この記事では、参考までにシンプルなHTMLショッピング数量アプレットを紹介します。具体的な内容は次の...
目次G2チャートについて使用テンプレートで使用される完全なコード (棒グラフ)世界地図を追加するG2...
質問会社がサーバーを移行した後、デフォルトで作成された docker0 ブリッジが会社の外部ネットワ...
序文要素がビューポート内にあるかどうかを監視する2つの方法を共有する1. 位置計算Element.g...
方法1: lsb_releaseユーティリティを使用するlsb_release ユーティリティは、L...
httpリターンコードリスト(以下は概要です)詳細な中国語の説明についてはここをクリックしてくださ...
目次Vue2.x の使用法グローバル登録部分登録使用フック機能フック関数のパラメータVue3.x の...
問題現象: [root@localhost ~]# docker イメージをプル xxx.com.c...
テキストシャドウテキストに影を追加します。テキストとテキスト装飾に複数のシャドウを追加することができ...
目次問題の説明:原因分析:解決:補足: Reactでは、フックが使用されている場合、useState...
この記事の例では、参考のために画像をサーバーにアップロードするためのjsの具体的なコードを共有してい...