Question

我正在研究基本的JavaScript，并构建一个小型酒店应用程序进行练习。尝试一次单击一次遍历数组时遇到问题。意思是...。我想在mouseclick上进行迭代，并遍历数组中的一个索引。基本上可以通过单击鼠标一次显示一个酒店的信息。我写了一些实际可行的代码，但我认为必须有更好的方法来做到这一点。我想知道什么是更有效的方法。

我的HTML

<body>

  <div class="background">
    <div class="cover">
      <div class="space"></div>
      <div id="button">
        <h1>Check Availablility</h1>
      </div>
      <div class="name-div">
        <h1 id="name"></h1>
      </div>
      <div class="rooms-div">
        <h1 id="rooms"></h1>
        <h3>rooms left</h3>
      </div>
    </div>
  </div>

  <script src="script.js"></script>
</body>

我的JavaScript

function Hotel(name, rooms, booked) {
  this.name = name;
  this.rooms = rooms;
  this.booked = booked;

  this.checkAvailability = function () {
    return this.rooms - this.booked;
  }

};

var quay = new Hotel('Quay', 40, 25);
var park = new Hotel('Park', 100, 33);
var dream = new Hotel('Dream', 77, 40);
var cod = new Hotel('Cod', 49, 21);
var hotels = [quay, park, dream, cod];

const button = document.getElementById('button');
const name = document.getElementById('name');
const rooms = document.getElementById('rooms');

var i = 0;
button.addEventListener('click', function () {
    if (i < hotels.length) {
      name.textContent = hotels[i].name;
      rooms.textContent = hotels[i].checkAvailability();
      i++;
      if (i == hotels.length) {
        i = 0;
      }
    }
});

任何见识都会很棒。谢谢！

Answer 1

我可能经常使用您的方法，但是很高兴知道自ECMAScript 2015起，我们可以在这种情况下使用generator functions。一个基本的例子可能是：

function* idMaker() {
  var index = 0;
  while (index < index+1)
    yield index++;
}

var gen = idMaker();

console.log(gen.next().value); // 0
console.log(gen.next().value); // 1
console.log(gen.next().value); // 2
console.log(gen.next().value); // 3

在您的实现中可能类似于：

function* doSomethingOnClick(length){
        var index = 0;
        while(index < length){
         name.textContent = hotels[index].name;
         rooms.textContent = hotels[index].checkAvailability();
          yield index++;
          if(index==length){
            index = 0;  
          }
        }

      }

var gen = doSomethingOnClick(hotels.length);

      button.addEventListener('click', function () {
        gen.next();
    })

还有一个完整的示例，https://jsfiddle.net/uh7n329s/9/

一次一遍遍遍数组

1 个答案: