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

Posted 2023-02-22

【中文标题】Jquery each - 停止循环并返回对象

【英文标题】：Jquery each - Stop loop and return object

【发布时间】：2012-01-03 16:38:40

【问题描述】：

谁能告诉我为什么在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!
       
  );  

【问题讨论】：

你确定这是真的 if(someArray[i] == 'someArray')

我认为这个条件 (someArray[i] == 'someArray') 应该是 (someArray[i] == word)

@user970727 看看我的回答。它在每个命令中使用集成函数 (i,n)

【参考方案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; 

来自docs：

我们可以在特定的迭代中打破 $.each() 循环，方法是 回调函数返回假。返回非 false 与 a 相同 for 循环中的 continue 语句；它会立即跳到下一个 迭代。

【讨论】：

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

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

@user970727 - 在该示例中，您在 each 循环中根本没有 return 语句...这是一个更新的示例：jsbin.com/ucuqot/5/edit

@JamesAllardice 对我不起作用，在“return=false;”它正在退出循环，但后来传播到语句“return toReturn;”在我的实例中，我返回“true”。所以即使执行“return = false”，也始终返回 true

为什么会这样？你会想，返回一些值就意味着跳出循环。

【参考方案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 ;

它将打破非假/非空结果的循环并将其返回，所以在你的情况下它会是

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

【参考方案3】：

这里：

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

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

【参考方案4】：

试试这个...

  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!
       
  

【参考方案5】：

"我们可以在特定的迭代中打破 $.each() 循环，方法是 回调函数返回false。返回非 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>

关于 cmets 的更多信息：

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

【参考方案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>