javascript - this.x 不可迭代

Question

我正在尝试将变量传递给对象中的方法，但我不断收到一个错误，提示this.phrase is not iterable

我正在使用两个对象并将该变量从一个对象传递给另一个对象

短语类

console.clear()
class Phrase {
  constructor(phrase) {
  console.log("Phrase constructor")
    this.phrase = phrase;
  }

  addPhraseToDisplay() {
  console.log("Phrase addPhraseToDisplay")
    let arr = [...this.phrase];
    arr.forEach(letter => {
      let li = $(`<li>${letter}</li>`);
      if (letter !== ' ') {
        li.addClass(`hide letter ${letter}`);
        $('#phrase ul').append(li);
      } else {
        let li = $(`<li>${letter}</li>`);
        li.addClass('hide space');
        $('#phrase ul').append(li);
      }
      return letter;
    });
  }

}


class Game {

  constructor() {
  console.log("Game constructor")
    this.missed = 0;
    //directly put the phrases in the constructor
    this.phrases = [new Phrase("hello world"),
      new Phrase("Wolf on wall street"),
      new Phrase("Despite making"),
      new Phrase("Karen took the kids"),
      new Phrase("alright about to head out")
    ];
    this.activePhrase = null;
  }

  getRandomPhrase() {
  console.log("Game getRandomPhrase()")
    //returns 5 of the random phrases
    return this.phrases[Math.floor(Math.random() * this.phrases.length)];
  }


  startGame() {
  console.log("Game startGame")
    let hid = document.getElementById('overlay');
    hid.style.display = "none";
    let phrs = this.getRandomPhrase();
    let stor = new Phrase(phrs);
    stor.addPhraseToDisplay();
  }


}

g = new Game()
g.startGame()

<div id="overlay"></div>

我错过了什么？

标签： javascriptdebuggingiterator

Answer 1

这是您可以解决的另一种方法。由于这些行，您收到了错误：

let phrs = this.getRandomPhrase(); // phrs is an instance of Phrase
let stor = new Phrase(phrs); // stor is new Phrase(new Phrase(...))
stor.addPhraseToDisplay();

您的代码拥有它的方式phrs已经是Phrase. 因此，您声明stor为new Phrase(new Phrase(/* some string */)). 该错误是stor.addPhraseToDisplay由于在构造函数的输入上使用扩展语法造成的Phrase。当输入是 a 时，这可以正常工作String，但是您在 的实例上使用扩展语法Phrase，这是不可迭代的；例如，[...new Phrase('abc')]。

只需从中删除Phrase构造函数调用this.phrases，而是将其实现为字符串数组；然后不再触发错误：

console.clear()
class Phrase {
  constructor(phrase) {
  console.log("Phrase constructor")
    this.phrase = phrase;
  }

  addPhraseToDisplay() {
  console.log("Phrase addPhraseToDisplay")
    let arr = [...this.phrase];
    arr.forEach(letter => {
      let li = $(`<li>${letter}</li>`);
      if (letter !== ' ') {
        li.addClass(`hide letter ${letter}`);
        $('#phrase ul').append(li);
      } else {
        let li = $(`<li>${letter}</li>`);
        li.addClass('hide space');
        $('#phrase ul').append(li);
      }
      return letter;
    });
  }

}


class Game {

  constructor() {
  console.log("Game constructor")
    this.missed = 0;
    //directly put the phrases in the constructor
    this.phrases = [
      "hello world",
      "Wolf on wall street",
      "Despite making",
      "Karen took the kids",
      "alright about to head out"
    ];
    this.activePhrase = null;
  }

  getRandomPhrase() {
  console.log("Game getRandomPhrase()")
    //returns 5 of the random phrases
    return this.phrases[Math.floor(Math.random() * this.phrases.length)];
  }


  startGame() {
  console.log("Game startGame")
    let hid = document.getElementById('overlay');
    hid.style.display = "none";
    let phrs = this.getRandomPhrase();
    let stor = new Phrase(phrs);
    stor.addPhraseToDisplay();
  }


}

g = new Game()
g.startGame()

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="phrase"><ul></ul></div>
<div id="overlay"></div>