reduce()的使用案例

 reduce()方法用于对数组进行累积操作，它可以用来求和、求积、统计元素出现次数、数组去重等。通过提供一个回调函数和可选的初始值，reduce会对数组的每个元素执行回调，将结果汇总为单个返回值。需要注意的是，如果数组为空且未提供初始值，reduce会抛出错误；提供初始值则从索引0开始计算。

 语法介绍：

// arr.reduce(callback,[initialValue])
 
array.reduce((prev, cur, index, arr)=> {
    /***/
}, initialValue)

  reduce 为数组中的每一个元素依次执行回调函数，接受四个参数：初始值 initialValue（或者上一次回调函数的返回值），当前元素值，当前索引，调用 reduce 的数组。

参数： 
 参数一： callback 函数（执行数组中每个值的函数，包含四个参数）：

    prev 必需 （上一次调用回调返回的值，或者是提供的初始值（initialValue））
    cur 必需（数组中当前被处理的元素）
    index 可选 （当前元素在数组中的索引）
    arr 可选 （调用 reduce 的数组）
参数二：initialValue 可选 （表示初始值，作为第一次调用 callback 的第一个参数。）

        提供初始值，cur 从数组第一项开始，若不提供初始值，则 cur 从第二项开始执行，对应的第一次 prev 是数组第一项的值 。

 使用案例：

set events(value: DraggableItem[]) {
    this.dayInfoList = value.reduce((previousValue, currentValue) => {
      const date = moment(currentValue.start).format('YYYY-MM-DD');
      const isNewAdd = currentValue.status === 'isNewAdd';
      const info = previousValue.find((item) => item.date === date);
      if (info) {
        info.total_hours += currentValue.hour;
        info.isNewAdd = isNewAdd;
      } else {
        previousValue.push({ date, total_hours: currentValue.hour, isNewAdd });
      }
      return previousValue;
    }, <DayInfo[]>[]);
    this._events = value;
  }

这段代码定义了一个名为 set events 的 setter 方法，它接收一个名为 value 的参数，该参数是一个 DraggableItem[] 类型的数组。这个方法的主要目的是根据传入的 DraggableItem 数组来更新一个名为 dayInfoList 的属性，并设置 _events 属性为传入的 value。

代码解释

1. 初始化 dayInfoList:

   • dayInfoList 被初始化为一个空数组，这个数组将用于存储每天的汇总信息。

2. 使用 reduce 方法处理 value 数组:

   • reduce 方法用于将 value 数组中的每一项转换成一个累积的结果，这里的累积结果就是 dayInfoList。
   • reduce 方法接收两个参数：previousValue 和 currentValue。
     • previousValue 是累积器，开始时为 <DayInfo[]>[]，即一个空的 DayInfo 数组。
     • currentValue 是当前迭代的 DraggableItem。

3. 处理每一天的信息:

   • 对于每一个 DraggableItem (currentValue)，我们获取它的开始日期 start，并格式化为 'YYYY-MM-DD' 格式的字符串。
   • 然后检查 dayInfoList 中是否已经有这一天的信息 (info)。
     • 如果存在，则更新这一天的信息，增加工作小时数 (total_hours) 和检查是否是新增项 (isNewAdd)。
     • 如果不存在，则向 dayInfoList 添加一个新的项，包括日期、总小时数和是否为新增项。

4. 设置 _events 属性:

   • 最后，将传入的 value 设置为 _events 属性。

5. 示例

• 假设 DraggableItem 和 DayInfo 的定义如下：

• interface DraggableItem {
      start: Date; // 开始时间
      hour: number; // 工作小时数
      status: 'isNewAdd' | 'isNotNewAdd'; // 是否为新增项
  }
  
  interface DayInfo {
      date: string; // 日期
      total_hours: number; // 总小时数
      isNewAdd: boolean; // 是否为新增项
  }

  假设我们有一个 DraggableItem 数组 value：

• const value: DraggableItem[] = [
      { start: new Date('2023-09-01T09:00:00'), hour: 4, status: 'isNewAdd' },
      { start: new Date('2023-09-01T13:00:00'), hour: 3, status: 'isNotNewAdd' },
      { start: new Date('2023-09-02T09:00:00'), hour: 5, status: 'isNewAdd' }
  ];

  当我们调用 set events(value) 时，dayInfoList 将会被更新为：

• [
      { date: '2023-09-01', total_hours: 7, isNewAdd: false }, // 4 + 3 小时, 不是新增项
      { date: '2023-09-02', total_hours: 5, isNewAdd: true } // 5 小时, 新增项
  ]

  这就是这段代码的主要功能和行为。