创建具有附加属性和时刻的工作日数组
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了创建具有附加属性和时刻的工作日数组相关的知识,希望对你有一定的参考价值。
使用Momentjs,我正在创建对象数组month
。在此数组内有两个属性:week
和day
。 week
只是一个数字,由瞬间生成。 day
当前是该周中日期的数组,如果是月初或月末,则包括肩膀日期(例如,上周的范围是10月27日至11月2日的27-2)。现在,我不仅需要数字数组,还需要将days
属性作为对象,并使用date
属性作为月份中的日期,并使用isShoulderDate
布尔值来确定其在内部还是外部当月的月份。
这是先前生成month
数组的方式。
this.month = [];
const startWeek = moment(this.selectedDate.from).startOf('month').week();
const endWeek = moment(this.selectedDate.from).endOf('month').week();
for (let week = startWeek; week <= endWeek; week++) {
this.month.push({
week: week,
days: Array(7).fill(0).map((n, i) =>
moment().week(week).startOf('week').clone().add(n + i, 'day').format('D')),
});
}
我已经尝试了几种不同的方式来修改days
属性。我最近的尝试是:
for (let week = startWeek; week <= endWeek; week++) {
this.month.push({
week: week,
days: Array(7).fill({
isShoulderDate: null,
}),
});
}
this.month.forEach((calendarWeek) => {
calendarWeek.days.map((day, n, i) => {
day.date = moment().week(calendarWeek).startOf('week').clone().add(n + i, 'day').format('D');
});
});
这只会在3
属性中一遍又一遍地输出date
。我还想在最初填充数组时进行映射,而不要使用额外的forEach
以避免额外的迭代。
答案
主要问题是在Array(7).fill({ })
中,您正在使用one对象在数组中填充7个插槽。它们不是7个对象,而只是一个,您已引用7次。因此,当您以后对第一个数组元素中引用的对象进行更新时,该更改在all数组元素中可见。
这里是您如何做的。该演示适用于2019年5月:
var selectedDate = { from: new Date("2019-05-01") };
this.month = [];
const curMonth = moment(this.selectedDate.from).month(); // Get the month
const startWeek = moment(this.selectedDate.from).startOf('month').week();
const endWeek = moment(this.selectedDate.from).endOf('month').week();
for (let week = startWeek; week <= endWeek; week++) {
let dt = moment().week(week).startOf('week');
this.month.push({
week: week,
days: Array.from({length: 7}, (_, i) => ({
date: dt.add(i ? 1 : 0, 'day').format('D'),
isShoulderDate: dt.month() !== curMonth,
})),
});
}
console.log(month);
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.0/moment.min.js"></script>
以上是关于创建具有附加属性和时刻的工作日数组的主要内容,如果未能解决你的问题,请参考以下文章