Question

我想遍历列表artists，每次按下按钮时，我都希望在<p>标签中添加下一位歌手。

let para = document.querySelector('p');

const artists = ['Atif Aslam', 'Nusrat Fateh Ali Khan', 'Kendrick Lamar', 'Travis Scot', 'JCole', 'Sidhu', 'Ataullah EsaKheilvi'];
let info = 'One of my top favorite artist is '


function myArt() {
  for (i = 0; i < artists.length; i++) {
    para.textContent = info + artists[i];
  }
}

<body>

  <button id="myArtists" onclick="myArt()"> Click To Find Out!</button>
  <p> </p>
</body>

Answer 1

您不需要为要执行的操作而循环。相反，您想跟踪艺术家的索引并在每次调用myArt()时增加索引。

let para = document.querySelector('p');

const artists = ['Atif Aslam', 'Nusrat Fateh Ali Khan', 'Kendrick Lamar', 'Travis Scot', 'JCole', 'Sidhu', 'Ataullah EsaKheilvi'];

const info = 'One of my top favorite artist is ';

let artistIndex = 0;

function myArt() {
  if(artistIndex < artists.length) {
    para.innerText = info + artists[artistIndex];
    artistIndex++;
  }
}

<button id="myArtists" onclick="myArt()"> Click To Find Out!</button>
<p></p>

Answer 2

您的问题不是循环，这是您不想循环。您只需要一个变量作为指针即可遍历数组。

  let para = document.querySelector('p');

  const artists = ['Atif Aslam', 'Nusrat Fateh Ali Khan', 'Kendrick Lamar', 'Travis Scot', 'JCole', 'Sidhu', 'Ataullah EsaKheilvi'];
  let info = 'One of my top favorite artist is '

  //Array pointer
  let counter = 0;
  function myArt() {
    para.textContent = info + artists[counter++];
    if (counter == artists.length) {
      //Rest pointer
      counter = 0
    }
  }

Answer 3

如果只跟踪索引，则实际上并不需要遍历它。您可以使用全局变量或将其编码为如下属性：

const artists = ['Atif Aslam', 'Nusrat Fateh Ali Khan', 'Kendrick Lamar', 'Travis Scot', 'JCole', 'Sidhu', 'Ataullah EsaKheilvi'];
let info = 'One of my top favorite artist is '

const setup = () => {

  const myArtists = document.querySelector('#myArtists');
  myArtists.addEventListener('click', myArt);

};

const myArt = (event) => {
  const button = event.target;
  
  const previousIndex = button.hasAttribute('currentIndex') ? parseInt(button.getAttribute('currentIndex'),10) : -1;
  
  const currentIndex = previousIndex >= artists.length - 1 ? 0 : previousIndex + 1;
  
  button.setAttribute('currentIndex', currentIndex);
  
  let para = document.querySelector('p');
  para.textContent = info + artists[currentIndex];
}

window.addEventListener('load', setup);

<button id="myArtists"> Click To Find Out!</button>
<p> </p>

Answer 4

您不需要循环。只需为当前索引指针使用全局变量即可。

一种简单的实现方法，此外，单击按钮时还可以进行循环“循环”。
您可以使用模块index % artists.length来镜像索引：

const $p = document.querySelector('p');
const textPrefix = 'One of my top favorite artist is: ';
const artists = ['Atif Aslam', 'Nusrat Fateh Ali Khan', 'Kendrick Lamar', 'Travis Scot', 'JCole', 'Sidhu', 'Ataullah EsaKheilvi'];
let currentArtistIndex = 0;

function nextArtist() {
  $p.innerText = `${textPrefix}${artists[currentArtistIndex++ % artists.length]}`; 
}

<body>
  <button id="myArtists" onclick="nextArtist()"> Click To Find Out The Next Artist!</button>
  <p> </p>
</body>

单击按钮如何遍历数组？

4 个答案: