ホームページ > ウェブフロントエンド > jsチュートリアル > JavaScript で 2 つの配列の共通部分から配列を作成するにはどうすればよいですか?

JavaScript で 2 つの配列の共通部分から配列を作成するにはどうすればよいですか?

WBOY
リリース: 2023-09-11 17:05:02
転載
945 人が閲覧しました

如何在 JavaScript 中使用两个数组的交集创建数组?

JavaScript での 2 つの配列の交差は、Set、スプレッド演算子、filter() メソッド、または include() メソッドの使用など、さまざまな方法で実行できます。各方法には独自の長所と短所があるため、特定のタスクにどの方法が最適であるかを検討することが重要です。 2 つの配列の交差部分は、両方の配列に含まれる要素のみを含む新しい配列を作成する場合に役立ちます。

例を挙げてみましょう -

リーリー

上記では、2 つの配列に存在する同じ値の一部を含む 2 つの配列 arr1 と arr2 を定義しました。 2 つの配列の交差部分は antersecArr です。

JavaScript で 2 つの配列の共通部分から配列を作成する方法について説明しましょう。

方法 1: filter() メソッドと include() メソッドを使用する

filter() メソッドと include() メソッドを使用して、2 つの配列の交差を実行できます。 filter() メソッドは関数を引数として受け取り、それを配列内の各要素に適用します。この関数は、要素を新しい配列に含めるかどうかを示す true または false のブール値を返す必要があります。この例では、要素が両方の入力配列に存在する必要があるため、includes() メソッドを使用して、要素がもう一方の配列に存在するかどうかを確認します。

###文法###

以下は、filter() メソッドと include() メソッドを使用して 2 つの配列の共通部分から新しい配列を作成するための構文です -

リーリー

filter() メソッドは、パラメータとしてコールバック関数を受け入れます。このコールバック関数は、最初の配列 (arr1) の各要素に適用され、includes() メソッドを使用して、現在の要素 (x) が 2 番目の配列 (arr2) に存在するかどうかを確認します。現在の要素 (x) が 2 番目の配列 (arr2) に存在する場合、それは新しい配列 (交差) に含まれます。

現在の要素 (x) が 2 番目の配列 (arr2) に存在しない場合は、それを新しい配列 (交差) から除外します。最終結果は、arr1 と arr2 に存在する要素のみを含む新しい配列 (交差部分) です。

###例###

次の例では、2 つの配列 arr1 と arr2 を作成します。それぞれに 5 つの要素があり、そのうち 3 つは同じです。次に、フィルターと contains メソッドを使用して、両方の配列から共通要素の新しい配列を作成します。

リーリー

上記のコードは、両方の入力配列に存在する要素のみを含む新しい配列 IntersectionArray を作成します。

方法 2

このメソッドでは、まず arr1 の要素から新しいコレクション オブジェクトを作成します。重複した要素があれば削除されます。次に、スプ​​レッド演算子を使用して、コレクション オブジェクトを配列に変換します。配列には重複する要素はありません。ここで、filter() メソッドと include() メソッドを使用して交差を実行します。以降のプロセスは最初の方法と同じです。

リーリー

上記の構文は、新しい配列「intersection」を作成します。 arr1 からすべての重複を削除すると、arr1 と arr2 に存在する要素が含まれます。

###例### リーリー

方法 3: Set を使用する

このメソッドでは、まず新しい Set() コンストラクターを使用して配列をセットに変換します。次に、for...of ループを使用して、2 番目のセットの要素を反復処理します。次に、 has() メソッドを使用して、要素が最初の Set にあるかどうかを確認します。要素が最初の Set に存在する場合は、push() メソッドを使用して要素を交差配列に追加します。

###例### リーリー

このチュートリアルでは、2 つの配列の共通部分を使用して配列を作成する 3 つの方法を例を使用して説明しました。最初の方法では、filter() メソッドと include() メソッドを使用しますが、2 番目の方法では、filter と include に加えて、スプレッド演算子と Set も使用します。 3 番目のアプローチでは、このタスクを実行するカスタム関数を作成します。

以上がJavaScript で 2 つの配列の共通部分から配列を作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:tutorialspoint.com
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート