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

JavaScriptでオブジェクトにreduceメソッドを適用する方法

JavaScriptのreduce()メソッドは本来配列向けのメソッドのため、オブジェクトにそのまま適用することはできません。そこで、Object.values()メソッドを使ってオブジェクトの値を配列として取り出し、その配列に対してreduce()を適用します。

以下は、JavaScriptでオブジェクトの値にreduceメソッドを適用するコード例です。

コード例

<!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>Reduce method for objects in JavaScript</h1>
<div class="sample">{ a:6, b:2, c:9, d:5}</div>
<div class="result"><br /></div>
<button class="Btn">CLICK HERE</button>
<h3>Click on the above button to multiply the above object values together</h3>
<script>
    let resEle = document.querySelector(".result");
    let BtnEle = document.querySelector(".Btn");
    let multiplyObj = {
        a: 6,
        b: 2,
        c: 9,
        d: 5,
    };
    BtnEle.addEventListener("click", () => {
        let multiplyTotal = Object.values(multiplyObj).reduce((a, b) => a * b);
        resEle.innerHTML += "Multiplication of the object values = " + multiplyTotal;
    });
</script>
</body>
</html>

出力結果

上記のコードを実行すると、次のような画面が表示されます。

JavaScriptでオブジェクトにreduceメソッドを適用する方法

「CLICK HERE」ボタンをクリックすると、以下のように計算結果が表示されます。

JavaScriptでオブジェクトにreduceメソッドを適用する方法

コードのポイント

Object.values(multiplyObj)は、オブジェクトが持つ各プロパティの値（6, 2, 9, 5）を配列として返します。この配列に対してreduce((a, b) => a * b)を呼び出すことで、すべての値が先頭から順番に掛け合わされ、最終的な積である「540」が求められます。

同様の手法は、値の合計を求める(a, b) => a + bなど、さまざまな集計処理にも応用できます。オブジェクトのキーも必要な場合は、Object.entries()を併用するとよいでしょう。

  1. JavaScriptで配列をreduceする方法｜reduce()メソッドで配列要素を合計する

    JavaScriptのreduce()メソッドは、配列の各要素を先頭から順に処理し、その結果を1つの値にまとめる（畳み込む）ための配列メソッドです。数値の合計を求めるだけでなく、配列からオブジェクトを組み立てたり、条件に応じてデータを集約したりと、幅広い場面で活用されています。reduce()メソッドの基本構文 { return 戻り値; }, 初期値);accumulator（アキュムレータ）：直前のコールバック関数が返した値（累積値）。最初のループでは初期値、または配列の第1要素が代入されます。currentValue：現在処理している配列の要素。初期値：累積値の出発点となる値。省略し

  2. JavaScriptのループを停止する方法｜clearInterval()の使い方を解説

    JavaScriptでsetInterval()によって繰り返し実行されている処理（ループ）を停止したい場合は、clearInterval()を使用します。setInterval()は指定した間隔ごとに関数を繰り返し呼び出すメソッドですが、そのままでは無限に処理が続いてしまいます。そこで、あらかじめ戻り値として取得したタイマーIDをclearInterval()に渡すことで、ループを任意のタイミングで止めることができます。コード例以下は、一定回数スクロール処理を繰り返した後にループを停止するサンプルコードです。<!DOCTYPE html> <html lang="