javascript - How to break ForEach Loop in TypeScript - Stack Overflow

admin管理员组

文章数量:1134579

I have a the below code, on which i am unable to break the loop on certain conditions.

function isVoteTally(): boolean {
  let count = false;
  this.tabmittee.ratings.forEach((element) => {
    const _fo = this.isEmptyOrNull(element.ratings.finalOutcome.finaloutlook);
    const _foreign = this.isEmptyOrNull(element.ratings.finalOutcome.foreign);
    const _local = this.isEmptyOrNull(element.ratings.finalOutcome.local);
    const _tally =
      element.ratings.finalOutcome.voteTally.maj +
      element.ratings.finalOutcome.voteTally.dis;

    if (_fo == false && _foreign == false && _local == false) {
      if (_tally > 0) {
        return (count = false); // ⭐
      }
    } else {
      if (_tally < 0) {
        return (count = false); // ⭐
      }
    }
  });
  return count;
}

On the star-marked areas, I want to break the code and return the boolean value, but I am unable to do. How can it be done?

I have a the below code, on which i am unable to break the loop on certain conditions.

function isVoteTally(): boolean {
  let count = false;
  this.tab.committee.ratings.forEach((element) => {
    const _fo = this.isEmptyOrNull(element.ratings.finalOutcome.finaloutlook);
    const _foreign = this.isEmptyOrNull(element.ratings.finalOutcome.foreign);
    const _local = this.isEmptyOrNull(element.ratings.finalOutcome.local);
    const _tally =
      element.ratings.finalOutcome.voteTally.maj +
      element.ratings.finalOutcome.voteTally.dis;

    if (_fo == false && _foreign == false && _local == false) {
      if (_tally > 0) {
        return (count = false); // ⭐
      }
    } else {
      if (_tally < 0) {
        return (count = false); // ⭐
      }
    }
  });
  return count;
}

On the star-marked areas, I want to break the code and return the boolean value, but I am unable to do. How can it be done?

• javascript
• angular
• typescript
• foreach
• break

Share Improve this question Follow edited Dec 21, 2022 at 20:45 starball 49.3k2828 gold badges194194 silver badges865865 bronze badges asked Aug 8, 2018 at 12:58 ArkaArka 1,10522 gold badges99 silver badges1515 bronze badges 6

• 4 The MDN is a great resource on JavaScript and the types/methods available. Here's the page on Array.ForEach. And it has a section specifically about alternatives you can use if you need to break. "Early termination may be accomplished with:" – user310988 Commented Aug 8, 2018 at 13:20
• Please update the best answer to that provided by @Roberc – Kunal Commented Sep 1, 2020 at 19:51
• Does this answer your question? Short circuit Array.forEach like calling break – Liam Commented Jun 11, 2021 at 10:49
• Also the question should be renamed to: How to break ForEach Loop by returning a value in TypeScript. At the moment the title is a little bit misleading because you can break forEach loop by returning nothing. – C0mpl3x Commented Jun 17, 2021 at 12:58
• The comment from @user310988 has been the best answer I've seen throughout dozens of minutes of searching. Roberc's answer only solves for one case so that should not be the accepted answer. In an ocean of incorrect/incomplete answers, I finally find the proper one. – Wolf Commented Nov 30, 2022 at 11:11

 |  Show 1 more comment

8 Answers 8

Sorted by: Reset to default 162

this.tab.committee.ratings.forEach is not an operator.

Typescript allows for much more readable code.

Use a for loop in style as follows:

for (let a of this.tab.committee.ratings) {
   if (something_wrong) break;
}

p.s. forget "coding as with jQuery" in Angular. It just doesn't work.

It is not possible to break from forEach() normally.

Alternatively you can use Array.every() because you wish to return false while breaking the loop.

If you want to return true, then you can use Array.some()

this.tab.committee.ratings.every(element => {

  const _fo = this.isEmptyOrNull(element.ratings.finalOutcome.finaloutlook);
  const _foreign = this.isEmptyOrNull(element.ratings.finalOutcome.foreign);
  const _local = this.isEmptyOrNull(element.ratings.finalOutcome.local);
  const _tally = element.ratings.finalOutcome.voteTally.maj + element.ratings.finalOutcome.voteTally.dis;

  if (_fo == false && _foreign == false && _local == false) {
    if (_tally > 0) {
      **return count = false;**
    }
  } else {
    if (_tally < 0) {
      **return count = false;**
    }
  }
});

You cannot ‘break’, it won’t even run because the break instruction is not technically in a loop. Solution? Just use a normal for loop. Nobody would laugh at you.

I think even better solution is to use for. With for you can return a value when it's found and break the loop. It's a lot cleaner solution

for (element of this.tab.committee.ratings) {
// and here you use your element, when you return a values it stops the cycle

if (element === something){
 return element;
 }
}

I solved the problem by using a local variable

function() {
var itemFound=false;
  arr.forEach((item:any) => {
    if(item === '2' && !itemFound) {
      itemFound = true;
    }
  });  
 return itemFound;
}

const blocks = document.querySelectorAll('.block');
var breakMe = false;

blocks.forEach((block, i) => {
    if(breakMe == false) {
        /*code that you want*/ 
        if(i < 2) {
            block.style.background = 'red';
        } else if(i != 4) {
            block.style.background = 'blue';
        } else if(i == 4) {
            breakMe = true;
            /*change breackMe to true if you want to breack forEach*/
        }
    }

})

<!DOCTYPE html>
  <html lang="en">
  <body>
    <div id="container">
      <div class="block" style="width: 200px; height: 200px; background: purple; margin: 50px"></div>      
      <div class="block" style="width: 200px; height: 200px; background: purple; margin: 50px"></div>
      <div class="block" style="width: 200px; height: 200px; background: purple; margin: 50px"></div>
      <div class="block" style="width: 200px; height: 200px; background: purple; margin: 50px"></div>
      <div class="block" style="width: 200px; height: 200px; background: purple; margin: 50px"></div>
    </div>
  </body>
  </html>

You can break foreach loop by using try-catch statement

try {
  arr.forEach((item:any) => {
    if(item === '2') {
      throw "break";
    }
    console.log('Item ID: ', item);
  });  
} catch(e) {
  console.log('Warn Error',e);
}

simply do return false;. It will break.

本文标签： javascriptHow to break ForEach Loop in TypeScriptStack Overflow