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

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

JavaScriptのTypedArrayオブジェクトが持つmap()メソッドは、引数として関数を受け取り、型付き配列（typed array）のすべての要素に対してその関数を順番に呼び出します。そして、各要素に適用した処理の結果をまとめた新しい配列を返します。

元の配列には変更が加えられず、変換後の結果だけが新しい配列として得られるため、データの一括変換などに便利なメソッドです。

構文

map()メソッドの基本的な構文は以下の通りです。

typedArray.map(callback)

サンプルコード

次の例では、Int32Arrayで作成した型付き配列の各要素を2乗し、その結果を新しい配列として取得しています。

<html>
<head>
    <title>JavaScript TypedArray map メソッド</title>
</head>
<body>
    <script type="text/javascript">
        var int32View = new Int32Array([11, 5, 13, 4, 15, 3, 17, 2, 19, 8]);
        document.write("型付き配列の内容： " + int32View);
        document.write("<br>");

        // 各要素を2乗する関数
        function square(ele) {
            return ele * ele;
        }

        // map()で全要素にsquare関数を適用
        var result = int32View.map(square);
        document.write("各要素を2乗した結果： " + result);
    </script>
</body>
</html>

実行結果

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

型付き配列の内容： 11,5,13,4,15,3,17,2,19,8
各要素を2乗した結果： 121,25,169,16,225,9,289,4,361,64

解説

この例では、squareという関数を定義し、受け取った値を2乗して返すようにしています。int32View.map(square)を実行すると、型付き配列内の各要素（11, 5, 13...）が順番にsquareへ渡され、それぞれ2乗された値（121, 25, 169...）が新しい配列として生成されます。

このようにmap()メソッドを使えば、ループ処理を明示的に書かなくても、配列全体に対して同じ変換処理を簡潔に適用できます。通常のArrayオブジェクトと同様に、コールバック関数には「現在の要素」「インデックス」「元の配列」も渡すことができるため、より柔軟な処理も可能です。

  1. JavaScriptのArray.of()関数とは？構文と使い方を実例付きで解説

    JavaScript の Array.of() メソッドは、引数として渡された値を要素とする新しい配列インスタンスを作成するためのメソッドです。この記事では、Array.of() の基本構文と、実際に動作するサンプルコードを使った使い方をわかりやすく解説します。 Array.of() メソッドの特徴 Array.of() は、0 個以上の任意の値を引数として受け取り、それらをそのまま要素に含んだ配列を返します。Array() コンストラクタとの大きな違いは、数値を 1 つだけ渡した場合の挙動です。 Array(5) → 長さ 5 の空の配列を作成する Array.of(5) → 要素として

  2. JavaScriptのarray.includes()メソッドとは？配列に特定の要素が含まれているか判定する方法

    JavaScriptのarray.includes()メソッドは、配列の中に指定した要素が含まれているかどうかを判定するために使用します。戻り値はブール値（true / false）で、要素が見つかればtrue、見つからなければfalseを返します。 構文 array.includes(ele, start) 各パラメータの意味は以下のとおりです。 ele：検索したい要素（必須） start：検索を開始する位置（省略可能）。デフォルトは0で、配列の先頭から検索が始まります それでは、JavaScriptでarray.includes()メソッドを実際に実装してみましょう。 例1：数値の配列