首页 > 解决方案 > 在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";
        }
      }
    }
  }
}
```

标签: javascriptarraysdictionary

解决方案


更新
我在下面的解决方案中添加了一个日期选择器,因此您可以切换日期并查看该功能如何响应。

使用日期编号作为键和假期作为值来分解数据可能是一个更好的主意,这将特别有用,因为您可以检查当前日期编号的键值而不是循环每个 Object 键以查看哪个(如果有)包含当前日期。

另一个重要的注意事项是纯 JS 对象不尊重和保留插入顺序,因此最好使用对象数组,每月一个对象。使用对象数组不仅尊重插入顺序,而且使用零索引(意味着第一项的索引为 0),这也是 Date 方法的工作原理,如果当前月份是一月,则.getMonth()该方法返回如果当前月份是 12 月。这也使我们能够使用数组轻松定义多节假日。011

考虑到这一点,我们仍然可以使用 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"

推荐阅读