Detailed explanation of the usage scenarios of Set and Map data structures in JavaScript

Set data structure

Set is a new data structure introduced in ES6. It is a collection that can store any type of data.

Set The value of each element is unique in the set.

Use Set data structures to easily remove duplicate elements in arrays or objects.

Application scenarios

// 1 array deduplicationconst arr = [1, 2, 3, 2, 1];
const set = new Set(arr);
const newArr = (set); // newArr = [1, 2, 3]
// 2 object deduplicationconst arr = [{ id: 1 }, { id: 2 }, { id: 1 }, { id: 3 }];
const set = new Set((item => ));
const newArr = (set, id => ({ id })); 
// newArr = [{ id: 1 }, { id: 2 }, { id: 3 }]

In the above code, we first use to map objects in the array to their id values,

Then use new Set to remove duplicate id values.

Finally, we use , to convert the collection into an array of objects,

And create a new object based on each id value to get an array of non-duplicate objects.

Map Data Structure

explain

Map is a js data structure, which is not the same as the map method of arrays. It should be distinguished.

Map data structures to manage data can improve the readability of the code

Map comparison object format storage speed is faster

// Create a Map objectconst formData = new Map();
// Add the value of the form element to the map('username', 'Tom');
('password', '123456');
// Get the value of the form elementconst username = ('username');// username = Tom
const password = ('password');// password = 123456

By using Map to manage data, the code can be made more concise and easy to maintain.

At the same time, Map also provides some convenient methods, such as set(), get(), has(), delete(), etc., which can easily operate the data.

Use scenarios

1. Manage form data

When there are multiple form elements in the page that need data interaction, you can use Map to store form data. For example:

const formData = new Map();
('username', 'Tom');
('password', '123456');
// Get the stored data through the get() methodconst username = ('username');// username = Tom
const password = ('password');// password = 123456

2. Manage page status

When there are some states on the page that need to be managed, you can use Map to store the state. For example:

const state = new Map();
('loading', false);
('error', null);
//Update stored data through the set() method('loading', true);
('error', 'Request failed');

3. Manage list data

When there is a list on the page that needs to be managed, you can use Map to store the list data. For example:

const list = new Map();
(1, { id: 1, name: 'Tom' });
(2, { id: 2, name: 'Join' });
// Get the stored data through the get() methodconst item = (1); // item = { id: 1, name: 'Tom' }
const item = (2); // item = { id: 2, name: 'Join' }

4. Manage cached data

When we need to cache some data, we can use Map to store cached data. For example:

const cache = new Map();
('key1', 'value1');
('key2', 'value2');
// Get the stored data through the get() methodconst value = ('key1');// value = value1
const value = ('key2');// value = value2

The above is the detailed explanation of the usage scenarios of Set and Map data structures in JavaScript. For more information about JavaScript Set Map data structures, please pay attention to my other related articles!