使用 JS 循环播放一系列歌曲。如果歌曲在数组中，则提示“是”。如果不是，请提示“否”答案

【问题标题】：Loop through an array of songs using JS. If song is in the array, alert "Yes". If it's not, alert "No"使用 JS 循环播放一系列歌曲。如果歌曲在数组中，则提示“是”。如果不是，请提示“否”
【发布时间】：2016-04-22 20:47:41
【问题描述】：

我正在尝试在新网站上显示我的乐队演奏的歌曲列表。用户输入歌曲名称（在名为“liveSearchBox”的输入标签中）并单击“findSong”按钮。如果我们播放这首歌，我想提醒“是的，我们播放它！”。如果我们不这样做，我想提醒“对不起，我们不玩它。”我已经尝试了几个小时来找出解决方案，但还不够先进。谢谢你的帮助！

这是我的 HTML 代码：

<div class="live-search-list">

    <input type="text" id="liveSearchBox" placeholder=" Search Songs or Artist">
    <button id="findSong"> Click to Find!</button>
    <ul id="songList">
        <li class="song"> Margaritaville</li>
        <li class="song"> Boys of Summer</li>
        <li class="song"> Somebody Like You</li>
    </ul>

</div>

这是我的 Javascript：

var songList = ["Margaritaville","Boys of Summer","Somebody Like You"];
var findButton = document.getElementById("findSong");
var songQuery = document.getElementById("liveSearchBox");
var songListItem = document.getElementsByClassName("song");

findButton.onclick = function(){
   for (var i = 0; i<songList.length; i++){
       if (songQuery.value === songList[i]){
           alert('Yes, we play "' +  songQuery.value + '"!');
       }  else {
             i++;
          }

  } 

};

【问题讨论】：

您对哪一部分有问题？为了提醒“否”，您需要一个布尔值，该值最初为假，并且只有在匹配时才设置为真，然后当您的循环完成时，如果布尔值仍然为假，您就知道没有匹配 - 此时您可以提醒“否”。
你跳过了很多。不要将i++ 放在您的else 子句中。您已经在 for 循环中增加了 i。另外，请听 Shomz。有一种更简单的方法。
此外，您需要在找到歌曲后添加一个break; 以提前退出for 循环。

标签： javascript

【解决方案1】：

使用indexOf：

if (songList.indexOf(songQuery.value) != -1)
    alert('yes');
else
    alert('no');

【讨论】：

有了这个解决方案，你只需要关心 IE
IE8 已经超过 7 年了...是时候让它过去了——其他人都这样做了。
indexOf 可以根据需要进行填充。

【解决方案2】：

使用indexOf 可以，但如果您想要一个适用于任何浏览器的解决方案，这是最快的方法：

function isInArray(array, item) {
    for (i = 0; i < array.length; i++)
        if (array[i] === item)
            return true;
    return false;
}

findButton.onclick = function() {
    if (isInArray(songList, songQuery.value))
        alert('Yes, we play "' + songQuery.value + '"!');
    else
        alert('Sorry, we don\'t play "' + songQuery.value + '".');
};

【讨论】：

为什么你认为 Javascript 循环比indexOf 更快？您认为indexOf 与您的循环有何不同？
哈哈，我想如果这个数组包含了世界上所有歌曲的名字，我们就能真正看到for循环和indexOf之间的区别。顺便提一句。使用全局变量很糟糕。
@4castle 该问题请参见this answer。
indexOf 在 5 年前很慢。它变得更好了。
@4castle，你不能指望初学者会这样 - 你需要在没有假设的情况下以正确的方式教他们。

【解决方案3】：

findButton.onclick = function(){
    var msg = !!~songList.indexOf(songQuery.value) ? 'Yes, we play "' +  songQuery.value + '"!' : 'No we do not play this song.';
    alert(msg);
}

也许这对你来说更容易理解：

findButton.onclick = function(){
    var msg = songList.includes(songQuery.value) ? 'Yes, we play "' +  songQuery.value + '"!' : 'No we do not play this song.';
    alert(msg);
}

或者这个：

findButton.onclick = function(){
    if(songList.includes(songQuery.value)) {
        alert('Yes, we play "' +  songQuery.value + '"!');
    } else {
        alert('No we do not play this song.');
    }
}

【讨论】：

因为 OP 固然不先进，所以不加解释地把这些运算符扔给他可能对他没有好处
Yura，这确实成功了，但 Eric 是对的——我不明白这一切是如何运作的！不过非常令人印象深刻，我会尝试找出语法。谢谢！！
.includes() 是一个相当新的功能。它在 IE 或 Edge 中不受支持。
在前两个示例中使用了三元运算符 ` ? : `。如果 expr1 == true，则执行 expr2，另一种情况下执行 expr3。
!! 双重否定只是将操作数转换为boolean。而~ 是一个位运算符，它翻转其操作数中的所有位

【解决方案4】：

var songList = ["Margaritaville", "Boys of Summer", "Somebody Like You"],
  findButton = document.getElementById("findSong"),
  songQuery = document.getElementById("liveSearchBox");

findButton.onclick = function() {
  if (typeof songQuery.value === 'undefined' || songQuery.value === null || songQuery.value === '') {
    alert('please input the song name.');
    return false;
  }
  if (songList.indexOf(songQuery.value) > -1) {
    alert('Yes, we play "' + songQuery.value + '"!');
  } else {
    alert('Sorry "' + songQuery.value + '" was not found!');
  }


};

<div class="live-search-list">

  <input type="text" id="liveSearchBox" placeholder=" Search Songs or Artist">
  <button id="findSong">Click to Find!</button>
  <ul id="songList">
    <li class="song">Margaritaville</li>
    <li class="song">Boys of Summer</li>
    <li class="song">Somebody Like You</li>
  </ul>

</div>

【讨论】：