An overview of the technical differences between loops in JavaScript

Author: Gbolahan Olagunju
Translator: Front-end Xiaozhi
Source: blog

If you have dreams and dry goods, search on [Moving the World] still washing dishes in the early morning.

This article GitHub https://github.com/qq449245884/xiaozhi has been included, and there are complete test sites, materials and my series of articles for interviews with first-tier manufacturers.

There are two key points to understand when using loops in JavaScript: enumerable properties and iterable objects.

enumerable property

A defining characteristic of enumerable objects is that when assigning properties to objects via the assignment operator, we set the internal enumerable flag to true , which is the default value.

Of course, we can change this behavior false

Important: Enumerable properties can be traversed for...in

Take an example to see:

// 会出现在 for ... in 循环中
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


// 不会出现在 for ... in 循环中
// 将 enumerable 设置为 false
Object.defineProperty(gbols, 'role', {value: 'Admin', writable: true, enumerable: false})

for (const item in gbols) {
  console.log(item)
}
// platform

iterable object

An object is iterable if it defines its iteration behavior. In this case, the values that will be looped through for …of Iterable built-in types include Arrays , Strings , Sets and Maps . object is not iterable because it does not specify @iterator method .

In Javascript, all iterables are enumerables, but not all enumerables are iterables.

for …in looks for objects in the data, while for ..of looks for repeating sequences. Let's see an example:

const authors = ['小智', '小王', '小明', '小红'];

// 与 for in 循环一起使用
fro (const author in authors) {
  console.log(author)
}

// 打印: 0,1,2,3

for (const author of authors) {
  console.log(author)
}

// 打印：小智  小王  小明   小红

When using this construct, keep in mind that if typeof is called and the resulting type is object for…in can be used to loop.

Let's take a look at the operation authors

typeof authors

// 打印的是 “object”，因此我们可以使用`for ..in`

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

for …in traverses the authors array can be understood in the following explicit way:

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

Important note: if you can trace back to the object (or inherit it from the object prototype chain) because for …in will traverse the keys in no specific order.

Meanwhile, if you implement the for.. of constructed by 061e4c6a19181d, it will loop over the value on each iteration.

ForEach and map methods

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

At a basic level, when functions are called, they all receive a callback function as a parameter.

Consider the following code snippet:

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

We list some differences in their operation one by one.

forEach returns undefined , and 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 performs some changes:

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

In my opinion, map towards the functional programming paradigm. Unlike forEach we don't always need to perform a change to get the desired result, in forEach we need to make a change newscore On each run, the map function will produce the same result when given the same input. At the same time, the forEach counterpart will get the data from the previous value of the last change.

chain

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

performance

map method tends to outperform the forEach method.

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

Note: This benchmark depends on the computer you are using and your browser implementation.

Summarize

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

Original: https://medium.com/better-programming/22-miraculous-tools-for-react-developers-in-2019-7d72054e2306

code is deployed cannot be known in real time. In order to solve these bugs afterwards, a lot of time is spent on log debugging. By the way, I recommend a useful bug monitoring tool Fundebug .

comminicate

If you have dreams and dry goods, search on [Moving the World] still washing dishes in the early morning.

This article https://github.com/qq449245884/xiaozhi . There are complete test sites, materials and my series of articles for interviews with first-tier manufacturers.