今日は、別の JavaScript 配列メソッドであるsome()メソッドを見てみましょう。 some()メソッドを使用して配列内に項目が存在するかどうかを判断する方法を学習します。

いつものように、この記事のコード例は JavaScript 言語で書かれています。したがって、正しく理解するには言語の知識が必要です。早速、早速見ていきましょう。

JavaScript のsome()メソッドとは何ですか?

Javascript some() メソッドは、少なくとも 1 つの配列メンバーが指定された関数で定義されたテストを満たすかどうかを判断します。指定された関数が true を返す要素が配列内で見つかった場合は true を返します。それ以外の場合は false を返します。配列には変更を加えません。

このメソッドをより深く理解するために、このコード スニペットを確認してみましょう。

 const basket = ["oranges", "apples", "pineapple", "yam"] basket.some(bas => bas.length === 3) // true basket.some(bas => bas.length <= 1) // false

バスケット配列内のフルーツの 1 つが正確に 3 に等しいかどうかをテストしようとしているだけです。少なくとも配列内のメンバーはこのテストに準拠しています。この場合は「山芋」です。私たちの予想通りの結果が得られます。 2 番目の条件は、果物の長さが 1 以下であるかどうかをチェックします。明らかに 1 以下の長さがないため、これは false になります。

JavaScript のsome()メソッドを使用するにはどうすればよいですか?

JavaScript の some() メソッドは使いやすいです。その方法を教えましょう。

まずは構文がどのように記述されているかを理解することから始めましょう。

構文は、次のように単語「some」を括弧「()」で囲むだけで記述されます。

some()

これはメソッドであるため、引数を受け入れます。これにより、some() メソッドを使用して配列に対して実行できる操作がより柔軟になります。

それらは次のとおりです。

1. エレメント
2. 索引
3. 配列

エレメント

element パラメーターは、配列内で処理されている現在の要素を示します。

索引

インデックスは、配列内で処理された現在の要素のインデックスにすぎません。

配列

これは、 some() メソッドを呼び出す配列です。

構文を理解したので、完全なメソッドがどのようなものかを見てみましょう。

 some((element, index, array) => { /*... */ })

ご覧のとおり、上記のコード スニペットには 3 つのパラメーターが含まれており、このメソッドの構築方法の明確な例が示されています。

ニーズに応じて、特定の特性をスキップすることを選択できます。インデックスと同様に、配列に関する追加の詳細が必要な場合は、オプションの 1 つとして提供できます。必ずしもすべての基準を含める必要はありません。

JavaScript の some() メソッドを記述する 3 つの方法

JavaScript を記述する一般的な方法は次の 3 つです。

1. アロー関数
2. インラインコールバック関数
3. コールバック関数

アロー関数

アロー関数は ES6 で導入され、従来の関数が直面するいくつかの問題を解決しようとしました。この関数は some() メソッドでも使用できます。

 some((element, index, array) => { /*... */ })

インラインコールバック関数

コールバック関数を変数に格納せずに some() メソッドに記述することができます。

 const basket = ["oranges","apples","pineapple","yam"] const result = basket.some(function (element, index, array)) { return element.length >= 7 }) console.log(result)

コールバック関数

このスタイルは、次のように、最初に関数を宣言して変数に格納し、次にそれをコールバックとして some() メソッドに渡すことで作成できます。

 const basket = ["oranges","apples","pineapple","yam"] function callBack(bas){   return bas.length === 7 } const result = basket.some(callBack) console.log(result)

ユースケース

1. フォーム入力の検証
2. アイテムの存在を確認する
3. 認可とアクセス制御

フォーム入力を有効にする

フォーム送信を処理するとき、 some()関数を使用して、どの入力フィールドが特定の要件を満たすかを判断できます。たとえば、入力内容に有効な電子メール アドレスが含まれていること、または少なくとも 1 つの必須フィールドが入力されていることを確認できます。

これがどのように見えるかの例を示します。

 const formInputs = document.querySelectorAll('input'); const isAnyInputEmpty = Array.from(formInputs).some(input => input.value === ''); if (isAnyInputEmpty) {   console.log('Please fill in all required fields.'); } else {  console.log('Form submitted successfully.'); }

コード サンプルでは、ユーザーが空のフィールドを送信しないようにしています。空白のままにした場合はすぐに通知したいと考えています。そして、少なくとも関連するデータを提出することで要件を満たしている場合、私たちはその提出を処理したいと考えています。

アイテムの存在を確認する

Web アプリケーションに製品のカートまたはデータ構造がある場合、some() を使用して特定の製品が存在するかどうかを判断できます。これは、アイテムが存在するかどうかに基づいて特定のアクションを実行する場合に特に役立ちます。それをよりよく説明するコードサンプルを見てみましょう。

 const shoppingCart = ['shoes', 'T-shirt', 'trouser']; const itemPresent = shoppingCart.some(item => item === 'trouser'); if (itemPresent){ console.log('Product exists in the cart.') } else { console.log('Product does not exist in the cart.') }

ショッピングカートに「ズボン」があるかどうかを確認します。カートに入っていることを確認したら、コンソールにログインします。

認可とアクセス制御

ユーザー認証および認可システムを実装する場合、some() を使用して、ユーザーが少なくとも 1 つの必要な権限を持っているか、または指定されたロールのいずれかに属しているかを確認できます。これにより、特定の機能やリソースへのアクセスを制御できるようになります。

 const userRoles = ['admin', 'editor']; const permissions = ['admin', 'moderator']; const hasRequiredRole = permissions.some(role => userRoles.includes(role)); if (hasRequiredRole){ console.log('Access granted.') } else { console.log('Access denied.'); }

コード サンプルでは、includes() メソッドと some() メソッドの組み合わせを利用して、ユーザーのロールに基づいてアクセス許可を付与しました。ユーザーの役割が必要な権限と一致する場合、当社はそのユーザーにアクセスを許可します。それ以外の場合は、アクセスを拒否します。

テイクアウト

最後に、JavaScript の some() メソッドは条件のテストに使用されます。元の配列は変更されません。これらは、element、Index、array' の 3 つのパラメータを受け取ります。element パラメータは、配列内で処理されている現在の要素を示し、index パラメータは、配列内で処理されている現在の要素の「インデックス」です。

JavaScript の配列メソッド、特に some() メソッドに関する私のレビューを読んでいただきありがとうございます。その説明についてどう思いましたか？試してみますか？

以下のコメント欄でご意見をお聞かせください。今後の記事のためにHackerNoon をフォローしてください。