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

JavaScriptのSet.forEach()関数の使い方と実行例

JavaScriptにおけるSetオブジェクトのforEach()メソッドは、引数として指定した関数を、セット内のすべての値に対して順番に実行するためのメソッドです。

例えば、「受け取った値を出力する」という関数を作成しておき、それをforEach()に渡すと、セット内のすべての要素の値が順に出力されます。このように、セットの各要素に対して同じ処理をまとめて適用したい場合に非常に便利です。

構文

forEach()メソッドの基本構文は以下のとおりです。

setObj.forEach(callbackFn)

使用例

次のコードでは、2つの異なる例を紹介しています。1つ目は文字列の値を持つセットの各要素を関数で出力する例、2つ目は数値のセットの合計値を計算する例です。

<html>
<head>
    <title>JavaScript Example</title>
</head>
<body>
    <script type="text/javascript">
        // 例1: セットの各要素を出力する
        function sampleFunction(value){
            document.writeln(value + ",");
        }
        const setObj1 = new Set();
        setObj1.add('Java');
        setObj1.add('JavaFX');
        setObj1.add('JavaScript');
        setObj1.add('HBase');
        setObj1.forEach(sampleFunction);
        document.write("<br>");

        // 例2: セット内の数値の合計を計算する
        var sum = 0;
        function mathExample(value) {
            sum = value + sum;
        }
        const setObj2 = new Set();
        setObj2.add(172);
        setObj2.add(364);
        setObj2.add(885);
        setObj2.add(746);
        setObj2.forEach(mathExample);
        document.write("Sum of all elements in the set: " + sum);
    </script>
</body>
</html>

実行結果

上記のコードをブラウザで実行すると、以下のように表示されます。

Java, JavaFX, JavaScript, HBase,
Sum of all elements in the set: 2167

解説

1つ目の例では、sampleFunctionがセット内の各文字列を受け取り、カンマ区切りで出力しています。forEach()はセットの挿入順に要素を処理するため、add()で追加した順序どおりに「Java」「JavaFX」「JavaScript」「HBase」が出力されます。

2つ目の例では、mathExample関数が呼び出されるたびにsum変数へ値が加算され、最終的にセット内の全要素（172 + 364 + 885 + 746）の合計である2167が出力されます。

なお、forEach()に渡すコールバック関数は、実際には「値」「値（同じキーが再度渡される）」「元のSetオブジェクト」の3つの引数を受け取ることができます。必要に応じてこれらを活用することも可能です。

  1. JavaScriptのNumber()関数とは？使い方とサンプルコードを解説

    JavaScriptのNumber()関数は、引数として渡された値やオブジェクトを、それに対応する数値へ変換するための関数です。真偽値や文字列型の数字、さらにはDateオブジェクトなども数値に変換できるため、データ型の変換処理において非常に便利な組み込み関数の一つです。例えば、Number(true)は「1」、Number(false)は「0」を返します。また、数字のみで構成された文字列「149」を渡せば数値の149に変換され、new Date()で生成した日付オブジェクトを渡すと、1970年1月1日からの経過ミリ秒数が返されます。以下に、Number()関数の動作を確認できるサンプルコードを

  2. JavaScriptにおける配列とSetの違いとは？重複値の扱いと要素アクセスをわかりやすく解説

    JavaScriptのSet（セット）オブジェクトは、ES2015（ES6）で新たに導入されたデータ型です。従来から広く使われている配列（Array）と比べると、いくつか重要な違いがあります。 配列とSetの主な違い 重複した値の扱い： 配列は同じ値をいくつでも格納できますが、Setでは同一の値は1つしか保持されません。重複した値は自動的に除外されるのが大きな特徴です。 要素へのアクセス方法： 配列ではインデックス（例：arr[0]）を使って任意の位置の要素へ直接アクセスできます。一方、Setにはインデックスの概念がなく、要素は挿入された順序どおりに先頭から順番に辿ることしかできません。