Question

我是编程新手，我想将以下for循环转换为foreach循环，这是for循环：

checkLetter(letter) {
    //give the letter class a variable named letters to have a reference to them
   var letters = $('.letter');

   for (var i=0; i < letters.length; i++) {
       console.log(letters[i].innerHTML);
        //if the phrase contains a letter from the phrases array return true, otherwise it will return false
       if(letter === letters[i].innerHTML) {
        console.log('this is true')
        return true
       }
       else return false
    }
}

这是我为forEach版本编写的内容：

checkLetter(letter) {
    //give the letter class a variable named letters to have a reference to them
    var letters = $('.letter');
    //loop through each letter using Foreach
    letters.forEach(letter)
    console.log(letters[i].innerHTML);
    //if the phrase contains a letter from the phrases array return true, otherwise it will return false
    if(letter === letters[i].innerHTML) {
        console.log('this is true')
        return true
    }
    else return false
}

但是，我最终遇到以下错误：

letters.foreach不是函数

有人可以帮忙吗？

Answer 1

letters是jQuery对象，而不是数组；要遍历jQuery对象，您将不得不使用jQuery方法，例如each：

letters.each((i, letter) => {
  // do something with `letter`

或致电Array.prototype.forEach：

Array.prototype.forEach.call(
  letters,
  letter => {
    // do something with `letter`
  }
);

还要注意，您当前的letters.forEach(letter)没有意义-forEach接受回调函数作为参数。

不过，对于您要实现的目标，更适合使用Array.prototype.some检查letters中的项目是否满足以下条件：forEach更好当其他数组方法不够用时，适用于通用迭代：

checkLetter(letterToFind) {
  var letters = $('.letter');
  return Array.prototype.some.call(
    letters,
    letterElement => letterElement.textContent === letterToFind
  );
}

或者，使用jQuery的each，不太合适的IMO但仍然可以使用：

checkLetter(letterToFind) {
  var letters = $('.letter');
  let foundLetter = false;
  letters.each((i, letterElement) => {
    if ($(letterElement).text() === letterToFind) {
      foundLetter = true;
    }
  });
  return foundLetter;
}

Answer 2

基于forEach()的方法不太适合您的问题，因为它会使forEach()循环中的“早期回报”变得困难。

也许您可以考虑使用some()，如果迭代中的项目满足提供的条件，则返回true：

return node.innerHTML === letter

使用some()，您可以通过以下方式实现checkLetter()函数：

function checkLetter(letter) {
  
  // Query document for .letter nodes. This avoids the need for jQuery
  var letters = document.querySelectorAll('.letter');

  // Convert letters selection result to Array via Array.from, and 
  // then call some() to determine if at least one node satisfies
  // the match condition "node.innerHTML === letter"
  return Array.from(letters).some(function(node) {

    return node.innerHTML === letter
  })
}


console.log('Check A:', checkLetter('A'))
console.log('Check B:', checkLetter('B'))
console.log('Check Z:', checkLetter('Z'))

<div class="letter">A</div>
<div class="letter">B</div>
<div class="letter">C</div>
<div class="letter">D</div>

Answer 3

您可以使用Jquery。each函数。

$( ".letter" ).each(function( index ) {
if(letter === $( this ).html()) {
        console.log('this is true')
        return false; // this will stop the execution
       } 
});

Answer 4

既然已经给出了所有循环答案，我将提出一种不同的方法。我建议您将所有匹配的节点.letter转换为字符串，然后使用indexOf来确定是否存在匹配项。例如：

function checkLetter(letter) {
  return $('.letter').text().indexOf(letter) > -1;
}

console.log('A', checkLetter('A'));
console.log('C', checkLetter('C'));
console.log('F', checkLetter('F'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="letter">A</span>
<span class="letter">B</span>
<span class="letter">C</span>
<span class="letter">D</span>
<span class="letter">E</span>

我在将for循环转换为forEach循环时遇到问题

4 个答案: