⚠ 면책 조항

이것은 다른 배열에서 다른 항목의 평균을 계산하는 방법에 대한 간단한 예입니다. 더 나은 솔루션이 있으면 알려주십시오.

개요

데이터 기준은 과일 종류가 다른 3개의 과일 바구니와 바구니에 있는 항목 수입니다. React 웹 페이지를 사용하면 여러 바구니를 선택할 수 있으며 항목의 평균이 계산됩니다.

const fruitBaskets = [
  {
    name: "fruitBasket1",
    fruitBasket: [
      { fruitName: "Apple", count: 5 },
      { fruitName: "Banana", count: 3 },
      { fruitName: "Strawberry", count: 9 },
      { fruitName: "Lemon", count: 7 }
    ]
  },
  {
    name: "fruitBasket2",
    fruitBasket: [
      { fruitName: "Apple", count: 5 },
      { fruitName: "Banana", count: 8 },
      { fruitName: "Lemon", count: 3 }
    ]
  },
  {
    name: "fruitBasket3",
    fruitBasket: [
      { fruitName: "Apple", count: 5 },
      { fruitName: "Banana", count: 3 },
      { fruitName: "Orange", count: 3 },
      { fruitName: "Lemon", count: 9 },
      { fruitName: "Strawberry", count: 5 }
    ]
  }
];

구현

구현은 다음과 같습니다.

웹페이지 - App.js

App.js에는 드롭다운을 통한 과일 바구니 선택과 결과 테이블이 포함되어 있습니다. 코딩은 here 입니다.

계산 - data.js

data.js에는 과일 바구니의 데이터와 계산 입력 데이터가 포함되어 있습니다. 코딩은 here 입니다.

계산에는 세 단계가 있으며 바스켓 1과 2로 설명되며 이 형식입니다.

  [
    [
      { fruitName: "Apple", count: 5 },
      { fruitName: "Banana", count: 3 },
      { fruitName: "Strawberry", count: 9 },
      { fruitName: "Lemon", count: 7 }
    ],
    [
      { fruitName: "Apple", count: 5 },
      { fruitName: "Banana", count: 8 },
      { fruitName: "Lemon", count: 3 }
    ]
  ]

병합

바스켓 1과 2가 선택되었습니다. 이 두 배열은 이 코딩과 병합됩니다.

  selectedFruitBaskets.forEach(selectedFruitBasket => {
    const found = fruitBaskets.find(
      fruitBasket => fruitBasket.name === selectedFruitBasket.name
    );
    fruits.push(found.fruitBasket);
  });

  const basketCounts = fruits.length;

  const mergedBasket = [].concat(...fruits);

후에

  [
    { fruitName: "Apple", count: 5 },
    { fruitName: "Banana", count: 3 },
    { fruitName: "Strawberry", count: 9 },
    { fruitName: "Lemon", count: 7 },
    { fruitName: "Apple", count: 5 },
    { fruitName: "Banana", count: 8 },
    { fruitName: "Lemon", count: 3 }
  ]

합집합

이 단계에서 각 종류의 과일 수를 합산합니다.

  const basketSum = mergedBasket.reduce((acc, curr) => {
    if (!acc[curr.fruitName]) {
      acc[curr.fruitName] = { ...curr, countInBaskets: 1, sum: curr.count };
      return acc;
    }
    acc[curr.fruitName].countInBaskets += 1;
    acc[curr.fruitName].sum += curr.count;

    return acc;
  }, {});

후에

{
    "Apple": {
        "count": 5,
        "countInBaskets": 2,
        "fruitName": "Apple",
        "sum": 10
    },
    "Banana": {
        "count": 3,
        "countInBaskets": 2,
        "fruitName": "Banana",
        "sum": 11
    },
    "Lemon": {
        "count": 7,
        "countInBaskets": 2,
        "fruitName": "Lemon",
        "sum": 10
    },
    "Strawberry": {
        "count": 9,
        "countInBaskets": 1,
        "fruitName": "Strawberry",
        "sum": 9
    }
}

평균

합계 후 평균을 계산할 수 있습니다.

  const basketAverage = Object.keys(basketSum).map(fruitName => {
    const item = basketSum[fruitName];
    return {
      fruitName: item.fruitName,
      averageCountOverall: item.sum / basketCounts,
      averageCountWithMinOne: item.sum / item.countInBaskets,
      sum: item.sum
    };
  });
  return basketAverage;

후에

[
    {
        "averageCountOverall": 5,
        "averageCountWithMinOne": 5,
        "fruitName": "Apple",
        "sum": 10
    },
    {
        "averageCountOverall": 5.5,
        "averageCountWithMinOne": 5.5,
        "fruitName": "Banana",
        "sum": 11
    },
    {
        "averageCountOverall": 4.5,
        "averageCountWithMinOne": 9,
        "fruitName": "Strawberry",
        "sum": 9
    },
    {
        "averageCountOverall": 5,
        "averageCountWithMinOne": 5,
        "fruitName": "Lemon",
        "sum": 10
    }
]

결과

코딩

GitHub 또는 StackBlitz의 코딩을 참조하십시오.

JohannesKonings / 예-반응-다른-배열의 항목 평균

StackBlitz ⚡️로 생성

예-반응-평균-항목-다른-배열

Edit on StackBlitz ⚡️


View on GitHub