主页 / 问题 / 661830
Accepted
while1pass
Asked:2020-05-04 18:06:17 +0000 UTC2020-05-04 18:06:17 +0000 UTC

查找二维数组中元素的邻居

  • 772

如何在二维数组中找到一个元素的邻居（8个邻居-垂直，水平，对角线），前提是邻居也可以通过数组边界搜索？

我有一个像这样的二维数组

在此处输入图像描述

在数组中查找元素的邻居很简单。我们将当前元素的坐标与单位以及它们之间结合起来data[x +/- 1][y +/- 1]得到这张图片

在此处输入图像描述

对于数组边界上的元素，其邻居如下在此处输入图像描述

对于角落里的元素

在此处输入图像描述

总的来说，当元素位于数组内时，我们有 1 个一般情况和 8 个私有元素（4 个在边界上，4 个在角落上）

当然，你可以使用case-operator，迭代这些找邻居的case，正面解决这个问题，但是有没有更优雅的解决方法呢？

javascript

2 个回答

  1. Best Answer

    这样怎么样，where ingetElementsArr(i, j) i和j是中心对象的位置：

    var arr = [
  ["0:0","0:1","0:2","0:3"],
  ["1:0","1:1","1:2","1:3"],
  ["2:0","2:1","2:2","2:3"],
  ["3:0","3:1","3:2","3:3"]
];

function getElementsArr(i, j) {
  var yIndexes = getIndexes(arr, i);
  var xIndexes = getIndexes(arr[i], j);
  var thisArr = {
    topLeft: arr[yIndexes.prev][xIndexes.prev],
    top: arr[yIndexes.prev][xIndexes.curr],
    topRight: arr[yIndexes.prev][xIndexes.next],
    centerLeft: arr[yIndexes.curr][xIndexes.prev],
    center: arr[yIndexes.curr][xIndexes.curr],
    centerRight: arr[yIndexes.curr][xIndexes.next],
    bottomLeft: arr[yIndexes.next][xIndexes.prev],
    bottom: arr[yIndexes.next][xIndexes.curr],
    bottomRight: arr[yIndexes.next][xIndexes.next],
  }
  
  return thisArr;
}

function getIndexes(arr, i) {
  let prev = i - 1;
  let next = i + 1;
  if (i == 0) {
    prev = arr.length - 1;
  } else if (i == arr.length - 1) {
    next = 0;
  }
  
  return {
    prev: prev,
    curr: i,
    next: next };
}

console.log(getElementsArr(0,0));

    附言。也许只是给函数和变量起更响亮的名字……

    • 2

  2. 只有两种边缘情况：

    1. 当值大于最大索引时
    2. 当值小于0时

    为了处理它们，您可以使用一个简单的公式：

    var index = (currIndex+count)%count;

    例子：

    var size = 5;

function* getRelative(rowIndex, colIndex) {
  for (var i = -1; i <= 1; i++) {
    for (var j = -1; j <= 1; j++) {
      if (i == 0 && j == 0) continue;
      yield {
        rowIndex: (rowIndex + i + size) % size,
        colIndex: (colIndex + j + size) % size
      }
    }
  }
}

$('td').click(function() {
  $('.relative,.active').removeClass('relative active');
  var $this = $(this).addClass('active');
  var colIndex = $this.index();
  var rowIndex = $this.parent().index();
  [...getRelative(rowIndex, colIndex)].forEach(coord => {
    $(`tr:nth-child(${coord.rowIndex+1}) td:nth-child(${coord.colIndex+1})`).addClass('relative');
  });
});
    table {
  border-collapse: collapse;
}

td {
  border: 1px solid black;
  width: 50px;
  height: 50px;
  text-align: center;
}

.active {
  background-color: #add;
}

.active::after {
  content: '2';
}

.relative {
  background-color: rgba(75, 255, 0, 0.59)
}

.relative::after {
  content: '1';
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

    并进一步

    function* getRelative(rowIndex, colIndex, rowCount, colCount) {
  for (var i = -1; i <= 1; i++) {
    for (var j = -1; j <= 1; j++) {
      if (i == 0 && j == 0) continue;
      yield {
        rowIndex: (rowIndex + i + rowCount) % rowCount,
        colIndex: (colIndex + j + colCount) % colCount
      }
    }
  }
}

function clearCells() {
  var cells = document.querySelectorAll('.active, .relative');
  for (var i = 0, len = cells.length; i < len; i++) {
    cells[i].classList.remove('active', 'relative')
  }
}

function createTable(rowCount, colCount) {
  return Array.from({
    length: rowCount
  }, () => Array.from({
    length: colCount
  })).reduce((table, cells, rowIndex) => {
    table.appendChild(cells.reduce((row, _, colIndex) => {
      var cell = document.createElement('td');
      cell.addEventListener('click', function() {
        clearCells();
        this.classList.add('active');
        [...getRelative(rowIndex, colIndex, rowCount, colCount)].forEach(coord => {
          document.querySelector(`tr:nth-child(${coord.rowIndex+1}) td:nth-child(${coord.colIndex+1})`).classList.add('relative');
        });
      })
      row.appendChild(cell);
      return row;
    }, document.createElement('tr')))
    return table;
  }, document.createElement('table'))
}

document.body.appendChild(createTable(5, 10));
    table {
  border-collapse: collapse;
}

td {
  border: 1px solid black;
  width: 20px;
  height: 20px;
  text-align: center;
}

.active {
  background-color: #add;
}

.active::after {
  content: '2';
}

.relative {
  background-color: rgba(75, 255, 0, 0.59)
}

.relative::after {
  content: '1';
}

    • 2

相关问题