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 の 4 つのトランザクション分離レベルの詳細な説明

この実験のテスト環境: Windows 10+cmd+MySQL5.6.36+InnoDB 1. ト...

MySQLクエリ文の実行プロセスを理解するための記事

序文要件を満たす特定のデータをデータベースから取得する必要があります。Select ABC FROM...

WebページでjQueryを参照する方法

CDN(コンテンツ配信ネットワーク)を通じて参照できます。 jQuery は Google と Mi...

Dockerが正常に起動しない原因と解決策を詳しく解説

1. Docker 起動時の異常なパフォーマンス: 1. ステータスが繰り返し再起動している場合は、...

マークアップ言語 - 印刷スタイルシート

123WORDPRESS.COM HTML チュートリアル セクションに戻るには、ここをクリックして...

モバイル Web WAP には Bootstrap と jQuery Mobile のどちらを使用すべきか

問題を解決するBootstrap は、次の問題を解決する CSS フレームワークです。デバイス間での...

MySQL の主キーとトランザクションの詳細な説明

目次1. MySQLの主キーとテーブルフィールドに関するコメント1. 主キーと自動増分2. テーブル...

IDEAでVUEプロジェクトをデバッグするための詳細な手順

js コードをデバッグするには、コード内にデバッガーを記述するか、Chrome で毎回ブレークポイン...

Nginx Httpモジュールシリーズにおけるautoindexモジュールの具体的な使用法

ブラウザ モジュールの主な機能は、http リクエスト ヘッダーの「User-Agent」の値とブラ...

Linux での Apache サービスの展開と構成

目次1 Apacheの役割2 Apacheのインストール3. Apacheを有効にする4 Apach...

Docker swarm の簡単なチュートリアル

3つの仮想マシン132、133、134を群がらせる1. クラスターを初期化し、自分自身をクラスターに...

シンプルなログインページを実装するための HTML+jQuery

目次導入公開コード(バックエンドインターフェース)例 1: 最もシンプル (純粋な HTML)コード...

Vue3 ページ、メニュー、ルートの使用

目次1. メニューをクリックしてジャンプ1. ページ名の統一2. 管理ページを追加3. ルートを追加...

Ubuntu 20.04 に MySql5.7 をインストールして構成するための詳細なチュートリアル

目次1. Ubuntuソースの変更2. MySQLをインストールする3. 新しいユーザーを作成し、権...

MySQL で CURRENT_TIMESTAMP を使用する方法

目次CURRENT_TIMESTAMPの使用CURRENT_TIMESTAMPを使用したタイムスタン...