javascript - 在javascript中根据条件创建数组

Question

这一直在吞噬我。 Check CodePen here 。我有一个向标尺添加元素的函数。使用整数调用 Exposure.init(lengthOfPeriod) 以设置标尺中每个周期的长度。使用一个整数和一个字符串 == 'HOME' || 调用 Exposure.addAction(time, team) “AWAY”在标尺中放置一个 Action 。

当屏幕大小调整时，我希望标尺中相互接触的元素发生一些变化(基本上折叠成一个组)。

我有一个函数“detectOverlap”，它接受 2 个参数并确定它们是否接触。我还在调整大小事件处理程序中提供了一个函数，该函数使用标尺中每次调整大小时相互接触的所有元素填充数组“allTouching”。

if (actionArray.length > 1) { //don't run if there's only one element in the page
actionArray.reduce(function (prev, next) {
    if (detectOverlap(prev, next)) {
        if (allTouching.indexOf(prev, next) === -1) allTouching.push(prev, next);
    }
    return next;
});

如果 Action 相互接触，我需要将它们折叠成组。为了做到这一点，我需要为每组相互接触的 Action 创建一个数组。然而，到目前为止我还没能做到这一点。 这是一些伪代码:

for (i = 0; i < allTouching.length; i++) {
  if (detectOverlap(allTouching[0], alltouching) { 
    touchingGroup[i] = new Array(allTouching[0], all other elements touched by 0);
    do not include any element more than once in touchingGroup[i];
    do not include any similar arrays (same elements) in allGroups;
    allGroups.push(touchingGroup[i]); 
  }
}

简而言之，这需要循环 allTouching 数组中的所有元素，并为每个相互接触的新 Action 组创建一个新的 movingGroup[n]。

这在我看来很简单，而且我确信一定有一种方法可以在代码不变得过于复杂的情况下做到这一点，但我还没有找到它。 对于任何反馈，我们都表示感谢。

Answer 1

看来您的问题只是关于分组，因此我将忽略可视化方面并假设函数 detectOverlap 是正确的。

然后您可以在一个 for 循环中创建组。在此代码片段中，我添加了简单的示例数据和一个模拟 detectOverlap 函数，当两个参数相同时，该函数将返回 true(仅用于代码片段的目的):

// Simplistic mock data and function, just to make the snippet work
var actionArray = [1, 1, 3, 3, 3, 8, 9];
function detectOverlap(a, b) { return a === b; }

// Actual code:
var allGroups = [];
var start = 0;
for (var i = 1; i <= actionArray.length; i++) {
    if (i >= actionArray.length || !detectOverlap(actionArray[i-1], actionArray[i])) {
        if (i - start > 1) // Remove this condition if you want singletons as well
            allGroups.push(actionArray.slice(start, i));
        start = i;
    }
}
console.log(JSON.stringify(allGroups));

说明

变量start用作数组中的索引，从最近找到的组开始的位置开始。该组尚未实际创建，因为我们不知道它在哪里结束，因此我将其称为“未定”组。 start 初始化为 0，表示第一组将从此处开始。

循环迭代数组，但从 1 开始。在每次迭代中，它决定“未决定”组(从 start 开始)是否完成。当数组的前一个元素和当前元素之间没有重叠时，该组被认为是完整的。在这种情况下，前一个元素是“未决定”组的最后一个元素。该组的元素是使用 slice 从数组中复制的。请注意，slice 的第二个参数是第一个元素的索引，该元素不应该属于该组。现在该组已存储，并且 start 被放置在当前索引处，下一个(也是唯一的)“未决定”组应该从这里开始。

但只要两个元素确实重叠，就不应创建新组(这就是条件具有!的原因)。相反，start 保持不变，因此这个“未定”、“未封闭”的群体规模正在变得越来越大。

在该切片之前有一个if，它可以防止创建仅包含一个元素的组。如果删除该 if，那么单个元素也将被隔离在它们自己的“单例”组中。

循环将向上包括 arrayAction.length:这是不寻常的，因为这使得最后一个i成为无效索引。但这是有用的，因为在这种情况下我们仍然想完成仍然“正在进行”的最后一组。因此，在这种情况下，i >= arrayAction.length 将为 true，因此 detectOverlap 函数将不会被调用(因为 if 条件为已经知道是真的)。将输入 if block 并创建最终组。