计算数组中匹配对象数量的有效方法

Question

请参阅下面的尝试和示例，我正在寻找一种在 JS 中获得匹配水果数量的有效方法。 目前我正在使用过滤器在items数组中查找匹配项，但我想知道是否有更好的方法（不必在每次迭代时过滤fruits数组~想象它是一个更大的水果数组） 。

  const items = [
    {
      id: '111',
      name: 'apple',
    },
    {
      id: '222',
      name: 'apple',
    },
    {
      id: '333',
      name: 'kiwi',
    },
  ];

  const fruits = [
    {
      id: 'fruit-1',
      name: 'apple',
    },
    {
      id: 'fruit-2',
      name: 'banana',
    },
    {
      id: 'fruit-3',
      name: 'kiwi',
    },
  ];

  // attempted
  const numberOfFruitsInItems = fruits.map((fruit) => {
    const itemsWithFruit = items.filter(({ name }) => fruit.name === name);

    return {
      ...fruit,
      total: itemsWithFruit.length,
    };
  });

  console.log(numberOfFruitsInItems);

  // desired response
  [
    {
      id: 'fruit-1',
      name: 'apple',
      total: 2,
    },
    {
      id: 'fruit-2',
      name: 'banana',
      total: 0,
    },
    {
      id: 'fruit-3',
      name: 'kiwi',
      total: 1,
    },
  ];

Answer 1

由于该站点上有许多问题和答案，您应该按name对对象数组进行分组，对每个对象进行计数并存储在一个grouped的 object 中，键是名称，值是计数。

 const items = [{id:"111",name:"apple"},{id:"222",name:"apple"},{id:"333",name:"kiwi"},]; const fruits = [{id:"fruit-1",name:"apple"},{id:"fruit-2",name:"banana"},{id:"fruit-3",name:"kiwi"},]; var grouped = items.reduce(function(agg, item) { agg[item.name] = (agg[item.name] || 0) + 1 return agg }, {}) fruits.forEach(function(item) { item.total = grouped[item.name] || 0 }) console.log(fruits)

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

Answer 2

您需要在 map 每个水果之前缓存项目频率。

 const items = [ { id: '111', name: 'apple' }, { id: '222', name: 'apple' }, { id: '333', name: 'kiwi' } ], fruits = [ { id: 'fruit-1', name: 'apple' }, { id: 'fruit-2', name: 'banana' }, { id: 'fruit-3', name: 'kiwi' } ]; const main = () => { const reducedFruits = fruitReducer(fruits, items); console.log(reducedFruits); }; const computeFrequency = (items, accessor) => items.reduce((acc, item) => (key => acc.set(key, (acc.get(key)?? 0) + 1)) (accessor? accessor(item): item), new Map); const fruitReducer = (fruits, items) => ((freqMap) => fruits.map(({ id, name }) => ({ id, name, total: freqMap.get(name)?? 0 }))) (computeFrequency(items, ({ name }) => name)) main();

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

Answer 3

最好将这两种机制分开来删除嵌套迭代。 首先使用reduce遍历items数组以创建键/值对字典（例如{ apple: 2 } ，然后循环遍历fruits数组，从字典中添加正确的计数信息。

 const items=[{id:"111",name:"apple"},{id:"222",name:"apple"},{id:"333",name:"kiwi"}],fruits=[{id:"fruit-1",name:"apple"},{id:"fruit-2",name:"banana"},{id:"fruit-3",name:"kiwi"}]; // `reduce` over the items. // If the item name isn't a key on the object // set it to zero, then add one const itemCount = items.reduce((acc, { name }) => { fruits[name]??= 0; ++fruits[name]; return fruits; }, {}); // Update the `fruits` using the dictionary // count information - note this mutates the // `fruits` array so if you want a new array // use `map` instead of `forEach` fruits.forEach(fruit => { fruit.count = itemCount[fruit.name] || 0; }); console.log(fruits);

附加信息

• 逻辑无效赋值

Answer 4

您可以在更新相应水果的全局计数器的items上进行一次迭代来完成此操作。

// Use a hashed object to keep count of totals per fruit name.
// totals[FRUIT NAME] = ...number of items having name=FRUIT NAME
const totals = {}

// Fill the totals hash in one single iteration of items
items.forEach(item => {
  totals[item.name] = (totals[item.name] || 0) + 1
})

const numberOfFruitsInItems = fruits.map((fruit) => {
  return {
    ...fruit,
    total: totals[fruit.name] || 0,
  };
});

Answer 5

一个不会改变您的原始数据的版本——毕竟，我们不是野蛮人，对吧？ -- 可以从创建fruit数组的副本开始，为每个数组添加一个count属性，将它们存储为 object 键控水果名称，然后通过增加相关节点的count属性将items列表折叠到其中。 最后，我们只是收集并返回这个 object 的values 。

代码非常简单：

 const countFruits = (fruits, items) => Object.values (items.reduce ( (a, {name}) => ((a [name].count += 1), a), fruits.reduce ((a, f) => ((a [f.name] = {...f, count: 0}), a), {}) )) const items = [{id: '111', name: 'apple'}, {id: '222', name: 'apple'}, {id: '333', name: 'kiwi'}] const fruits = [{id: 'fruit-1', name: 'apple', }, {id: 'fruit-2', name: 'banana', }, {id: 'fruit-3', name: 'kiwi', }] console.log (countFruits (fruits, items))

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

请注意，没有错误检查，您可能需要它。 如果items包括{id" 444', name: 'papaya'}怎么办，即使paypaya不在水果列表中。这应该不太难处理，我们可以将其留作练习。