Цикл по массиву (`Object.keys (obj)`) для поиска значения

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 с указанным ключом c и возвращает позицию в виде массива с номером столбца первым и номером строки вторым. напр. [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 и l oop через них, используя forEach() в функции getPiecePosition(), чтобы сравнить его с позицией, введенной в качестве параметра. Поскольку на любой плитке одновременно может находиться только один элемент, он никогда не должен возвращать несколько значений.

Я, честно говоря, не знаю, с чего начать отладку этого кода, но я пытался около часа. Он всегда просто возвращает undefined вместо любого правдивого значения.

Answer 1

Ваша последняя функция имеет несколько проблем:

1. getPiecePosition(allPieces[piece]) == position
   

   Предполагая, что position - это массив, вы пытаетесь сравнить массив с массивом здесь, используя == . Однако, поскольку два массива представляют собой разные ссылки в памяти, это всегда будет давать false, даже если они содержат одинаковые элементы:

   console.log([2, 3] == [2, 3]); // false

2. Вы пытаетесь набрать return из обратного вызова .forEach(). Это не достигнет того, чего вы хотите, поскольку return выскочит из функции обратного вызова .forEach, а не из вашей внешней функции getPieceByPosition(). Это приводит меня к вашей последней проблеме:

3. Метод .forEach() ничего не возвращает. То есть после вызова он не возвращает значение. Это означает, что let pce всегда будет undefined, поскольку вы пытаетесь установить для него возвращаемое значение .forEach(). Это, в отличие от let letterIndex, отличается, поскольку letterIndex устанавливается на возвращаемое значение .findIndex(), которое имеет возвращаемое значение и определяется функцией, которую вы его передаете.

Еще одна вещь, которую вы можете исправить, - это использование Object.keys(allPieces). Хотя это работает, это не лучший подход для перебора элементов. В идеале вы могли бы сделать от allPieces.forEach() до l oop для всех ваших элементов. Однако, поскольку allPieces - это HTMLCollection, вы не сможете этого сделать. Вместо этого вы можете использовать обычные для l oop или for..of l oop до l oop вместо значений в вашей HTMLCollection.

В качестве альтернативы существует способ заставить allPieces.forEach() работать. Вместо использования board.getElementsByClassName('piece'); вы можете использовать метод .querySelectorAll('.piece'), который даст вам NodeList . В отличие от HTMLCollection, NodeList позволяет вам использовать .forEach() на нем до l oop через его элементы.

Answer 2

Тип возвращаемого значения getElementsByClassName HTMLCollection Object. Вы не должны использовать от Object.keys до l oop в каждом элементе 'piece'. Insted, используйте следующее.

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