我有以下对象数组:

[
    {
        "id": "line-23746045",
        "line_top": 543,
        "line_bottom": 521
    },
    {
        "id": "line-23746033",
        "line_top": 132,
        "line_bottom": 110
    },
    {
        "id": "line-23746031",
        "line_top": 138,
        "line_bottom": 116
    },
    {
        "id": "line-23746029",
        "line_top": 143,
        "line_bottom": 121
    }
]

我只需要返回那些在line_top和line_bottom之间重叠的.在上面的数组中,"line-23746045"没有重叠,所以我想返回一个数组:

[
    {
        "id": "line-23746033",
        "line_top": 132,
        "line_bottom": 110
    },
    {
        "id": "line-23746031",
        "line_top": 138,
        "line_bottom": 116
    },
    {
        "id": "line-23746029",
        "line_top": 143,
        "line_bottom": 121
    }
]

推荐答案

A simple solution

您可以过滤数组并收集每个数组项目的下一个项目的交集,以避免判断与前一个项目的交集:

const arr = [
    {
        "id": "line-23746045",
        "line_top": 543,
        "line_bottom": 521
    },
    {
        "id": "line-23746033",
        "line_top": 132,
        "line_bottom": 110
    },
    {
        "id": "line-23746031",
        "line_top": 138,
        "line_bottom": 116
    },
    {
        "id": "line-23746029",
        "line_top": 143,
        "line_bottom": 121
    }
]

const intersected = new Set;
const intersect = (val, item) => val >= item.line_bottom && val <= item.line_top;
const result = arr.filter((item, idx, arr) => {
  let found = false;
  for(let i = idx + 1; i < arr.length; i++){
    const next = arr[i];
    if(intersect(item.line_bottom, next) || intersect(item.line_top, next)){
      intersected.add(next);
      found = true;
    }
  }
  return found || intersected.has(item);
});

console.log(result);

A more complex and performant solution

您可以对重叠的项目进行分组,并跟踪重叠项目的line_bottom和line_top,并与它们进行比较:

const arr = [
    {
        "id": "line-23746045",
        "line_top": 543,
        "line_bottom": 521
    },
    {
        "id": "line-23746033",
        "line_top": 132,
        "line_bottom": 110
    },
    {
        "id": "line-23746031",
        "line_top": 138,
        "line_bottom": 116
    },
    {
        "id": "line-23746045",
        "line_top": 580,
        "line_bottom": 530
    },
    {
        "id": "line-23746029",
        "line_top": 143,
        "line_bottom": 121
    }
]

const groups = [];
const intersected = new Map;
const intersect = (val, item) => val >= item.line_bottom && val <= item.line_top;

for(let j = 0; j < arr.length; j++){
  const item = arr[j];
  let found = false;
  const intersected = []; // collect intersected groups and merge them
  for(const group of groups){
    debugger;
    if(intersect(item.line_bottom, group) || intersect(item.line_top, group)){
      intersected.push(group);
    }
  }
  if(!intersected.length){
    groups.push({line_bottom: item.line_bottom, line_top: item.line_top, items: [item]});
  } else {
    // merge groups
    const first = intersected[0];
    let min = first.line_bottom, max = first.line_top;
    for(let i = 1; i < intersected.length; i++){
      const group = intersected[i];
      first.items.push(...group.items);
      if(min > group.line_bottom) min = group.line_bottom;
      if(max < group.line_top) max = group.line_top;
      groups.splice(groups.indexOf(group), 1);
    }
    if(min > item.line_bottom) min = item.line_bottom;
    if(max < item.line_top) max = item.line_top;
    first.line_bottom = min;
    first.line_top = max;
    first.items.push(item);
  }
}

console.log(groups);
.as-console-wrapper{ max-height: 100% !important}

Javascript相关问答推荐

Bootstrap动态选项卡在切换选项卡后保持活动状态,导致元素堆叠

调用removeEvents不起作用

切换时排序对象数组,切换不起作用

为什么按钮会随浮动属性一起移动?

查找最长的子序列-无法重置数组

使用GraphQL查询Uniswap的ETH价格

使用Google API无法进行Web抓取

material UI按钮组样式props 不反射

本地库中的chartjs-4.4.2和chartjs-plugin-注解

如何在.NET Core中将chtml文件链接到Java脚本文件?

如何将zoom 变换应用到我的d3力有向图?

如何在Bootstrap中减少网格系统中单个div的宽度

JavaScript不重定向配置的PATH

如何在DYGRAPS中更改鼠标事件和键盘输入

Vaadin定制组件-保持对javascrip变量的访问

Cherrio JS返回父div的所有图像SRC

无法使用npm install安装react-dom、react和next

如何使用Cypress在IFRAME中打字

在JS/TS中构造RSA公钥

调试jQuery代码以获取所有行的总和(票证类型)