Question

我正在学习Javascript，所以请原谅我在表达问题时的任何错误。

我正在写一个国际象棋程序来练习和学习。目前，我正在尝试编写一个函数，以位置作为参数查找一块的颜色。相关代码段如下。前两个按设计工作，但最后一个没有。

let allPieces = board.getElementsByClassName('piece');

这会将allPieces设置为一个对象，其键值是代表黑色和白色的每一段的html符号。

const getPiecePosition = function(element) {
  let position = window.getComputedStyle(element).getPropertyValue('grid-row-start');
  let letterIndex = alphabet.findIndex(function(letter) {
    return letter === position[0];
  });
  letterIndex += 1;
  return [letterIndex, Number(position[1])];
}

这采用带有特定键的allPieces对象形式的参数，并以数组的形式返回位置，数组的列号为第一，行号为第二。例如[2,3]。

const getPieceByPosition = function(position) {
  let pce = Object.keys(allPieces).forEach(function(piece) {
    if (getPiecePosition(allPieces[piece]) == position) {
      return allPieces[piece].borderColor;
    }
  })
  return pce;
}

这是我遇到的功能。其背后的想法是，它将获取allPieces对象中的每个键，并使用forEach()将它们遍历到getPiecePosition()函数中，以将其与作为参数输入的位置进行比较。由于只有一块可以同时占据任何一个图块，因此它永远不应返回多个值。

老实说，我不知道从哪里开始调试此代码，但是我已经尝试了大约一个小时。它总是只返回undefined而不是任何真实值。

Answer 1

您的上一个功能有几个问题：

```
getPiecePosition(allPieces[piece]) == position
```
假设position是一个数组，您正在尝试使用==将一个数组与一个数组进行比较。但是，由于两个数组在内存中的引用不同，因此即使它们包含相同的元素，也始终会给出false：
```
console.log([2, 3] == [2, 3]); // false
```
您正在尝试从return的回调中.forEach()。这将无法实现您想要的功能，因为return会跳出.forEach回调函数，而不是外部getPieceByPosition()回调函数。这使我想到了您的最后一个问题：
.forEach()方法不返回任何内容。也就是说，一旦调用它就不会求值。这意味着let pce将始终为undefined，因为您试图将其设置为返回值.forEach()。与let letterIndex相比，这是不同的，因为letterIndex设置为.findIndex()的返回值，确实具有返回值并由您传递的功能。

您可以解决的另一件事是使用Object.keys(allPieces)。尽管这可行，但这并不是遍历元素的最佳方法。理想情况下，您将可以执行allPieces.forEach()来遍历所有元素。但是，由于allPieces是HTMLCollection，因此您将无法做到这一点。相反，您可以使用常规的for循环或for..of循环遍历HTMLCollection中的值。

或者，有一种方法可以使allPieces.forEach()工作。您可以使用方法board.getElementsByClassName('piece');来代替.querySelectorAll('.piece')，该方法将为您提供NodeList。与HTMLCollection不同，NodeList允许您在其上使用.forEach()来遍历其元素。

Answer 2

getElementsByClassName HTMLCollection对象的返回类型。您不应该使用Object.keys来遍历每个“ piece”元素。插入，请按照以下步骤进行。

for(var i = 0 ; i < allPieces.length ; i++){
    var piece = allPieces[i];
    ... // and, do whatever with the getPiecePosition(piece)
}

遍历数组（`Object.keys（obj）`）以查找值

2 个答案: