我如何過濾或重新/組裝和收集專案的許多顏色值中的每一個都滿足特定條件的資料專案？

我有這個樣本資料，我想在顏色小于 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 } },
];

我在代碼沙箱中重新創建了這個： 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 

uj5u.com熱心網友回復：

我認為過濾器不會在這里完成這項作業，因為它是一個物件而不是一個陣列，我們可以結合使用 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; }

uj5u.com熱心網友回復：

一種可能的方法是對reduce給定的資料結構進行兩次。

第一個減少回圈模擬過濾器功能。直接過濾不起作用，因為專案可能僅部分滿足特征顏色值低于或等于的標準20。

因此，需要（重新）創建/組裝這樣一個專案，其中僅包含匹配的鍵值對，該鍵值對由第二個減少任務處理，其中Object.entries顏色專案的 正在處理，并且新的顏色專案以編程方式通過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; }

uj5u.com熱心網友回復：

您可以使用過濾顏色值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);

uj5u.com熱心網友回復：

試試這個

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)

uj5u.com熱心網友回復：

asfilter回傳陣列（一個空陣列是一個真實值），所以你的內部過濾器總是正確的，因此它給出了所有資料。

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);

標籤：javascript 数组 数据结构 筛选 减少

上一篇：如何重新映射一個json陣列

下一篇：如何替換行二維陣列中的重復項