如何过滤或 re/assemble 并收集数据项，其中每个项目的许多颜色值都满足特定条件？

Question

我有这个示例数据，我想在颜色小于 20 或等于 20 的地方过滤它：

const data = [
  { name: "Item1", colors: { green: 8 } },
  { name: "Item2", colors: { green: 7, black: 6 } },
  { name: "Item3", colors: { green: 20, yellow: 31, pink: 36 } },
  { name: "Item4", colors: { black: 39, red: 21 } },
];

我在 codesandbox 中重新创建了这个：https://codesandbox.io/s/magical-margulis-yy1moz?file=/src/App.js

我试过这个：

const data = [{colors: { green: 8 },name: "Item1"},{colors: { Black: 6, Green: 7 },name: "Item2"},{colors: { Green: 20, Yellow: 31, Pink: 36 },name: "Item2"},{colors: { Black: 39, Red: 21 },name: "Item4"}];

const newData = data.filter((item) => {
  return Object.entries(item.colors).filter((c) => c[1] < 20);
});

console.log(newData);

过滤不正确。我仍然可以看到所有项目，即使它们超过 20

预期的输出将显示过滤后的数据：

Item1, green: 8
Item2, Black: 6, Green: 7,
Item3, Green: 20

Answer 1

您可以使用 array#filter 过滤颜色值并创建一个新的 colors 对象并使用 array#reduce.

将其推送到结果中

const data = [ { colors: { green: 8 }, name: "Item1" }, { colors: { Black: 6, Green: 7 }, name: "Item2" }, { colors: { Green: 20, Yellow: 31, Pink: 36 }, name: "Item2" }, { colors: { Black: 39, Red: 21 }, name: "Item4" } ],
      result = data.reduce((r, o) => {
        const colors = Object.entries(o.colors).filter(([,val]) => val <= 20);
        if(colors.length) {
          r.push({ colors: Object.fromEntries(colors), name: o.name });
        }
        return r;
      },[]);
console.log(result);

Answer 2

试试这个

const data = [{
    colors: {
      green: 8
    },
    name: "Item1"
  },
  {
    colors: {
      Black: 6,
      Green: 7
    },
    name: "Item2"
  },
  {
    colors: {
      Green: 20,
      Yellow: 31,
      Pink: 36
    },
    name: "Item2"
  },
  {
    colors: {
      Black: 39,
      Red: 21
    },
    name: "Item4"
  }
];

const filtered = data.map(d => ({ ...d,
      colors: Object.fromEntries(Object.entries(d.colors).filter(([_, v]) => v <= 20))
    })).filter(d => Object.keys(d.colors).length > 0)

    console.log(filtered)

Answer 3

我认为过滤器不会在这里完成工作，因为它是一个对象而不是数组，我们可以结合使用 reduce 和更多方法来实现这一点，我还发现了您数据中的拼写错误，所以我也修复了

const data = [
  {
    colors: { green: 8 },
    name: 'Item1',
  },
  {
    colors: { black: 6, green: 7 },
    name: 'Item2',
  },
  {
    colors: { green: 20, yellow: 31, pink: 36 },
    name: 'Item3',
  },
  {
    colors: { black: 39, red: 21 },
    name: 'Item4',
  },
];

const res = data.reduce((acc, v) => {
  const colors = Object.keys(v.colors).filter(c => v.colors[c] <= 20);
  if (!acc[v.name] && colors.length) {
    const values = {};
    colors.forEach(c => {
      values[c] = v.colors[c];
    });
    acc[v.name] = values;
  }
  return acc;
}, {});

console.log(res);

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

Answer 4

一种可能的方法是reduce给定的数据结构两次。

第一个减少循环模仿过滤器功能。直接过滤不起作用，因为项目可能仅部分满足具有小于或等于 20.

的特征颜色值的标准

因此需要 (re)create/assemble 这样一个只有匹配 key-value 对的项目，由第二个 reduce 任务处理 Object.entries of a color item are getting processed, and the new color item programmatically gets aggregated via Object.assign.

再次回到第一个缩减周期，最终决定是否收集（不是完全过滤）一个项目是根据刚刚创建的颜色对象做出的。如果该对象具有至少一个键，则它是一个有效对象；因此，可以从原始项目的数据和新的颜色对象创建最终项目。

const data = [
  { name: "Item1", colors: { green: 8 } },
  { name: "Item2", colors: { green: 7, black: 6 } },
  { name: "Item3", colors: { green: 20, yellow: 31, pink: 36 } },
  { name: "Item4", colors: { black: 39, red: 21 } },
];
console.log(
  data
    .reduce((result, { name, colors, ...rest }) => {

      // (try to) create a new color item
      // with all the key-value pairs where
      // `value` meets the OP's criteria.
      const newColorItem = Object
        .entries(colors)
        .reduce((item, [key, value]) => {

          if (value <= 20) {
            Object.assign(item, { [key]: value });
          }
          return item;

        }, {});

      // for every created and valid new color item
      // push a newly created item into the `result`
      // array where this item's data structure equals
      // the structure of the currently processed
      // original item.
      if (Object.keys(newColorItem).length >= 1) {
        result
          .push({
            name,
            colors: newColorItem,
            ...rest,
          });
      }
      return result;

    }, [])
)

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

Answer 5

as filter returns 数组（空数组是真值）所以你的内部过滤器总是真，因此它提供了所有数据。

const data = [
  {
    color: { green: 8 },
    name: "Item1"
  },
  {
    color: { Black: 6, Green: 7 },
    name: "Item2"
  },
  {
    color: { Green: 20, Yellow: 31, Pink: 36 },
    name: "Item3"
  },
  {
    color: { Black: 39, Red: 21 },
    name: "Item4"
  }
];

const newData = data.flatMap(item => {
  const filteredColors = Object.entries(item.color).filter(c => c[1] <= 20);
  return filteredColors.length ? { name: item.name, colors: filteredColors } : [];
});

console.log(newData);

如何过滤或 re/assemble 并收集数据项，其中每个项目的许多颜色值都满足特定条件？

How do I filter or re/assemble and collect data-items where each of an item's many color values meets a certain condition?

javascript

arrays

data-structures

filter

reduce