javascript - 有没有办法指定过滤或排序数组的年份范围？

Question

我有两个数组，一个数组是里程碑年，用于在网页上显示其内容，还用于遍历由里程碑组成的辅助数组，每个里程碑都有一个日期，里程碑年用于选择里程碑来自 1980-1990 年的年份范围。

目前我无法显示 milestoneyears 范围内的里程碑，只能显示年份与 milestoneyears 值匹配的里程碑。

我已尝试修改我的条件以仅显示特定范围内的里程碑。

<div id="output"></div>

var milestoneyears = ['1980', '1990','1999','2000', '2001']

var jsonData = {
    "milestones" : [
        {
            "milestoneDate": "1980",
            "title": "First title for 1980 event"
        },
        {
            "milestoneDate": "1980",
            "title": "Second title for 1980 event"
        },
        {
            "milestoneDate": "1982",
            "title": "First title for 1982 event"
        },
        {
            "milestoneDate": "1990",
            "title": "First title for 1990 event"
        },
        {
            "milestoneDate": "1999",
            "title": "First title for 1999 event"
        },
        {
            "milestoneDate": "1999",
            "title": "Second title for 1999 event"
        },
        {
            "milestoneDate": "1999",
            "title": "Third title for 1999 event"
        },
        {
            "milestoneDate": "2000",
            "title": "First title for 2000 event"
        },
        {
            "milestoneDate": "2001",
            "title": "First title for 2000 event"
        }
      ]
 }


var menu = $("#output");

// FIND DIFFERENCE IN ARRAYS
function arrDiff(arr1, arr2) {
    var arrays = [arr1, arr2].sort((a, b) => a.length - b.length);
    var smallSet = new Set(arrays[0]);
    return arrays[1].filter(x => !smallSet.has(x));
}

var foundArr = [];
for(var i = 0; i < milestoneyears.length; i++) {
    var catz = milestoneyears[i];
    for(var x = 0; x < jsonData.milestones.length; x++) {
        if(catz == jsonData.milestones[x].milestoneDate) {
            foundArr.push(catz)
        }
    }
}

var filteredArr = foundArr.filter(function(item, index) {
  if (foundArr.indexOf(item) == index)
    return item;
});

var noMilestones = arrDiff(filteredArr, milestoneyears);

$.each(milestoneyears, function(catIndex, category) {

  // DOM ELEMENTS
  var $item = $('<div>').addClass('navContainer');
  var $title = $('<div>').addClass('title').appendTo($item);
  var $links = $('<ul>').appendTo(
    $('<div>').addClass('links').appendTo($item)
  );

  // MILESTONE YEAR
  $title.text(category);

  $.each(jsonData.milestones, function(linkIndex, link) {
        console.log("milestone: " + link.milestoneDate + link.title)
    var $link = $('<a>');

    if (link.milestoneDate.indexOf(category) != -1) {
        console.log("years: " + link.milestoneDate)

        $link.attr('href', link.Link)
          .text(link.milestoneDate + "--" + link.title)
          .appendTo($('<li>').appendTo($links));

    }

   if(noMilestones.indexOf(category) != -1) {
        $link.attr('href', "#")
          .text("No milestones currently for this category")
          .appendTo($('<li>').appendTo($links));
            return false;
   }

  }) 

  // DISPLAY TO CONTAINER
  $item.appendTo(menu);
}) 

期望在 1980 年的 milestoneyear 下显示里程碑 1980、1980 和 1980。目前它只显示年份与 milestoneyears 数组值完全匹配的里程碑。

 1980
  * 1980
  * 1980
  * 1982
 1990
  * 1990
  * 1999
  * 1999
  * 1999
 2000
  * 2001

Answer 1

在$.each的开头回调我会转换category编号并捕获它后面的一个，如果有的话:

category = +category;
nextCategory = +(milestoneyears[cateIndex + 1] || "9999");

然后代替

if (link.milestoneDate.indexOf(category) != -1) {

我会转换 link.milestoneDate编号并进行范围检查:

var thisDate = +link.milestoneDate;
if (thisDate >= category && thisDate < nextCategory) {

检查它是否在 category <= thisDate < nextCategory 范围内.

警告:在 9999 年之后，上述精确解将失效。如有需要，请适当调整。

---

(你不需要严格转换为数字，因为你所有的日期都是四位数字，所以比较字符串仍然会正确比较它们。对我来说，使用数字感觉更正确，但是......)