Question

我正在尝试将变量传递给对象中的方法，并且不断收到错误消息，指出 this.phrase不可迭代

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

词组

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>

我想念什么？

Answer 1

您的错误是您使用此短语从短语中创建了新短语

let stor = new Phrase(phrs);

摆脱掉，它就可以工作

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);
    phrs.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>

这应该做 `addPhraseToDisplay`应该是`Game`的方法，而不是`Phrase`的方法

console.clear() class Phrase { constructor(phrase) { this.phrase = phrase; } } class 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() { //returns 5 of the random phrases return this.phrases[Math.floor(Math.random() * this.phrases.length)]; } startGame() { let hid = document.getElementById('overlay'); hid.style.display = "none"; let phrs = this.getRandomPhrase(); this.addPhraseToDisplay(phrs); } addPhraseToDisplay(phrs) { let arr = [...phrs.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; }); } } 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>

Answer 2

这是您可以解决的另一种方法。您由于以下几行而收到错误消息：

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时，这很好用，但是您正在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()

this.x是不可迭代的

2 个答案: