React JS 排序和堆叠列表值

Question

假设

const listA = [{"key":"apple", "value":100}, {"key":"banana", "value":50}, {"key":"pearl", "value":10}, {"key":"cherry", "value":5}, {"key":"kiwi", "value":3}]
const listB = [{"key":"peach", "value":30}, {"key":"apple", "value":15}, {"key":"kiwi", "value":10}, {"key":"mango", "value":5}]

如你所见，在数组中它得到了每个对象对 "key " 和 "value"，我希望在新构建列表中叠加相同键的值，新构建列表还需要按值降序排列，例如这样的东西 ->

const listMerged = [{"key":"apple", "value":115}, {"key":"banana", "value":50} , {"key":"peach", "value":30}, {"key":"kiwi", "value":13}, {"key":"pearl", "value":10}, {"key":"cherry", "value":5}, {"key":"mango", "value":5}]

刚刚试过类似的东西 ->

let newArr = listB.forEach((item) => {

  let ifElemPresentInListA = listA.findIndex((elem) => {
    return Object.keys(elem)[0] === Object.keys(item)[0]
  })

  if (ifElemPresentInListA === -1) {
    listA.push(item)
  } else {
    for (let keys in listA[ifElemPresentInListA]) {
      listA[ifElemPresentInListA][keys] += Object.values(item)[0]
    }
  }

})

但是结果有点乱

如果有人能提出更好的代码示例，那就太好了。谢谢

Answer 1

这是一个可能的解决方案，它连接列表，按键排序，然后遍历 concatenated/sorted 数组以有条件地在新列表中添加或递增。

const listA = [{"key":"apple", "value":100}, {"key":"banana", "value":50}, {"key":"pearl", "value":10}, {"key":"cherry", "value":5}, {"key":"kiwi", "value":3}]
const listB = [{"key":"peach", "value":30}, {"key":"apple", "value":15}, {"key":"kiwi", "value":10}, {"key":"mango", "value":5}]

let lists = [];

listA.concat(listB).sort((a, b) => a.key > b.key).forEach(el => {
  if (lists.length > 0 && lists[lists.length - 1].key === el.key) {
    lists[lists.length - 1].value += el.value;
  } else {
    lists.push(el);
  }
});

console.log(lists.sort((a, b) => b.value - a.value));

Answer 2

您可以将两个数组压缩到对象中以对匹配键的值求和，然后从对象创建数组：

const listA = [{"key":"apple", "value":100}, {"key":"banana", "value":50}, {"key":"pearl", "value":10}, {"key":"cherry", "value":5}, {"key":"kiwi", "value":3}];
const listB = [{"key":"peach", "value":30}, {"key":"apple", "value":15}, {"key":"kiwi", "value":10}, {"key":"mango", "value":5}];

let result = [...listA, ...listB].reduce((acc, item) => {
  acc[item.key] = acc[item.key] ? acc[item.key] + item.value : item.value
  return acc;
}, {});

result = Object.entries(result)
  .map(([key, value]) => ({ key, value }))
  .sort((a, b) => b.value - a.value);

console.log(result);

Answer 3

您可以使用 Map 收集所有 key/value 对，然后对新数组进行排序。

const
    listA = [{ key: "apple", value: 100 }, { key: "banana", value: 50 }, { key: "pearl", value: 10 }, { key: "cherry", value: 5 }, { key: "kiwi", value: 3 }],
    listB = [{ key: "peach", value: 30 }, { key: "apple", value: 15 }, { key: "kiwi", value: 10 }, { key: "mango", value: 5 }],
    result = Array
        .from(
            [...listA, ...listB].reduce((m, { key, value }) => m.set(key, (m.get(key) || 0) + value), new Map),
            ([key, value]) => ({ key, value })
        )
        .sort(({ key: a }, { key: b }) => a.localeCompare(b));

console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }

React JS 排序和堆叠列表值

React JS Sorting and Stacking list value

javascript

sorting

bubble-sort