This.x не является итерируемым

Я пытаюсь передать переменную методу в объекте, но постоянно получаю сообщение об ошибке this.phrase не повторяется

Я использую два объекта и передаю эту переменную из одного объекта в другой.

Класс фразы

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

  addPhraseToDisplay() {
  console.info("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.info("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.info("Game getRandomPhrase()")
    //returns 5 of the random phrases
    return this.phrases[Math.floor(Math.random() * this.phrases.length)];
  }


  startGame() {
  console.info("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>

Что мне не хватает?

Как вы называете классы?

— 07.03.2019 11:26

Предположительно, это потому, что phrs в startGame — это объект, который вы затем пытаетесь распространить с помощью [...this.phrase]…

— 07.03.2019 11:33

javascript debugging iterator

07.03.2019 11:25

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

125

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Ваша ошибка заключалась в том, что вы создали новую фразу из фразы с этим

let stor = new Phrase(phrs);

избавься от этого и все заработает

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

  addPhraseToDisplay() {
  console.info("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.info("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.info("Game getRandomPhrase()")
    //returns 5 of the random phrases
    return this.phrases[Math.floor(Math.random() * this.phrases.length)];
  }


  startGame() {
  console.info("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>

07.03.2019 11:36

Вот еще один способ решить эту проблему. Вы получали ошибку из-за этих строк:

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 и вместо этого реализуйте его как массив строк; то ошибка больше не возникает:

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

  addPhraseToDisplay() {
  console.info("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.info("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.info("Game getRandomPhrase()")
    //returns 5 of the random phrases
    return this.phrases[Math.floor(Math.random() * this.phrases.length)];
  }


  startGame() {
  console.info("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>

07.03.2019 11:53

Другие вопросы по теме

Как вернуть строку всех целых чисел связанного списка в обратном порядке?

Источник не найден Eclipse IDE

Обратный порядок символов строки и поместить в LinkedList с помощью конструктора

Советы по устранению «DevTools был отключен от страницы» и умирает Electron Helper

Почему симулятор Xcode запускает приложение с вызовом didEnterRegion, а iPhone — нет?

Могут ли действия точки останова печатать возвращаемое значение?

Можно ли использовать один и тот же объект BasicDataSource, Connection, Statement и ResultSet в нескольких методах класса?

Python: программа расчета налогов

Отладка .net Core В IModelBinder Visual Studio пропускает строки

Как отладчикам удается сломаться при любом броске?

This.x не является итерируемым

Ответы 2

Другие вопросы по теме

Похожие вопросы