Jquery each - 停止循环并返回对象

Question

请问为什么这个循环在输入 5 后没有停止？

http://jsbin.com/ucuqot/edit#preview

---

$(document).ready(function()
{
  someArray = new Array();
  someArray[0] = 't5';
  someArray[1] = 'z12';
  someArray[2] = 'b88';
  someArray[3] = 's55';
  someArray[4] = 'e51';
  someArray[5] = 'o322';
  someArray[6] = 'i22';
  someArray[7] = 'k954';  

  var test =  findXX('o322');   

});

function findXX(word)
{  
  $.each(someArray, function(i)
  {
    $('body').append('-> '+i+'<br />');
    if(someArray[i] == 'someArray')
    {
      return someArray[i]; //<--- did not stop the loop!
    }   
  });  
}

- user970727

---

你确定这是真的吗？如果（someArray[i] == 'someArray'） - zaoudis

我认为这个条件（someArray[i] == 'someArray'）应该改为（someArray[i] == word）。 - Irfan

@user970727 看一下我的答案。它在每个命令中使用了集成函数(i,n)。 - Royi Namir

Answer 1

因为当你在 each 循环中使用 return 语句时，一个 "非假" 值将作为 continue，而 false 将作为 break。你需要从 each 函数返回 false。类似这样：

function findXX(word) {
    var toReturn; 
    $.each(someArray, function(i) {
        $('body').append('-> '+i+'<br />');
        if(someArray[i] == word) {
            toReturn = someArray[i];
            return false;
        }   
    }); 
    return toReturn; 
}

根据文档：

当回调函数返回false时，我们可以在特定迭代中断$.each()循环。返回非false相当于for循环中的continue语句；它将立即跳转到下一次迭代。

- James Allardice

---

为什么不使用集成的 function(i,n)？ - Royi Namir

因为我只是使用了问题中 OP 发布的代码并更改了 return。 - James Allardice

@user970727 - 在这个例子中，你根本没有在each循环中使用return语句... 下面是更新后的示例: http://jsbin.com/ucuqot/5/edit - James Allardice

@JamesAllardice 对我没用，当执行到 "return=false;" 时，它确实退出了循环，但后来传播到语句 "return toReturn;"，在我的情况下我返回的是 "true"。因此，即使执行了 "return = false"，仍然会返回 true。 - pavan kumar

为什么会这样呢？你可能会认为，返回某个值应该意味着跳出循环。 - kiwicomb123

Answer 2

修改了$.each函数

$.fn.eachReturn = function(arr, callback) {
   var result = null;
   $.each(arr, function(index, value){
       var test = callback(index, value);
       if (test) {
           result = test;
           return false;
       }
   });
   return result ;
}

它将在非 false/非空结果上中断循环并将其返回，因此在您的情况下会是：

return $.eachReturn(someArray, function(i){
    ...

- Peter

Answer 3

这里：

http://jsbin.com/ucuqot/3/edit

function findXX(word)
{  
  $.each(someArray, function(i,n)
  {
    $('body').append('-> '+i+'<br />');
    if(n == word)
    {
      return false;
    }   
  });  
}

- Royi Namir

Answer 4

我们可以通过使回调函数返回false来在特定迭代中中断$.each()循环。返回非false与for循环中的continue语句相同；它将立即跳过下一次迭代。

来自http://api.jquery.com/jquery.each/ 是的，这很老了，但是为了回答问题，这可能会更简单一些：

function findXX(word) {
  $.each(someArray, function(index, value) {
    $('body').append('-> ' + index + ":" + value + '<br />');
    return !(value == word);
  });
}
$(function() {
  someArray = new Array();
  someArray[0] = 't5';
  someArray[1] = 'z12';
  someArray[2] = 'b88';
  someArray[3] = 's55';
  someArray[4] = 'e51';
  someArray[5] = 'o322';
  someArray[6] = 'i22';
  someArray[7] = 'k954';
  findXX('o322');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

A bit more with comments:

function findXX(myA, word) {
  let br = '<br />';//create once
  let myHolder = $("<div />");//get a holder to not hit DOM a lot
  let found = false;//default return
  $.each(myA, function(index, value) {
    found = (value == word);
    myHolder.append('-> ' + index + ":" + value + br);
    return !found;
  });
  $('body').append(myHolder.html());// hit DOM once
  return found;
}
$(function() {
  // no horrid global array, easier array setup;
  let someArray = ['t5', 'z12', 'b88', 's55', 'e51', 'o322', 'i22', 'k954'];
  // pass the array and the value we want to find, return back a value
  let test = findXX(someArray, 'o322');
  $('body').append("<div>Found:" + test + "</div>");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

注意：数组.includes()可能更适合这里 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/includes

或者只需使用.find()来获取https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find

- Mark Schultheiss

Answer 5

试试这个...

  someArray = new Array();
  someArray[0] = 't5';
  someArray[1] = 'z12';
  someArray[2] = 'b88';
  someArray[3] = 's55';
  someArray[4] = 'e51';
  someArray[5] = 'o322';
  someArray[6] = 'i22';
  someArray[7] = 'k954';  

  var test =  findXX('o322'); 
  console.log(test);



function findXX(word)
{  
  for(var i in someArray){


    if(someArray[i] == word)
    {
      return someArray[i]; //<---  stop the loop!
    }   
  }
}

- sangeeth kumar

Answer 6

与其设置标志，使用JavaScript的Array.prototype.find在数组中查找匹配项可能更加优雅。当从回调函数返回一个真值时，循环将结束，并且该迭代期间的数组值将是.find调用的返回值：

function findXX(word) {
    return someArray.find((item, i) => {
        $('body').append('-> '+i+'<br />');
        return item === word;
    }); 
}

const someArray = new Array();
someArray[0] = 't5';
someArray[1] = 'z12';
someArray[2] = 'b88';
someArray[3] = 's55';
someArray[4] = 'e51';
someArray[5] = 'o322';
someArray[6] = 'i22';
someArray[7] = 'k954';

var test = findXX('o322');
console.log('found word:', test);

function findXX(word) {
  return someArray.find((item, i) => {
    $('body').append('-> ' + i + '<br />');
    return item === word;
  });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

- CertainPerformance