Set and Map are new data structures in ES6. They are extensions of the current JS array and object data structures. Because it is a new data structure, it has not been used on a large scale, but as a front-end programmer, it is necessary to know in advance. To summarize the key points of both:
- A Set is similar to an array, but an array allows elements to be duplicated, whereas a Set does not
- A Map is similar to an object, but the key of an ordinary object must be a string or number, whereas the key of a Map can be any data type
A Set instance does not allow duplicate elements, as evidenced by the following example. You can initialize an instance of a Set from an array, or add an element. Elements cannot be duplicated; duplicates are ignored.
// 例1
const set = new Set([1.2.3.4.4]);
console.log(set) // Set(4) {1, 2, 3, 4}
// 例2
const set = new Set(a); [2.3.5.4.5.8.8].forEach(item= > set.add(item));
for (let item of set) {
console.log(item);
}
// 2 3 5 4 8
Copy the code
The properties and methods of a Set instance are
size
: Gets the number of elements.add(value)
: Adds the element and returns the Set instance itself.delete(value)
: Deletes an element and returns a Boolean value indicating whether the deletion was successful.has(value)
: Returns a Boolean value indicating whether the value is an element of a Set instance.clear()
: Clears all elements with no return value.
const s = new Set(a); s.add(1).add(2).add(2); // Add elements
s.size / / 2
s.has(1) // true
s.has(2) // true
s.has(3) // false
s.delete(2);
s.has(2) // false
s.clear();
console.log(s); // Set(0) {}
Copy the code
To traverse a Set instance, use the following method
keys()
: returns a traverser for key names.values()
: returns a traverser for key values. However, keys() and values() return the same result because the Set structure does not have a key name, only a key value (or the key name and the key value are the same value).entries()
: returns a traverser for key-value pairs.forEach()
: Iterates through each member using the callback function.
let set = new Set(['aaa'.'bbb'.'ccc']);
for (let item of set.keys()) {
console.log(item);
}
// aaa
// bbb
// ccc
for (let item of set.values()) {
console.log(item);
}
// aaa
// bbb
// ccc
for (let item of set.entries()) {
console.log(item);
}
// ["aaa", "aaa"]
// ["bbb", "bbb"]
// ["ccc", "ccc"]
set.forEach((value, key) = > console.log(key + ':' + value))
// aaa : aaa
// bbb : bbb
// ccc : ccc
Copy the code
Map
Map is used in the same way as a normal object. Let’s take a look at the non-string or numeric key feature.
const map = new Map(a);const obj = {p: 'Hello World'};
map.set(obj, 'OK')
map.get(obj) // "OK"
map.has(obj) // true
map.delete(obj) // true
map.has(obj) // false
Copy the code
You need to initialize an instance with new Map(), and the set Get has delete in the following code is just the name (I’ll show you later). Where map.set(obj, ‘OK’) is the key that uses an object (not just an object, but any data type) and is then correctly retrieved via map.get(obj).
Map instance attributes and methods are as follows:
size
: Gets the number of membersset
: Sets the member key and valueget
: Gets the value of a member attributehas
: Checks whether a member existsdelete
: Delete memberclear
: Clear all
const map = new Map(a); map.set('aaa'.100);
map.set('bbb'.200);
map.size / / 2
map.get('aaa') / / 100
map.has('aaa') // true
map.delete('aaa')
map.has('aaa') // false
map.clear()
Copy the code
The Map instance traversal methods are:
keys()
: returns a traverser for key names.values()
: returns a traverser for key values.entries()
: returns a traverser for all members.forEach()
: Traverses all Map members.
const map = new Map(a); map.set('aaa'.100);
map.set('bbb'.200);
for (let key of map.keys()) {
console.log(key);
}
// "aaa"
// "bbb"
for (let value of map.values()) {
console.log(value);
}
/ / 100
/ / 200
for (let item of map.entries()) {
console.log(item[0], item[1]);
}
// aaa 100
// bbb 200
/ / or
for (let [key, value] of map.entries()) {
console.log(key, value);
}
// aaa 100
// bbb 200
Copy the code