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
。
代码解释
-
初始化
dayInfoList
:dayInfoList
被初始化为一个空数组,这个数组将用于存储每天的汇总信息。
-
使用
reduce
方法处理value
数组:reduce
方法用于将value
数组中的每一项转换成一个累积的结果,这里的累积结果就是dayInfoList
。reduce
方法接收两个参数:previousValue
和currentValue
。previousValue
是累积器,开始时为<DayInfo[]>[]
,即一个空的DayInfo
数组。currentValue
是当前迭代的DraggableItem
。
-
处理每一天的信息:
- 对于每一个
DraggableItem
(currentValue
),我们获取它的开始日期start
,并格式化为'YYYY-MM-DD'
格式的字符串。 - 然后检查
dayInfoList
中是否已经有这一天的信息 (info
)。- 如果存在,则更新这一天的信息,增加工作小时数 (
total_hours
) 和检查是否是新增项 (isNewAdd
)。 - 如果不存在,则向
dayInfoList
添加一个新的项,包括日期、总小时数和是否为新增项。
- 如果存在,则更新这一天的信息,增加工作小时数 (
- 对于每一个
-
设置
_events
属性:- 最后,将传入的
value
设置为_events
属性。
- 最后,将传入的
-
示例
-
假设
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 小时, 新增项 ]
这就是这段代码的主要功能和行为。