如何在js中将数据推送到固定长度的数组答案

【问题标题】：How can I push data to an array with fixed length in js如何在js中将数据推送到固定长度的数组
【发布时间】：2021-09-07 18:11:10
【问题描述】：

我有一个类似这样的对象数组。

[
 {
    channelName: "WhatsApp"
    count: 1
    date: "2021-06-05"
 },{
 channelName: "RCS"
 count: 1
 date: "2021-06-09"
}
]

频道名称有两种类型 1. WhatsApp 和 2nd 是 RCS。我想过滤掉具有特定通道名称的计数并将其存储在单独的数组中。但这里的问题是我希望两个数组长度应该相同。如果 WhatsApp 有数据，那么它将添加计数，否则它将添加 0 代替它。

为此，我做了类似的事情，但这不起作用。

const filterData = (data: any) => {
    const category: any = [];
    const whatsAppCount: any = [];
    const rcsCount: any = [];
    data.filter((item: any, i: number) => {
      if (item.channelName === "WhatsApp") {
        whatsAppCount[i] = item.count;
      } else if (item.channelName === "RCS") {
        rcsCount[i] = item.count;
      }
      category.push(item.date);
    });
    setGraphData({
      category: category,
      whatsApp: whatsAppCount,
      rcs: rcsCount,
    });
    console.log("handleRun", { category, whatsAppCount, rcsCount });
  };

这里的控制台日志给出了类似的内容。

whatsAppCount: [1, 2, 13, 21, empty × 2, 8, 5, empty, 18, empty, 12, 4]
rcsCount: [empty × 4, 1, 12, empty × 2, 1, empty, 8]

这里是空的，我想要 0。我不知道该怎么做，任何帮助都会很棒。

【问题讨论】：

您能否更新您的输入示例，以便我们了解您获得该输出的原因？
我想你应该看看我的回答，即使你接受它。不需要一开始就初始化一个空数组。
@ikhvjs 我试过你的答案，但在我的情况下，它没有按预期工作。
我必须在折线图上显示这些数据，并且必须将它们存储在一个单独的数组中，为什么您的答案在我的情况下不起作用。
好的。我想我的回答应该对你有所帮助。我想原因是我push(null)之前的空记录。我将答案更新为push(0)。它应该工作。不接受我的回答也没关系，但真的没必要为你的情况创建一个空数组。

标签： javascript arrays reactjs filter

【解决方案1】：

创建数组时，但在填充它们之前，有两个函数可以帮助初始化：

// create an array with 10 slots preallocated but empty (not `undefined`)
let arr = new Array(10);

// set all allocated slots to a value (`0` in this case)
arr = arr.fill(0);

由于您提前知道所需的长度，因此您可以使用它在构建时预先确定数组的大小。然后使用.fill 将值初始化为0。完成后，您可以继续计数和更新数组。

参考：

【讨论】：

【解决方案2】：

我建议你使用map-函数，将不需要的值映射到undefined，让其他值“通过”（未修改），例如：

const filtered = data.map((each) => {
   if (wantToKeep) {
      return each;
   } else {
      return undefined;
   }
});

请注意，这不是确切的解决方案 - 而是一个总体思路。

【讨论】：

【解决方案3】：

您可以将forEach 和push(0) 用于空记录。

const data = [
  {
    channelName: "WhatsApp",
    count: 1,
    date: "2021-06-05",
  },
  {
    channelName: "RCS",
    count: 1,
    date: "2021-06-01",
  },
  {
    channelName: "RCS",
    count: 1,
    date: "2021-06-06",
  },
  {
    channelName: "WhatsApp",
    count: 5,
    date: "2021-06-11",
  },
  {
    channelName: "WhatsApp",
    count: 7,
    date: "2021-06-23",
  },
  {
    channelName: "RCS",
    count: 1,
    date: "2021-06-09",
  },
];
const category = [];
const whatsAppCount = [];
const rcsCount = [];

data.forEach(x => {
  if (x.channelName === "WhatsApp") {
    whatsAppCount.push(x.count);
    rcsCount.push(0);
  } else if (x.channelName === "RCS") {
    whatsAppCount.push(0);
    rcsCount.push(x.count);
  }

  category.push(x.date);
});

console.log({ whatsAppCount });
console.log({ rcsCount });
console.log({ category });

【讨论】：