用鍵和另一個值陣列按陣列分組

我有以下物件：

var series = [{
    name: 'Series 1',
    data: [1400, 999, 450],
    tag: "Tag 1"
}, {
    name: 'Series 2',
    data: [355, 188, 99],
    tag: "Tag 1"
}, {
    name: 'Series 3',
    data: [205, 488, 104],
    tag: "Tag 2"
}];

我想要做的是對該陣列執行 groupBy 函式，例如，呼叫orderBy("tag")應該回傳以下輸出：

[{
    name: "Series 1 / Series 2",
    data: [1755, 1187, 549], // => Sum: Series1[0]   Series2[0], Series1[1]   Series2[1], etc...
    tag: "Tag 1"
},  {
    name "Series 3",
    data: [205, 488, 104],
    tag: "Tag 2"
}]

目前，這是我到目前為止所做的：

var seriesArray = [{
            name: 'Series 1',
            data: [1400, 999, 450],
            tag: "Tag 1"
        }, {
            name: 'Series 2',
            data: [355, 188, 99],
            tag: "Tag 1"
        }, {
            name: 'Series 3',
            data: [205, 488, 104],
            tag: "Tag 2"
        }];

const groupBy = (key) => seriesArray.reduce((total, currentValue) => {
  const newTotal = total;
  if (
    total.length &&
    total[total.length - 1][key] === currentValue[key]
  )
    newTotal[total.length - 1] = {
      ...total[total.length - 1],
      ...currentValue,
      data: parseInt(total[total.length - 1].data[0])   parseInt(currentValue.data[0]),
    };
  else newTotal[total.length] = currentValue;
  return newTotal;
}, []);

console.log(groupBy('tag'));

正如您所看到的，它似乎可以使用 orderBy("tag") 但我正在顯式地進行求和操作，主要問題是 data[] 可能有 X 元素。

uj5u.com熱心網友回復：

目前，您的方法假定添加到total陣列中的最后一個專案與key您嘗試分組的專案相同。如果資料按排序key（即：所有“標簽 1”排在第一位），這一切都很好，但如果不是，則可能是一個問題。相反，我建議您首先構建一個Map由tag. 這樣您就可以使用該物件來查找您累積的"Tag 1", "Tag 2", 等等... 物件。將其簡化為物件/映射后，您可以獲取值（即累積的物件）并將它們放入陣列中。要處理不同的data陣列長度，您可以使用.map()累積的資料陣列（即：）seen.data，然后將每個數字與當前物件的相應數字相加data使用索引引數的陣列i：

const seriesArray = [{ name: 'Series 1', data: [1400, 999, 450], tag: "Tag 1" }, { name: 'Series 2', data: [355, 188, 99], tag: "Tag 1" }, { name: 'Series 3', data: [205, 488, 104], tag: "Tag 2" }];

const groupBy = (arr, key) => Array.from(arr.reduce((map, currentObj) => {
  const groupOnKey = currentObj[key];
  const seen = map.get(groupOnKey);
  return map.set(groupOnKey, seen ? {
    ...seen,
    name: seen.name   " / "   currentObj.name,
    data: seen.data.map((num, i) => num   currentObj.data[i], 0)
  } : currentObj);
}, new Map()).values());

console.log(groupBy(seriesArray, 'tag'));

uj5u.com熱心網友回復：

很好的挑戰，這發生在我的findIndex 上

const groupBy = (key) => seriesArray.reduce((total, currentValue) => {
  index = total.findIndex(x => x[key] === currentValue[key])
  if (index >= 0) {
    total[index].data = total[index].data.map(function (num, idx) {
      return num   parseInt(currentValue.data[idx]);
    }); 
    total[index].name  = " / "   currentValue.name;
  } else {
    total.push(currentValue);
  }
  return total;
}, []);

uj5u.com熱心網友回復：

我認為你的 reduce 回呼函式中的邏輯不會給你想要的結果。我將解釋該函式的作用。

1. 第一次迭代總計是一個空陣列，因為這是初始值，因此條件為假，執行 else 塊并將陣列的第一個元素添加到新陣列
2. 第二次迭代總數現在有一個元素與當前元素具有相同的標簽，因此如果陳述句為真并且執行的代碼將覆寫第一個元素，這就是為什么 name 變為 Serie 2 而不是 Serie 1 并且 data 是數字而不是一個陣列，其值等于 current.data[0] total[0].data[0] = 1755 的總和
3. 第三次迭代 if 陳述句不匹配并執行 else 塊，將第三個元素添加到總陣列中。另請注意，如果您嘗試在 serie 2 和 serie 3 之間切換順序，則使用 total.length -1 不涵蓋第二個專案實際上不匹配的情況，您將不會得到按標簽分組的 serie 1 和 serie 2。

你想做什么

var seriesArray = [{
    name: 'Series 1',
    data: [1400, 999, 450],
    tag: "Tag 1"
  },
  {
    name: 'Series 3',
    data: [1400, 999, 450],
    tag: "Tag 2"
  }, {
    name: 'Series 2',
    data: [355, 188, 99],
    tag: "Tag 1"
  },
];

const isMatchingArray = (array1, array2) => {
  if (array1.length !== array2.length) {
    return false;
  }
  for (let i = 0; i < array1.length; i  ) {
    if (array1[i] !== array2[i]) {
      return false;
    }
  }
  return true;
}

const groupBy = (key, array) => array.reduce((total, currentValue) => {
  const newTotal = total;
  if (total.length) {
    const matchingItemIndex = total.findIndex(element => {
      if (typeof element[key] === 'string') {
        return element[key] === currentValue[key];
      } else if (Array.isArray(element[key])) {
        return isMatchingArray(element[key], currentValue[key]);
      }
    });
    if (matchingItemIndex !== -1) {
      newTotal[matchingItemIndex] = {
        ...total[matchingItemIndex],
        ...currentValue,
        name: total[matchingItemIndex].name   ' / '   currentValue.name,
        data: currentValue.data.map((dataItem, index) => parseInt(dataItem   total[matchingItemIndex].data[index])),
      };
    } else {
      newTotal.push(currentValue)
    }
  } else {
    newTotal.push(currentValue)
  };
  return newTotal;
}, []);

console.log(groupBy('tag', seriesArray))
console.log(groupBy('data', seriesArray));

uj5u.com熱心網友回復：

const series = [
  {
    name: 'Series 1',
    data: [1400, 999, 450],
    tag: 'Tag 1',
  },
  {
    name: 'Series 2',
    data: [355, 188, 99],
    tag: 'Tag 1',
  },
  {
    name: 'Series 3',
    data: [205, 488, 104],
    tag: 'Tag 2',
  },
];
const groupBykeyAndSum = (key, series) => {
  const grouped = series.reduce((acc, serie) => {
    const group = acc.find(g => g.tag === serie[key]);
    if (group) {
      group.name  = ` / ${serie.name}`;
      group.data = group.data.map((d, i) => d   serie.data[i]);
    } else {
      acc.push({
        name: serie.name,
        data: serie.data,
        tag: serie[key],
      });
    }
    return acc;
  }, []);
  return grouped;
};
console.log(groupBykeyAndSum('tag', series));

標籤：javascript 数组

上一篇：這兩種二分搜索演算法的空間復雜度是否相同？

下一篇：無法在Node中匯入openai