Introduce
I am new to the typescript language and have encountered some problems related to loops, so I share here so that the following friends have an overview of the loops in typescript, thereby saving A little time to find out. OK let’s start.
For
Traditional for style, like in other languages:
1 2 3 4 | for (first expression; second expression; third expression ) { // statements to be executed repeatedly } |
Here, the first expression is executed before the start of the loop. The second expression is the condition to execute the loop. And the third expression is executed after doing everything in the loop. Note that AFTER.
1 2 3 4 | for (let i = 0; i < 3; i++) { console.log ("Block statement execution no." + i); } |
Then will print out:
1 2 3 4 | Block statement execution no.0 Block statement execution no.1 Block statement execution no.2 |
For … of
However, typescript works very well with objects. So there are loops that are dedicated to objects. For..of is one such loop. This loop will iterate over the values of the array, list, string, Object, … For example:
1 2 3 4 5 6 | let arr = [10, 20, 30, 40]; for (const val of arr) { console.log(val); // prints values: 10, 20, 30, 40 } |
When used to traverse objects, for..of is often used in conjunction with Object.values () – returns an array of values and Object.keys () returns an array of keys for the object.
1 2 3 4 5 6 7 8 9 | const obj = { firstName: 'Hoa', lastName: 'Minzii' }; console.log(Object.values(obj)); // [ 'Hoa', 'Minzii' ] for (const key of Object.keys(obj)){ console.log(key) // firstName , lastName } |
Normally, we will access the value by key using the [] operator.
1 2 3 4 | for (const key of Object.keys(obj)){ console.log(obj[key]) // Hoa , Minzii } |
For … in
Similar to for … of, but with object key.
1 2 3 4 5 6 | let arr = [10, 20, 30, 40]; for (const index1 in arr) { console.log(index1); // prints indexes: 0, 1, 2, 3 } |
Promise.all ()
Another way to iterate over the elements in an object is to use promise.all () in conjunction with the map () function to handle asynchronously.
1 2 3 4 5 6 7 8 9 10 11 | const obj = { firstName: 'Hoa', lastName: 'Minzii' }; const promises = obj.map((data) => { console.log(data); // 'firstName': 'Hoa', 'lastName': 'Minzii' // do something // return data }); Promise.all(promises); |
The map () function will return an array of promises, our job is promise.all to wait for all the promises to be processed, too convenient, right.
Note that when 1 process in promise.all fails, all promises stop. This can affect the output. To avoid this, put try … catch in the handler function so that the process won’t be interrupted. The code will become:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | const obj = { firstName: 'Hoa', lastName: 'Minzii' }; const promises = obj.map((data) => { try { console.log(data); // 'firstName': 'Hoa', 'lastName': 'Minzii' // do something // return data } catch (error){ console.log(error) return null; } }); Promise.all(promises); |
summary
Above are some of my shares about loops in typescript. At the beginning, there are still many surprises, looking forward to everyone’s comments.
Happy coding 