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

JavaScriptのArray.prototype.map()メソッドの使い方を徹底解説

Array.prototype.map()とは？

JavaScriptのArray.prototype.map()メソッドは、配列の各要素に対してコールバック関数を実行し、その戻り値から新しい配列を作成するためのメソッドです。元の配列は変更されないため、安全にデータ変換を行いたい場合に非常に便利です。

構文

arr.map(function callback(currentValue[, index[, array]])

各引数の意味は以下のとおりです。

  • currentValue：現在処理している要素の値
  • index（省略可能）：現在処理している要素のインデックス番号
  • array（省略可能）：map()が呼び出された元の配列

実装例1：配列内の数値の絶対値を求める

それでは、実際にJavaScriptでArray.prototype.map()メソッドを実装してみましょう。次の例では、負の値を含む配列に対してMath.abs()を適用し、すべての要素の絶対値を取得しています。

サンプルコード

<!DOCTYPE html>
<html>
<body>
<h2>Demo Heading</h2>
<p>Click to display the abs() result...</p>
<button onclick="display()">Result</button>
<p id="test"></p>
<script>
   function display() {
      var arr = [1, -2, 3, 4, 5, -6, 7, 8, 9, 10];
      var res = arr.map(Math.abs);
      document.write(res);
   }
</script>
</body>
</html>

実行結果

JavaScriptのArray.prototype.map()メソッドの使い方を徹底解説

上記の「Result」ボタンをクリックすると、負の数も含めてすべての要素が絶対値に変換されて表示されます。

JavaScriptのArray.prototype.map()メソッドの使い方を徹底解説

実装例2：小数点以下を四捨五入する

次の例では、map()メソッドとMath.round()を組み合わせて、配列内の小数を四捨五入しています。

サンプルコード

<!DOCTYPE html>
<html>
<body>
<h2>Demo Heading</h2>
<p>Click to round the numbers...</p>
<button onclick="display()">Result</button>
<p id="test"></p>
<script>
   var arr = [11.4, 12.9, 25.6, 88.9];
   document.getElementById("test").innerHTML = arr
   function display() {
      var res = arr.map(Math.round);
      document.getElementById("test").innerHTML = res
   }
</script>
</body>
</html>

実行結果

JavaScriptのArray.prototype.map()メソッドの使い方を徹底解説

「Result」ボタンをクリックすると、各小数が最も近い整数へと四捨五入されます。

JavaScriptのArray.prototype.map()メソッドの使い方を徹底解説

まとめ

map()メソッドは、既存の配列を加工して新しい配列を作りたいときに欠かせない強力なツールです。Math.abs()やMath.round()のような組み込み関数だけでなく、独自のコールバック関数も渡せるため、さまざまなデータ変換処理を簡潔に記述できます。

  1. JavaScriptのArray.prototype.sort()メソッドの使い方をサンプルコードで解説

    Array.prototype.sort()は、JavaScriptで配列の要素を並べ替えるための組み込みメソッドです。アルファベット順・数値順といった並び方に加えて、昇順・降順も自由に指定でき、配列操作の中でも特に使用頻度の高いメソッドの一つです。 ただし重要なポイントとして、sort()メソッドはデフォルトではすべての要素を文字列に変換してから比較します。そのため、数値の配列を意図したとおりに並べ替えたい場合は、比較関数を引数として渡す必要があります。 以下は、Array.prototype.sort()メソッドの基本的な使い方を示すサンプルコードです。 サンプルコード <!DOC

  2. JavaScriptのArray.prototype.flat()メソッドとは？配列を指定した深さで平坦化する方法

    Array.prototype.flat()メソッドとはJavaScriptのArray.prototype.flat()メソッドは、ネストされた配列を指定した深さまで再帰的に平坦化（フラット化）するためのメソッドです。元の配列を変更することはなく、平坦化された新しい配列を作成して返します。引数には平坦化の深さ（depth）を数値で指定します。省略した場合はデフォルトで「1」が適用され、「Infinity」を指定すればすべての階層のネストを完全に展開することも可能です。コード例以下は、Array.prototype.flat()メソッドを使用したサンプルコードです。<!DOCTYPE h