JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

【JavaScript】filterとjoinを組み合わせて、条件に合う配列要素だけを結合する方法

JavaScriptでは、filter()メソッドとjoin()メソッドを組み合わせることで、条件を満たす要素だけを抽出し、それらを任意の区切り文字で1つの文字列に結合できます。本記事では、配列の中から「2で割り切れる要素（偶数）」だけを取り出して結合する具体例を、動作するサンプルコードとともに解説します。

処理の流れ：filter() と join() の役割

  • filter()：コールバック関数が true を返した要素だけを集めた新しい配列を作成します。元の配列は変更されません。
  • join()：配列内のすべての要素を、引数で指定した区切り文字で連結し、1つの文字列として返します。引数を省略した場合はカンマ（,）で連結されます。

この2つのメソッドをメソッドチェーンでつなげることで、「条件に合う要素同士だけを結合する」という処理を簡潔に実現できます。

サンプルコード

次のコードでは、数値の配列から偶数の要素だけを filter() で抽出し、join(" : ") で区切り文字「 : 」を挟んで結合しています。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>配列を条件付きで結合するサンプル</title>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .result,.sample {
        font-size: 18px;
        font-weight: 500;
        color: rebeccapurple;
    }
    .result {
        color: red;
    }
</style>
</head>
<body>
<h1>条件を満たすJavaScript配列の要素を結合する</h1>
<div class="sample"></div>
<div class="result"></div>
<button class="Btn">クリックしてください</button>
<h3>上のボタンをクリックすると、2で割り切れる要素だけが結合されて表示されます。</h3>
<script>
    let BtnEle = document.querySelector(".Btn");
    let resEle = document.querySelector(".result");
    let sampleEle = document.querySelector(".sample");
    let arr = [1, 2, 3, 4, 5, 6, 7, 8, 11, 22, 33, 18];
    sampleEle.innerHTML = arr;
    let joinArr = arr.filter((el) => el % 2 == 0).join(" : ");
    BtnEle.addEventListener("click", () => {
        resEle.innerHTML = joinArr;
    });
</script>
</body>
</html>

コードのポイント

  • arr.filter((el) => el % 2 == 0) により、余りが0になる要素（2, 4, 6, 8, 22, 18）だけが新しい配列に残ります。
  • 続く .join(" : ") で、その配列が "2 : 4 : 6 : 8 : 22 : 18" という1つの文字列に変換されます。
  • ボタンのクリックイベント内で結果を表示しているため、ページ読み込み時ではなく、ユーザー操作をきっかけに処理結果が反映される構成になっています。

実行結果

上記のコードをブラウザで開くと、まず元の配列が画面に表示されます。

【JavaScript】filterとjoinを組み合わせて、条件に合う配列要素だけを結合する方法

「クリックしてください」ボタンを押すと、偶数の要素だけが「 : 」で結合された結果が赤字で表示されます。

【JavaScript】filterとjoinを組み合わせて、条件に合う配列要素だけを結合する方法

まとめ

filter() で条件に合う要素を絞り込み、join() で結合するという組み合わせは、配列データを見やすい形式の文字列に整形したい場合に非常に便利です。条件部分のコールバック関数を変更すれば、「特定の値以上の数値」「特定の文字列を含む要素」など、さまざまな条件に柔軟に対応できます。ぜひ実際のプロジェクトでも活用してみてください。

  1. JavaScriptのletキーワードとは？ブロックスコープ変数の宣言方法を解説

    letキーワードとは 2015年（ECMAScript 2015／ES6）に導入されたletキーワードは、ブロックスコープを持つ変数を宣言するためのものです。letで宣言した変数は、それを囲む波括弧 { } の内側でのみ有効となり、ブロックの外からアクセスしようとするとエラーが発生します。 varとの主な違い スコープ： varは関数スコープですが、letはブロックスコープになります。 再宣言： 同じスコープ内であればvarによる再宣言は可能ですが、letで再宣言するとSyntaxErrorになります。 宣言前の参照： letで宣言した変数は、宣言より前にアクセスするとReferenceE

  2. JavaScriptでnewキーワードを使って配列を作成する方法

    JavaScriptでは、newキーワードとArray()コンストラクタを使用することで、簡単に配列を作成できます。本記事では、実際に動作するサンプルコードとともに、その基本的な使い方を解説します。 サンプルコード 以下は、newキーワードを使用してJavaScriptの配列を作成するコード例です。 <!DOCTYPE html> <html lang=ja> <head> <meta charset=UTF-8 /> <meta name=viewport content=width=device-width, initial-sca