Shulou(Shulou.com)06/03 Report--

This article shows you how the technical differences between loops in JavaScript are. The content is concise and easy to understand, which will definitely brighten your eyes. I hope you can gain something through the detailed introduction of this article.

When using loops in JavaScript, you need to understand two key points: enumerable properties and iterating objects.

Enumerable properties

One of the defining characteristics of enumerable objects is that when we assign properties to the object through the assignment operator, we set the internal enumerable flag to true, which is the default value.

Of course, we can change this behavior by setting it to false.

Important: enumerable properties can be traversed with for...in.

Let me give you an example:

/ / will appear in for. In the in loop, const gbols = {}; gbols.platform = "LogRocket"; Object.getOwnPropertyDescriptor (gbols, "platform"); / / {value: "LogRocket", writable: true, enumerable: true, configurable: true} for (const item in gbols) {console.log (item)} / / platform / / will not appear in for. Set enumerable in in loop to false Object.defineProperty (gbols, 'role', {value:' Admin', writable: true, enumerable: false}) for (const item in gbols) {console.log (item)} / / platform

Iterable object

If an object defines its iterative behavior, then it is iterable. In this case, it will be in for... The value of the loop in the of construction defines its iterative behavior. Iterable built-in types include Arrays, Strings, Sets, and Maps. Object is not iterable because it does not specify @ iterator method.

In Javascript, all iterations are enumerable, but not all enumerations are iterable.

For... In looks for objects in the data, while for.. of looks for repetitive sequences. Let's take an example:

Const authors = ['Xiao Zhi', 'Xiao Wang', 'Xiao Ming', 'Xiao Hong']; / / use fro (const author in authors) {console.log (author)} / / print with the for in loop: 0min 1 for (const author of authors) {console.log (author)} / / print: Xiao Zhi Xiao Ming Xiao Hong

When using this construct, it is important to keep in mind that if you call typeof to get a type of object, you can use for... In loop.

Let's take a look at the operation on the authors variable:

Typeof authors / / prints "object", so we can use `for.. in`

It may seem strange at first glance, but it must be noted that an array is a special kind of object with an index as its key. When the for... in loop finds an object, it loops through each key.

For... The way in traverses the authors array can be understood in the following explicit way:

Const authors = {0: 'Jade', 1:' Dafe', 2: 'Gbols', 3:' Daniel'}

Important: if you can trace it back to the object (or inherit it from the object prototype chain), because for... In will traverse the keys in an unspecified order.

At the same time, if you implement for.. An iterator constructed by of, it loops through the value in each iteration.

ForEach and map methods

Although forEach and map methods can be used to achieve the same goal, there are differences in behavior and performance.

On a basic level, when functions are called, they all receive a callback function as an argument.

Consider the following code snippet:

Const scoresEach = [2pr 4,8,16,32]; const scoresMap = [2pr 4,8,16,32]; const square = (num) = > num * num

We list some differences in operation one by one.

ForEach returns undefined, while map returns a new array:

Let newScores = [] const resultWithEach = scoresEach.forEach ((score) = > {const newScore = square (score); newScores.push (newScore);}); const resultWithMap = scoresMap.map (square); console.log (resultWithEach) / / undefined console.log (resultWithMap) / / [4,16,64,256, 1024]

Map is a pure function, while forEach makes some changes:

Console.log (newScores) / / [4, 16, 64, 256, 1024]

In my opinion, map tends to be a functional programming paradigm. Unlike forEach, we don't always need to make a change to get the desired results; in forEach, we need to make changes to the newscore variable. The map function produces the same result each time it runs, when the same input is provided. At the same time, the forEach counterpart takes data from the previous value of the last change.

Chain type

Map can use chained operations because the result returned by map is an array. Therefore, any other array method can be called on the result immediately. In other words, we can call filter, reduce, some, and so on. For forEach, this is not possible because the returned value is undefined.

Performance

The performance of map method is often better than that of forEach method.

Check the performance of the equivalent code block implemented with map and forEach. On average, the map function executes at least 50% faster.

Note: this benchmark depends on the computer you use and the implementation of the browser.

Of all the loop structures discussed above, it is for..of 's loop that gives us the most control. We can use it with the keywords return, continue, and break. This means that we can specify what we want to happen to each element in the array and whether we want to leave early or skip it.

The above is what the technical differences between loops in JavaScript are. Have you learned any knowledge or skills? If you want to learn more skills or enrich your knowledge reserve, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.