reduce的使用

定义：

接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。

---

使用：

// 参数（ acc：必填，cur：必填，idx：非必填，arr：非必填）
returnVal = arr.reduce((acc:上一次计算后返回的值,cur:当前值,idx:当前索引,arr:原始数组)=>{},initialVal)

---

示例：

求和：

const a = [1,2,3,4];
const sum = a.reduce((acc,cur)=>{
    return acc+cur
},0)
console.log(sum)  // 10

---

复杂场景：

需求：将数组对象按某个属性进行聚合，并且将

例如：

  数组数据根据key进行聚合
  ex:key:day,原始数组[{day:1,cost:1,dk:1},{day:1,cost:2},...] => [{day:1,cost:[1,2],dk:[1,null]},...]

分析：

• 第一步得计算出原始数组里对象属性的并集
• 第二步根据第一步计算出的属性列表将原始数据按属性聚合，若原始数据的属性不一致，就要考虑将聚合属性的值补齐
• 第三步获取聚合后每个属性的最大长度，为补齐做准备
• 第四步用第三步得到的属性长度补齐第二步得到的聚合数据

好了，分析完做法，下面就是代码编写了

• 第一步

const allKeys = data.reduce((prev, acc) => {
   const allkeys = Object.keys(acc);
   allkeys.forEach((key) => {
     if (!prev.find((prKey) => prKey === key)) {
       prev.push(key);
     }
   });
   return prev;
 }, []);
 // 获取非key之外的所有属性名称
 const keys = allKeys.filter((itm) => itm !== key);

• 第二步（这里我先聚合成一个对象，再通过Object.values去转为数组，也可以直接聚合为数组，对象的好处是属性不会重复）

const initData = Object.values(
   data.reduce((acc, cur) => {
     if (acc[cur[key]]) {
       keys.forEach((itm) => {
         acc[cur[key]][itm].push(cur[itm]);
       });
     } else {
       const itemData = {
         [key]: cur[key]
       };
       keys.forEach((itm) => {
         itemData[itm] = [cur[itm]];
       });
       acc[cur[key]] = itemData;
     }
     return acc;
   }, {})
 );

• 第三步

const keyForLen = keys.reduce((acc, cur) => {
   let maxLen = 0;
   initData.forEach((itm) => {
     maxLen = itm[cur].length > maxLen ? itm[cur].length : maxLen;
   });
   acc[cur] = maxLen;
   return acc;
 }, {});

• 第四步

const finalData =  initData.map((item) => {
  keys.forEach((itm) => {
    const needFillNum = keyForLen[itm] - (item[itm].length || 0);
    if (needFillNum > 0) {
      item[itm] = [...item[itm], ...[...new Array(needFillNum)].map(() => null)];
    }
  });
  return item;
}) || [] 

前面就是分解步骤的关键代码，下面是完整代码

const getJsonArrKeys = (jsonArr) => {
    if (!(jsonArr instanceof Array)) return;
    return jsonArr.reduce((prev, acc) => {
      const allkeys = Object.keys(acc);
      allkeys.forEach((key) => {
        if (!prev.find((prKey) => prKey === key)) {
          prev.push(key);
        }
      });
      return prev;
    }, []);
  };
  const formatChartArr = (data, key) => {
    // 获取非key之外的所有属性名称
    const keys = getJsonArrKeys(data).filter((itm) => itm !== key);
    // 初始化聚合数组数据
    const initData = Object.values(
      data.reduce((acc, cur) => {
        if (acc[cur[key]]) {
          keys.forEach((itm) => {
            acc[cur[key]][itm].push(cur[itm]);
          });
        } else {
          const itemData = {
            [key]: cur[key]
          };
          keys.forEach((itm) => {
            itemData[itm] = [cur[itm]];
          });
          acc[cur[key]] = itemData;
        }
        return acc;
      }, {})
    );
    // 聚合数据各属性的最大长度
    const keyForLen = keys.reduce((acc, cur) => {
      let maxLen = 0;
      initData.forEach((itm) => {
        maxLen = itm[cur].length > maxLen ? itm[cur].length : maxLen;
      });
      acc[cur] = maxLen;
      return acc;
    }, {});
    // 根据属性最大长度补齐聚合数据
    return (
      initData.map((item) => {
        keys.forEach((itm) => {
          const needFillNum = keyForLen[itm] - (item[itm].length || 0);
          if (needFillNum > 0) {
            item[itm] = [...item[itm], ...[...new Array(needFillNum)].map(() => null)];
          }
        });
        return item;
      }) || []
    );
  };