Warning: session_start(): open(/tmp/sess_ff6e2a56c20b464926f3a2af77ea1efd, O_RDWR) failed: Disk quota exceeded (122) in /home/wvyrfnwn/learnshareit.com/wp-content/plugins/learnpress/inc/class-lp-page-controller.php on line 1007

Warning: session_start(): Failed to read session data: files (path: /tmp) in /home/wvyrfnwn/learnshareit.com/wp-content/plugins/learnpress/inc/class-lp-page-controller.php on line 1007

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 420

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 420

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 719

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 420

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 420

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 719

Warning: ftp_mkdir() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 562

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 420

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230
How To Iterate Over A Map In TypeScript - LearnShareIT

How To Iterate Over A Map In TypeScript

Iterate over a Map in TypeScript

TypeScript is a syntactic superset of JavaScript means that it shares the same base syntax code but adds something to it. So if you are a novice or don’t know how to iterate over a Map in TypeScript, I will show you some methods with examples. Let’s jump into detail.

What can we do to iterate over a Map in TypeScript?

Method 1: Using forEach() 

Using forEach() method is a great way to iterate over a Map in TypeScript.

Syntax:  

iterable.forEach(function(currentValue,index,arr),thisValue)

Parameters:

  • Function() : (required). A function run for each loop time.
  • CurrentValue: (required).The value of the current loop time.
  • Index : (optional) The index of the current value.
  • ThisValue : (optional) A value passed to the function as its this value.

ForEach() method will call a function for each element in an iterable. So that you can use destructuring way to extract or unpack that values.

Example :

const anMap =new Map<string, any>([['name','Togban'],['age',18],['country','VietNam']])
anMap.forEach((value , key)=>{
    console.log(`${key}: ${value}`)
})

Output :

[LOG]: "name: Togban"
[LOG]: "age: 18"
[LOG]: "country: VietNam"

Method 2: Using for…of

You can use the for…of method to Iterate over a Map in TypeScript.

Syntax

for( variable of iterable){

Statement

}

For…of method will loop through the values of an iterable object in Map will be pair of key and value and each of pair will be assigned to the variable and you can use destructuring to unpack it

Example :

const anMap =new Map<string, any>([['name','Togban'],['age',18],['country','VietNam']]
)
for(const [key,value] of anMap) {
    console.log(`${key}: ${value}`)
}

Output :

[LOG]: "name: Togban"
[LOG]: "age: 18"
[LOG]: "country: VietNam"

Method 3: Loop through isolate key or value array

In this way, we will separate key and value into arrays by map.keys() or map.values()

map.keys() : return an array that contains all the keys of the map

map.values() : return an array that contains all the values of the map

And then we can use for…of like above

Example :

const anMap =new Map<string, any>([['name','Togban'],['age',18],['country','VietNam']]
)
const keyArray = anMap.keys()
const valueArray = anMap.values()
 
for (const key of keyArray){
    console.log(`key : ${key}`)
}
for (const value of valueArray){
    console.log(`value : ${value}`)
}

Output :

[LOG]: "key : name"
[LOG]: "key : age"
[LOG]: "key : country"
[LOG]: "value : Togban"
[LOG]: "value : 18"
[LOG]: "value : VietNam"

If you feel confused about what I just showed you. I recommend you to read more about forEach method, for…of method, destructuring.

Summary

That is all. I have shown and explained some methods to iterate over a Map in TypeScript. You can use the forEach() method, the for…of method. In addition, you will know more ways to do it if you learn advanced TypeScript.

Maybe you are interested:

Leave a Reply

Your email address will not be published. Required fields are marked *