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

JavaScriptで2つの配列を乗算する方法｜forループとmap()の実装例

JavaScriptで2つの配列の各要素同士を乗算し、その結果を新しい配列として取得する方法を解説します。基本的にはforループでインデックスを順番に処理しながら、対応する位置にある要素同士を掛け合わせていくシンプルなアプローチです。

2つの配列を乗算するサンプルコード

以下の例では、「CLICK HERE」ボタンをクリックすると、配列 arr と arr1 の対応する要素が乗算され、結果が新しい配列 multArray に格納された上で画面に表示されます。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</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>Multiply two Arrays in JavaScript</h1>
<div class="sample"></div>
<div class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>Click the above button to multiply the above two arrays</h3>
<script>
    let BtnEle = document.querySelector(".Btn");
    let resEle = document.querySelector(".result");
    let sampleEle = document.querySelector(".sample");
    let arr = [1, 2, 3, 4, 5];
    let arr1 = [11, 12, 13, 14, 15, 22];
    let multArray = [];
    sampleEle.innerHTML = arr + "<br>" + arr1 + "<br>";
    BtnEle.addEventListener("click", () => {
        for (let i = 0; i < Math.min(arr.length, arr1.length); i++) {
            multArray[i] = arr[i] * arr1[i];
        }
        resEle.innerHTML = "Multiplied array = " + multArray;
    });
</script>
</body>
</html>

出力結果

上記のコードをブラウザで表示すると、最初は次のように2つの配列の内容が確認できます。

JavaScriptで2つの配列を乗算する方法｜forループとmap()の実装例

続いて「CLICK HERE」ボタンをクリックすると、乗算結果の配列が表示されます。

JavaScriptで2つの配列を乗算する方法｜forループとmap()の実装例

コードのポイント

  • Math.min(arr.length, arr1.length)：2つの配列のうち短い方の長さを基準にループすることで、要素数が異なる場合でも undefined を含む演算による NaN の発生を防いでいます。
  • この例では arr が5要素、arr1 が6要素のため、短い方に合わせて5回の乗算が実行され、結果は [11, 24, 39, 56, 75] になります。
  • はみ出した要素（この例では arr1 の末尾の 22）は計算対象外となるため、扱い方は実装の要件に応じて検討しましょう。

map()メソッドを使った簡潔な書き方

モダンなJavaScriptでは、map() メソッドを使うことで、同じ処理をより宣言的かつ簡潔に記述することもできます。

const multArray = arr.map((value, index) => value * arr1[index]);
console.log(multArray); // 結果: [11, 24, 39, 56, 75]

map() は呼び出し元の配列（この例では arr）の長さを基準に動作するため、2つの配列の長さが異なる場合は挙動に注意してください。長さがそろっているケースであれば、こちらの方が可読性が高くおすすめです。

  1. JavaScriptで2つの配列を結合する方法【concat()とスプレッド構文】

    JavaScriptで2つの配列を1つにまとめたい場合、最も一般的なのが concat() メソッドです。このメソッドは、元の配列を変更することなく、複数の配列や値を連結した新しい配列を返します。 concat()メソッドの基本構文 let 新しい配列 = 配列A.concat(配列B); サンプルコード 以下は、ボタンをクリックすると2つの配列を結合し、その結果を画面に表示する完全なサンプルです。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8&

  2. JavaScriptで2つのオブジェクトをマージする方法を解説

    JavaScriptでは、スプレッド構文（...）を使うことで、2つのオブジェクトを簡単に1つにマージ（結合）できます。各オブジェクトの前に「...」を付けて新しいオブジェクトリテラル内に展開するだけで、すべてのプロパティが統合されたオブジェクトが生成されます。以下に、2つのJavaScriptオブジェクトをマージするコードの例を示します。コード例<!DOCTYPE html> <html lang=ja> <head> <meta charset=UTF-8 /> <meta name=viewport content=width=dev