オブジェクトを要素とする配列　特定のプロパティにreduceを実行

forEachの中でオブジェクトの特定のプロパティにreduceを実行するコードのメモです。
reduce を使うために、sliceで元の配列の一部（現在のindexまでの）のコピーを作成します。

サンプルでは、「mix」の背景色の色相（hslのhの値）をそれまでに出てきた要素の色相の値を平均したものにしています。

hslの色相のプロパティを持つ要素をオブジェクトとする配列の例

See the Pen Perform reduce on specific properties of an object by blue moon (@blue-moon) on CodePen.

HTML

<div id="red">
  <span class="color">red</span>
  <span class="mix">mix</span>
</div>
<div id="yellow">
  <span class="color">yellow</span>
  <span class="mix">mix</span>
</div>
<div id="green">
  <span class="color">green</span>
  <span class="mix">mix</span>
</div>
<div id="blue">
  <span class="color">blue</span>
  <span class="mix">mix</span>
</div>

SCSS

.color,
.mix {
  /* カスタムプロパティ（--hue）の値はJavaScriptにて定義 */
  background-color: hsl(var(--hue), 100%, 70%);
}

div {
  margin: 0.5em;
  width: 10em;
  display: flex;
  gap: 0.5em;
  > * {
    padding: 0.5em;
    width: 40%;
  }
}

JavaScript

const red = document.getElementById("red");
const yellow = document.getElementById("yellow");
const green = document.getElementById("green");
const blue = document.getElementById("blue");

const arrayColor = [
  { element: red, hue: 0 },
  { element: yellow, hue: 60 },
  { element: green, hue: 150 },
  { element: blue, hue: 240 }
];

arrayColor.forEach((color) => {
  let hueMix = arrayColor
    .slice(0, arrayColor.indexOf(color) + 1) // 現在のindexまでの配列
    .reduce((previous, current, index, array) => {
      return Number((previous + current.hue) / array.length); // 現在の色相の平均を算出
    }, 0);
  color.element.querySelector(".color").style.setProperty("--hue", color.hue);
  color.element.querySelector(".mix").style.setProperty("--hue", hueMix);
});