JS配列メソッドsome、every、findの使用に関する詳細

JS配列メソッドsome、every、findの使用に関する詳細

1. いくつか

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

つまり、配列内の各項目をチェックし、 1 つの項目が合格する限り、それはtrueです。

  • truefalseのみを返します
  • 配列内の各項目をテストします。 someではif else演算を実行しないでください。
  • returnの後にtrueまたはfalseを記述しないでください。 return後に条件が続きます。

最近、バックエンド管理システムの作業中に、 Dialogがポップアップするという要件に遭遇しました。 Dialoginputに値があれば問題ありませんが、そうでない場合は、少なくとも 1 つの値が存在する必要があるというプロンプトが表示されます。

データ構造はsomeのとおりです。

arr = [とする
    { 値: "apple" },
    { 価値: "" }、
    { 値: "バナナ" },
    { 値: "オレンジ" },
    { 価値: "" }、
]
res = arr.some(item=>{ とする
    戻り値 item.value !== ""
})
コンソールログ(res);

ここでは、値がある限りrestrueなので、 restrueのときに次のステップに進むことができます。

もし(res){
    console.log("配列に値があります");
} それ以外 {
    console.log("少なくとも 1 つの値を入力してください");
}

2. すべての

every someと同じように使用できます。 MDN より: every()メソッドは、配列内のすべての要素が指定された関数のテストに合格するかどうかをテストします。ブール値を返します。

つまり、配列内の各項目をチェックし、いずれかの項目が失敗した場合はfalseになります。
some場合と同様の注意事項です。 各入力ボックスに値を入力する必要があれば、

arr2 = [とする
    { 値: "apple" },
    { 価値: "" }、
    { 値: "バナナ" },
    { 値: "オレンジ" },
    { 値: "er" },
]

var res2 = arr2.every(item => {
    戻り値 item.value !== ""
})
コンソールログ(res2);

ここで、1 つの項目に値が存在しない限り、 res2 falseになります。

もし (!res2) {
    //res2がtrueの場合はelseへ進み、falseの場合はifへ進む
    console.log("入力ボックスに空の値があります");
} それ以外 {
    console.log("入力ボックスに空の値がありません");
    console.log("次のステップに進みます");
}

3. 見つける

MDNによれば、 find()メソッドは、指定されたテスト関数を満たす配列の最初の要素の値を返します。それ以外の場合はundefinedを返します
注意: find() は上記の 2 つとは異なります。値を返しますが、条件を満たす最初の値です。

arr3 = [とする
    { 価値: "" }、
    { 価値: "" }、
    { 価値: "" }、
    { 価値: "" }、
    { 値: "apple" },
]
var res3 = arr3.find(item => {
    戻り値 item.value !== ""
})
コンソールログ(res3);

findの戻り値がundefinedあるかどうかに基づいて、 itemvalu判断できます。

もし(res3){
    //res3 に値がある場合は、ここで次の手順に進みます。
    console.log("配列には少なくとも 1 つの値があります");
} それ以外 {
    //res3 は未定義です
    console.log("配列は空です!");
}

JS 配列メソッド some、 everyfind使用方法について説明したこの記事はこれで終わりです。JS 配列メソッドsomeeveryfindの使用方法の詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • JS 配列トラバーサルにおける for、for in、for of、map、forEach の使い方と利点と欠点
  • JavaScript の配列を走査する 3 つの方法: map、forEach、filter
  • Javascript 配列ループトラバーサル forEach の詳細な説明
  • JavaScript配列のforeachメソッドといくつかのメソッドを学ぶ

<<:  MySQL 完全折りたたみクエリ正規マッチングの詳細な説明

>>:  Nginx で複数のドメイン名がドメインをまたいでアクセスできるようにマップを使用する方法

推薦する

MySQL に接続されている IP アドレスを表示する方法の例

具体的な方法:まずコマンドプロンプトを開きます。次に、[ mysql -u root -p ] コマ...

JavaScriptの浅いコピーと深いコピーについての簡単な説明

目次1. 直接譲渡2. 浅いコピー3. ディープコピー1. JSONオブジェクトメソッド2. 再帰コ...

MySQL のメモリ使用量と CPU 使用率が高い場合のテストと解決策

変更後: innodb_buffer_pool_size=576M ->256M InnoDB...

よく使用される Linux コマンドの完全なリスト (推奨コレクション)

目次1. システム情報2. シャットダウン(システムのシャットダウン、再起動、ログアウト) 3. フ...

XHTML Web ページ チュートリアル

<br />この記事は主に、初心者にXHTMLの基本知識と、XHTMLとHTMLの違いを...

JSON.stringify の簡易版の実装とその 6 つの主要機能の詳細な説明

目次序文JSON.stringify の 6 つの機能特集1特集2特集3特集4特集5特集6手動で文字...

MySQL における楽観的ロックと悲観的ロックの例

データベース管理システムにおける同時実行制御のタスクは、データベース内の同じデータに同時にアクセスす...

Vue Notepadの例の詳細な説明

この記事の例では、メモ帳機能を実装するためのVueの具体的なコードを参考までに共有しています。具体的...

2つのシンプルなメニューナビゲーションバーの例

メニューバーの例 1: コードをコピーコードは次のとおりです。 <!DOCTYPE html ...

Linux サーバーでフォルダー、ファイル、解凍コマンドを削除する方法

1. フォルダを削除する例: rm -rf /usr/java /usr/javaディレクトリとその...

HTML タグ: サブタグと sup タグ

今日はあまり使わないHTMLタグ「subタグ」と「supタグ」を紹介します。関連記事: HTML タ...

CSS 疑似要素を使用して複数の連続する要素のスタイルを制御する方法

CSS 疑似要素を使用して要素を制御する場合、一部の要素のスタイルを変更する必要があることがよくあり...

フレックスレイアウトによるシームレスなスクロールのサンプルコード

この記事では、シームレスなスクロールを実現するためのフレックスレイアウトのサンプルコードを主に紹介し...

Ant Design Blazor コンポーネントライブラリのルーティング再利用マルチタブ機能

最近、Ant Design Blazor コンポーネント ライブラリにマルチタブ コンポーネントを実...

iOS WeChat H5ページのゴム反発効果の落とし穴記録

ビジネス要件最近開発したプロジェクトの一つに、WeChat公式アカウントに関連したH5ページがありま...