javascript - 在Javascript中访问字典中的嵌套字典
问题描述
我正在寻找一个日历,以根据我学校的当前日期检索假期。目前,我将数据结构化为字典,其中包含字典。
const holidays = {
January: {
"Martin Luther King Jr. Day": [17]
},
February: {},
March: {
"Spring Break": [16]
},
April: {},
May: {},
June: {},
July: {
"Fourth of July": [4]
},
August: {},
September: {},
October: {},
November: {
"Thanksgiving": [25, 26]
},
December: {
"Christmas Eve": [23],
"Christmas": [25],
"Winter Break": [26, 27, 28, 29, 30, 31]
}
};
我目前的方法是它会检查月份,然后是日期的数组。如果日期存在于数组中,它将拉取键值以在上课时间网页上显示它是什么假期。我尝试了不同的方法来搜索子对象的数组,但都没有成功。
这是我的尝试:
function testCase() {
for (var k in holidays) {
if (x) {
let y = holidays[x];
for (var j in y) {
if (date == y[j]) {
return a.innerHTML = Object.keys(j[x]);
} else {
return a.innerHTML = "NO FIND";
}
}
}
}
}
```
解决方案
更新 |
---|
我在下面的解决方案中添加了一个日期选择器,因此您可以切换日期并查看该功能如何响应。 |
使用日期编号作为键和假期作为值来分解数据可能是一个更好的主意,这将特别有用,因为您可以检查当前日期编号的键值而不是循环每个 Object 键以查看哪个(如果有)包含当前日期。
另一个重要的注意事项是纯 JS 对象不尊重和保留插入顺序,因此最好使用对象数组,每月一个对象。使用对象数组不仅尊重插入顺序,而且使用零索引(意味着第一项的索引为 0),这也是 Date 方法的工作原理,如果当前月份是一月,则.getMonth()
该方法返回如果当前月份是 12 月。这也使我们能够使用数组轻松定义多节假日。0
11
考虑到这一点,我们仍然可以使用 JS 注释来引用月份名称。在下面的示例中,我将日期输入的默认值设置为圣诞节2021-12-25
,并包括当天的圣诞节和寒假,因此您可以看到该功能适用于多个假期。
const holidayStatus = document.getElementById('holiday-status'),
dateInput = document.querySelector('input[type="date"]');
const holidays = [
{ // January
1: "New Years Day",
17: "Martin Luther King Jr. Day"
},
{}, // February
{ // March
16: "Spring Break"
},
{}, // April
{}, // May
{}, // June
{ // July
4: "Fourth of July"
},
{}, // August
{}, // September
{}, // October
{ // November
25: "Thanksgiving",
26: "Thanksgiving"
},
{ // December
24: ["Christmas Eve", "Winter Break"],
25: ["Christmas", "Winter Break"],
26: "Winter Break",
27: "Winter Break",
28: "Winter Break",
29: "Winter Break",
30: "Winter Break",
31: ["New Years Eve", "Winter Break"]
},
];
const combineStrings = strs => (strs = [].concat(strs), strs.length === 1 ? strs[0] : (strs.length === 2 ? strs.join(' and ') : strs.map((str, i) => i === strs.length - 1 ? 'and ' + str : str).join(', ')));
const getDate = () => new Date(dateInput.value + ' 12:00');
const printHolidays = date => {
const todaysHolidays = holidays[date.getMonth()][date.getDate()];
holidayStatus.textContent = todaysHolidays ? (`This day's ${typeof todaysHolidays === 'string' || todaysHolidays.length === 1 ? 'holiday is' : 'holdays are'} ${combineStrings(todaysHolidays)}.`) : 'This day has no holidays.';
};
printHolidays(getDate());
dateInput.addEventListener('change', () => {
printHolidays(getDate());
});
#holiday-status {
display: inline-block;
margin-top: 5px;
padding: 5px 10px;
border: 2px solid #f00;
box-sizing: border-box;
}
<div>Using the date: <input type="date" value="2021-12-25"></div><span id="holiday-status"></span>
如果数组存在,我添加的辅助函数combineStrings
会动态组合多个字符串,如果传递的是简单字符串,则返回传递的字符串。
以下是一些不同字符串和字符串数组将返回的示例:
combineStrings("Holiday 1")
// -> "Holiday 1"
combineStrings(["Holiday 1", "Holiday 2"])
// -> "Holiday 1 and Holiday 2"
combineStrings(["Holiday 1", "Holiday 2", "Holiday 3"])
// -> "Holiday 1, Holiday 2, and Holiday 3"
推荐阅读
- c - 如何在给定数组中查找数字的位置(数组索引)?
- node.js - findOneAndUpdate() 不更新值
- javascript - 如何从 Angular 调用我的 javascript 库
- django - 在角度发布请求上收到 400 个错误请求我该如何解决这个问题
- mysql - Mysql当前时间戳
- ios - 如何将不同的数据从表视图传递到另一个视图控制器
- c# - Environment.NewLine 不会将字符串中断到下一行
- reactjs - 在更改时响应 FunctionComponent 回调
- spring-boot - 托管 Spring Boot 微服务 (REST API) - 我有哪些选择?
- c++ - 简单的 Hello World 耗时 1.5 秒