首页 文章

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

提问于
浏览 次
1

我是编程的新手，我想将以下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 is not a function ，有人可以帮忙吗？

javascript

4 回答

  • 0

    基于 forEach() 的方法不适合您的问题，因为它会在 forEach() 循环期间使"early returns"变得困难 .

    也许您可以考虑使用 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>
    回复于
  • 0

    你可以使用Jquery . each功能 .

    $( ".letter" ).each(function( index ) {
if(letter === $( this ).html()) {
        console.log('this is true')
        return false; // this will stop the execution
       } 
});
    回复于
  • 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
  );
}

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

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

    由于已经给出了所有循环答案，我将提出一种不同的方法 . 我建议您将所有匹配的节点 .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>
    回复于

相关问题