在向数组添加值时,我将经历无限循环

时间:2017-05-25 12:17:55

标签: javascript arrays

我默认创建了一个包含一些电影名称的数组。我有一个要求用户输入的表单,如果用户输入与我的默认数组匹配,它应该弹出该电影已经存在,如果用户输入不同于我应该存储在不同数组中的默认数组。我已经完成了第一部分,但是我遇到了向数组

添加值的问题



function insert() {
  var movie = document.getElementById("movie").value;
  var movie2 = [];

  for (var i = 0; i <= movie2.length; i++) {

    if (movie !== movie2[i]) {
      movie2.push(movie);
      var name2 = "Movie added into Array2";
      alert(name2);
    } else {
      var name2 = "Movie already added to Array2";
      alert(name2);
    }
  }
}

function validation() {
  var movie = document.getElementById("movie").value;
  var movie1 = ["Bahubali", "The Final Destination", "The Cars", "P.K", "Bajarangi Baijaan", "Force"];

  if (movie == "") {
    var name2 = "Please enter your favoite movie name";
    alert(name2);
  }
  for (var i = 0; i < movie1.length; i++) {

    if (movie == movie1[i]) {
      var name2 = "Movie exists in our database";
      alert(name2);

    } else {
      insert();

    }
  }
}
&#13;
<html>

<head>
  <title>Movie Mania</title>
  <link rel="stylesheet" type="text/css" href="Movie.css">
  <script src="Movie.js"></script>
</head>

<body>

  <div class="content">

    <div class="matter">

      <p class="header">Movie Mania</p>
      <div class="regis">

        <form class="reg">

          <input type="text" name="user" id="movie" placeholder="Please enter 
            any movie name" size="40">
          <hr>
          <div><input type="submit" class="button" value="Search" id="sub" onclick="validation()" /></div>
      </div>
    </div>
  </div>

  </form>
</body>

</html>
&#13;
&#13;
&#13;

3 个答案:

答案 0 :(得分:0)

这是针对循环问题。

  

for循环问题的解释

     

请参阅24.664232570759083 46.692474695432026 2678400 匹配每个参数的条件   阵列。在真正的陈述后你没有打破。所以除此之外   语句也运行( console.log ),直到循环完成

insert

解决方案:您应该使用break声明

请参阅console.log,循环在中断后停止执行

var one = "hi"
var arr = ['hello', 'hi', 'how']

for (var i = 0; i < arr.length; i++) {
  console.log(arr[i] == one)
  if (arr[i] == one) {
    break;
  }
}

更好地使用Array#includes代替循环迭代

已更新:

使用var one="hi" var arr = ['hello','hi','how'] for(var i=0; i< arr.length; i++){ console.log(arr[i] == one) }删除movie2 .push(movie),并将movie1数组声明为全局

movie1
var movie1 = ["Bahubali", "The Final Destination", "The Cars ","P.K ","   Bajarangi Baijaan ","Force "];

function insert() {
  var movie = document.getElementById("movie").value;
    if (!movie1.includes(movie)) { //  ! refer for false statement 
      movie1.push(movie);
      var name2 = "Movie added into Array2";
      console.log(name2);
    } else {
      var name2 = "Movie already added to Array2";
      cosole.log(name2);
    }
    console.log(movie1)
  }

function validation() {
  var movie = document.getElementById("movie").value;
    if (!movie.trim()) { //its validate the input empty undefined null
      var name2 = "Please enter your favoite movie name";
      console.log(name2);
    }
    else if (movie1.includes(movie)) { // includes used for  find the value is in array or not
        var name2 = "Movie exists in our database";
        console.log(name2);
      } else {
        insert();
      }
      return false;
  }

答案 1 :(得分:0)

无限循环的原因是:

var movie2 = [];
for (var i = 0; i <= movie2.length; i++) {
    if (movie !== movie2[i]) {
      movie2.push(movie);
      var name2 = "Movie added into Array2";
      alert(name2);
    } else {
      var name2 = "Movie already added to Array2";
      alert(name2);
    }
  }

你从i = 0开始,因为数组是空的,所以这将是真的i <= movie2.length,因为数组为空movie2[i] == undefined所以你将电影推送到数组,下一次迭代{{1 } i1也是movie2.length1movie2[1]所以你再次推动电影,这将不断重复。

解决此问题的一种方法是检查电影是否存在,然后按下它:

此代码仍有一些与问题无关的其他问题

undefined
function insert() {
  var movie = document.getElementById("movie").value;
  var movie2 = [];
  var found = false;
  
  for (var i = 0; i < movie2.length; i++) {
    if (movie !== movie2[i]) {
      found = true
      break;
    }
  }
  
  if (!found) {
    movie2.push(movie);
    var name2 = "Movie added into Array2";
    alert(name2);
  } else {
    var name2 = "Movie already added to Array2";
    alert(name2);
  }
}

function validation() {
  var movie = document.getElementById("movie").value;
  var movie1 = ["Bahubali", "The Final Destination", "The Cars", "P.K", "Bajarangi Baijaan", "Force"];

  if (movie == "") {
    var name2 = "Please enter your favoite movie name";
    alert(name2);
  }

  for (var i = 0; i < movie1.length; i++) {
    if (movie == movie1[i]) {
      var name2 = "Movie exists in our database";
      alert(name2);
    } else {
      insert();
    }
  }
}

稍微改进的版本

<html>

<head>
  <title>Movie Mania</title>
  <link rel="stylesheet" type="text/css" href="Movie.css">
  <script src="Movie.js"></script>
</head>

<body>

  <div class="content">

    <div class="matter">

      <p class="header">Movie Mania</p>
      <div class="regis">

        <form class="reg">

          <input type="text" name="user" id="movie" placeholder="Please enter 
            any movie name" size="40">
          <hr>
          <div><input type="submit" class="button" value="Search" id="sub" onclick="validation()" /></div>
      </div>
    </div>
  </div>

  </form>
</body>

</html>
var movie1 = ["Bahubali", "The Final Destination", "The Cars", "P.K", "Bajarangi Baijaan", "Force"];
var movie2 = [];


function insert() {
  var movie = document.getElementById("movie").value;
  var found = false;
  for (var i = 0; i < movie2.length; i++) {
    if (movie !== movie2[i]) {
      found = true
      break;
    }
  }
  if (!found) {
    movie2.push(movie);
    var name2 = "Movie added into Array2";
    alert(name2);
  } else {
    var name2 = "Movie already added to Array2";
    alert(name2);
  }
}

function validation() {
  var movie = document.getElementById("movie").value;

  if (movie == "") {
    var name2 = "Please enter your favoite movie name";
    alert(name2);
  }
  
  var found = false;
  
  for (var i = 0; i < movie1.length; i++) {
    if (movie == movie1[i]) {
      found = true
      break;
    }
  }
  
  if (found) {
    var name2 = "Movie exists in our database";
    alert(name2);
  } else {
    insert();
  }
}

答案 2 :(得分:-1)

您面临的问题是您的循环逻辑。您正在访问数组的每个元素并检查该元素是否等于新值。如果不是,则插入值。

说出你的数组:

 ["A", "B"]

您希望插入“C”。

首先,您的代码是将“A”与“C”进行比较,因为它们不相等,所以您插入“C”,因此数组变为

["A", "B", "C"]

然后你的for循环继续比较“B”和“C”,因为它们不相等你再次插入“C”。

更糟糕的是,插入方法也通过再次循环遍历数组并实际为数组中已存在的每部电影插入新值来执行类似的任务。

所以要解决你的逻辑问题:

  1. 检查数组中是否存在电影
  2. 如果没有插入
  3. 如果确实提供了消息。
  4. 要检查数组中是否已存在电影,您可以使用includes数组方法。像这样:

       if (movie1.includes(movie)){
          //movie is already in array
       }else{
          //movie is not yet in array
       }