JS如何实现固定长度数组插入数据，空缺位置自动填充0

你现有的对象数组结构如下：

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

数组内channelName只有WhatsApp和RCS两类，需求是按渠道筛选count值存入两个独立数组，数组长度保持一致，无对应渠道数据的位置填充0。你现有代码运行后输出的计数数组存在empty空位，需要将这些空位替换为0。

提供两种可选实现方式：

方案1：直接处理现有数组的empty值 #

数组空位在遍历中会被识别为undefined，你可以在赋值前统一做补0处理，同时修正原代码误用filter的问题（你没有过滤需求，用forEach更合适）：

const fillEmptyWithZero = (arr: number[], length: number) => {
  // 统一数组长度，所有空位/undefined替换为0
  return Array.from({length}, (_, i) => arr[i] ?? 0)
}

const filterData = (data: any) => {
    const category: string[] = [];
    const whatsAppCount: number[] = [];
    const rcsCount: number[] = [];
    data.forEach((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);
    });
    // 补0处理，统一长度和category一致
    const finalWhatsApp = fillEmptyWithZero(whatsAppCount, category.length)
    const finalRcs = fillEmptyWithZero(rcsCount, category.length)
    setGraphData({
      category: category,
      whatsApp: finalWhatsApp,
      rcs: finalRcs,
    });
    console.log("handleRun", { category, whatsApp: finalWhatsApp, rcs: finalRcs });
  };

方案2：重构逻辑从根源避免生成empty #

直接在遍历的时候同时给两个数组赋值，不需要依赖索引赋值生成空位，逻辑更简洁性能更好：

const filterData = (data: any) => {
    const category: string[] = [];
    const whatsAppCount: number[] = [];
    const rcsCount: number[] = [];
    data.forEach((item: any) => {
      category.push(item.date);
      // 每遍历一项就同时给两个计数数组对应位置赋值，匹配到渠道就放count，否则放0
      whatsAppCount.push(item.channelName === "WhatsApp" ? item.count : 0);
      rcsCount.push(item.channelName === "RCS" ? item.count : 0);
    });
    setGraphData({
      category,
      whatsApp: whatsAppCount,
      rcs: rcsCount,
    });
};

内容的提问来源于stack exchange，提问作者aditya kumar