"Translated" forEach loop three things you do not know

Foreword

925 word article, read about 7 minutes.

In summary: forEach loop you do not know three things.

• 原文地址：3 things you didn’t know about the forEach loop in JS
• No public: "front-end Advanced Learning ', replies," 666 ", get a package of front-end technology books

Abandon myself who can not afford to help, self-reliance were hit did not fall.

text

Do you think you really learn how to use forEachit?

This is before I forEachunderstand the cycle: that is, after a common semantic forcycle, may be break, continue, return.

This article will show you forEachthree things you might not know.

1. return cycle does not stop

Do you think the following code in print 1and 2then will stop it?

array = [1, 2, 3, 4];
array.forEach(function (element) {
  console.log(element);

  if (element === 2) 
    return;
  
});
// Output: 1 2 3 4

The answer is no, the above code will print properly 1,2,3,4. If you have a Javabackground, you may be very surprised, how could it?

The reason is that we forEachpass a callback function, the behavior of the callback function and normal function, we returnoperate is actually an ordinary function return. So it does not meet our expectations will forEachcycle interrupted.

MDN official document:

Note: In addition to the exception is thrown, there is no way to suspend or out of forEach()the loop. If you need to abort or out of the loop, forEach()the tool is not a method that should be used.

We will rewrite the code above:

const array = [1, 2, 3, 4];
const callback = function(element) {
    console.log(element);
    
    if (element === 2) 
      return; // would this make a difference? no.
}
for (let i = 0; i < array.length; i++) {
    callback(array[i]);
}
// Output: 1 2 3 4

This is the actual code for performing the above-described idea, returnwill only work on the current function, nature will not foraffect the cycle

2. Do not break

Do you think the following code will be breakoff it?

const array = [1, 2, 3, 4];
array.forEach(function(element) {
  console.log(element);
  
  if (element === 2) 
    break;
});
// Output: Uncaught SyntaxError: Illegal break statement

No, even this line of code will not run directly to the error.

So how this code to achieve the effect we had wanted to achieve it?

Ordinary forcycle like:

const array = [1, 2, 3, 4];
for (let i = 0; i < array.length; i++) {
  console.log(array[i]);
  
  if (array[i] === 2) 
    break;
}
// Output: 1 2

3. can not continue

The following code is skipped 2, 3, 4 print it?

const array = [1, 2, 3, 4];
array.forEach(function (element) {
  if (element === 2) 
    continue;
  
  console.log(element);
});
// Output: Uncaught SyntaxError: Illegal continue statement: no surrounding iteration statement

The same does not, and breakthe same error, even after the code will not run this line.

How to achieve the desired it?

Or the use of a common forcycle to solve:

for (let i = 0; i < array.length; i++) {
  if (array[i] === 2) 
    continue;
  console.log(array[i]);
}
// Output: 1 3 4

Supplementary translator

forEachActual operating principle function is actually the case, the pseudo-code is as follows:

let arr = [1, 2];
arr.forEach(function(ele) {
    console.log(ele);
}); 
// output: 1, 2
// 上面代码等同于
function func(ele) {
  console.log(ele);
}
for (let i = 0; i < arr.length; i++) {
    func(arr[i])
}
// output: 1, 2

In fact forEachthe polyfill realize, too, and in forEachthe implementation of a function forcycle, forthe callback function loop.

So, like the following code is naturally not in line with expectations:

let arr = [1, 2];
let sum = 0;
function add(a) {
    return a;
}
arr.forEach(async function(ele) {
  sum += await add(ele);
});
console.log(sum);
// Output：0

Read as follows:

let arr = [1, 2];
let sum = 0;
function add(a) {
    return a;
}
for (let i = 0; i < arr.length; i++) {
    sum += await add(arr[i]);
}
console.log(sum);
// Output：3

---

Subscribe more articles may be concerned about "front-end Advanced Learning ', replies," 666 ", get a package of front-end technology books