Detailed explanation of various loop speed tests in JS that you don’t know

Preface

Before testing the loop speed, let's create an array with 1 million data:

const len ​​= 100 * 10000;
const arr = [];
for (let i = 0; i < len; i++) {
  arr.push(Math.floor(Math.random() * len));
}

The test environment is:

1. Computer: iMac (10.13.6);

2. Processor: 4.2 GHz Intel Core i7;

3. Browser: Chrome (89.0.4389.82)

1. for loop

The for loop is the most commonly used loop method. Its biggest advantage is that it has a clear structure and can be stopped at any time.

Let's first test it with 10 times:

console.log('test for');
for (let k = 0; k < 10; k++) {
  console.time('for');
  let sum = 0;
  for (let i = 0; i < len; i++) {
    sum += arr[i] % 100;
  }
  console.timeEnd('for');
}

The final result is:

The first and second times took a long time, but from the third time onwards it remained at around 1.25ms.

2. while loop and do-while loop

Putting these two together, their structures are similar enough, and they can also break and stop at any time.

console.log('\ntest while');
for (let k = 0; k < 10; k++) {
  console.time('while');
  let sum = 0;
  let i = 0;
  while (i < len) {
    sum += arr[i] % 100;
    i++;
  }
  console.timeEnd('while');
}
console.log('\ntest do-while');
for (let k = 0; k < 10; k++) {
  console.time('do-while');
  let sum = 0;
  let i = 0;
  do {
    sum += arr[i] % 100;
    i++;
  } while (i < len);
  console.timeEnd('do-while');
}

The results of the while loop and the do-while loop are almost the same. Let's just look at the results of the while loop running on the browser:

It's about as fast as a for loop.

3. forEach, map, and reduce loops

Next, we come to the three commonly used array methods: forEach, map, reduce, etc. These three methods are new syntax added to the ES6 standard.

3.1 A brief introduction to forEach

These methods cannot stop the loop. No matter whether break or return is used, the entire loop cannot be stopped. We can do a test, for example, I want to stop the loop when it encounters a multiple of 3

[1, 2, 3, 4, 5].forEach((item) => {
  console.log(`before return: ${item}`);
  if (item % 3 === 0) {
    return;
  }
  console.log(`after return: ${item}`);
});

The results are as follows:

From the running results, we can see that our return just does not execute the statements following the loop, but does not stop the entire loop. The following 4 and 5 are still output normally.

Is it true that the cycle cannot be stopped like Xuanmai? No, there is another way to stop the cycle. That is throwing an exception:

try {
  [1, 2, 3, 4, 5].forEach((item) => {
    console.log(`before return: ${item}`);
    if (item % 3 === 0) {
      throw new Error('break forEach');
    }
    console.log(`after return: ${item}`);
  });
} catch (e) {}

After an exception is thrown in forEach, the loop can be stopped, and then try-catch can be used to catch the exception to prevent the entire service from being suspended.

Although it is possible to stop the forEach loop, it is quite troublesome to implement. Therefore, if there is no need to stop the entire loop, you can use loop methods such as forEach and map; otherwise, you still have to use other loop methods.

3.2 Speed ​​test of forEach etc.

OK, next we are going to test the cycle speed of these 3 cycle methods.

// Test for forEach:
console.log('\ntest forEach');
for (let k = 0; k < 10; k++) {
  console.time('forEach');
  let sum = 0;
  arr.forEach((item) => {
    sum += item % 100;
  });
  console.timeEnd('forEach');
}

// map test:
console.log('\ntest map');
for (let k = 0; k < 10; k++) {
  console.time('map');
  let sum = 0;
  arr.map((item) => {
    sum += item % 100;
  });
  console.timeEnd('map');
}

// Test for reduce:
console.log('\ntest reduce');
for (let k = 0; k < 10; k++) {
  console.time('reduce');
  let sum = 0;
  arr.reduce((_, item) => {
    sum += item % 100;
  }, 0);
  console.timeEnd('reduce');
}

Since the time of these three loops is almost the same, I only intercepted the test results of forEach here.

After executing 10 loops, the execution time of forEach is about 10.8ms, which is nearly 10 times longer than the for loop and while loop above.

4. for-of

ES6 borrows from C++, Java, C#, and Python and introduces the for...of loop as a unified method for traversing all data structures.

4.1 A brief introduction to for-of

As long as a data structure has the Symbol.iterator property deployed, it is considered to have the iterator interface, and its members can be traversed using the for...of loop. That is, the for...of loop calls the Symbol.iterator method of the data structure.

The scope of the for...of loop includes arrays, Set and Map structures, some array-like objects (such as arguments objects, DOM NodeList objects), the Generator object described later, and strings.

for-of gets the value itself, while for-in gets the key, and then gets the current data through the key.

const fruits = ['apple', 'banana', 'orange', 'lemon'];

for (const value of fruits) {
  console.log(value); // 'apple', 'banana', 'orange', 'lemon'
}

4.2 Speed ​​measurement of for-of loop

Code to test the speed of the for-of loop:

console.log('\ntest for-of');
for (let k = 0; k < 10; k++) {
  console.time('for-of');
  let sum = 0;
  for (const value of arr) {
    sum += value % 100;
  }
  console.timeEnd('for-of');
}

Test results:

When repeating the same loop multiple times, the first two for-of loops will take longer, more than 15ms. But in subsequent executions, the loop speed drops to about 1.5ms, which is about the same as the for loop time.

5. for-in loop

for-in is usually used for loops of object type, but it can also be used to loop arrays. After all, the ancestor of all data types is object type.

console.log('\ntest for-in');
for (let k = 0; k < 10; k++) {
  console.time('for-in');
  let sum = 0;
  for (let key in arr) {
    sum += arr[key] % 100;
  }
  console.timeEnd('for-in');
}

Test results:

The speed test data of the for-in loop is amazing, it is simply in a class of its own, and at its best it takes at least 136ms. It can be seen that the for-in loop efficiency is really low.

Do not use the for-in loop for array type data; for Object type data, you can first get all the value data through Object.values(), and then use the forEach loop:

const obj = {};
for (let i = 0; i < len; i++) {
  obj[i] = Math.floor(Math.random() * len);
}
for (let k = 0; k < 10; k++) {
  console.time('forEach-values');
  let sum = 0;
  Object.values(obj).forEach((item) => {
    sum += item % 100;
  });
  console.timeEnd('forEach-values');
}

Even with one more step, the loop time is about 14ms, which is much faster than for-in.

6. Conclusion

Let's compare all the loop data together. Here we adjust the number of tests for each loop to 100. The horizontal axis is the number of loops, and the numerical axis is the loop time:

1. For loop, while loop and d-while loop take the least time;

2. The for-of loop takes a little longer;

3. The data of forEach loop, map loop and reduce loop are similar, but the duration of for-of loop is slightly longer;

4. The for-in loop takes the most time;

The duration of each loop is different. When choosing a loop method, in addition to considering the time, we must also consider the semantics and usage scenarios.

The above is a detailed explanation of various loop speed measurements in JS that you don’t know. For more information about various loop speed measurements in JS, please pay attention to other related articles on 123WORDPRESS.COM!