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 で複数のドメイン名がドメインをまたいでアクセスできるようにマップを使用する方法

推薦する

Dockerコンテナでは、イメージを簡素化してサイズを縮小する方法を詳しく説明しています

目次1.画像レイヤーの数を減らす1. 命令の統合2. 多段階ビルド3. スクワッシュ機能を有効にする...

CSSの固定位置属性の詳細な説明

モバイル アプリを開発する場合、Web サイトが特定の高さまでスクロールしたときにコンテンツの一部を...

MySQL マスタースレーブ遅延問題の解決方法

今日は、マスタースレーブ遅延が発生する理由とその対処方法について説明します。しっかり座って出発の準備...

JavaScript はクリックして画像の形状を変更する (変換アプリケーション) を実装します。

JavaScriptをクリックすると画像の形状が変わります(変形の応用)。参考までに具体的な内容は...

HTMLページの文字セットを指定する2つの方法

1. HTMLページの文字セットを指定する2つの方法方法1: <メタ文字セット="u...

CSS で左上の三角形を作成するいくつかの方法の詳細な説明

今日は、CSS を使用して左上の三角形を記述するいくつかの方法を紹介します。概略図(幅と高さを60p...

Linux システム Docker への ASP.NET Core アプリケーションのデプロイのプロセス分析

目次1. システム環境2. 運用プロセスと途中で遭遇した問題1. システム環境1. Tencent ...

Vue でデータコレクターを設計する

目次シナリオ中核問題ステータス監視状態監視の利点国家監視の欠点復興実行のアイデア依存関係の収集要約す...

Windows で Graphviz をインストールして開始する方法のチュートリアル

ダウンロードとインストール環境変数の設定インストール環境変数の設定確認基本的な描画の紹介グラフディグ...

CSSを使用して円形の波効果を実現する

モバイル デバイスでは、金額を表示するために円形の波グラフィックがよく使用されます。最初は、この効果...

Sitemesh チュートリアル - ページ装飾技術の原理と応用

1. 基本概念1. Sitemeshはページ装飾技術です。 1 : フィルターを通してページアクセス...

Tencent Cloud 上で Hadoop 3.x 疑似クラスターを構築する方法を説明します

1. 環境整備CentOS Linux リリース 7.5.1804 (コア)インストールフォルダを作...

一般的なSQL削除ステートメントの原則の違いを理解するだけです

この記事では主に、SQL 削除ステートメント DROP、TRUNCATE、および DELETE の違...

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

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