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 members
  • set: Sets the member key and value
  • get: Gets the value of a member attribute
  • has: Checks whether a member exists
  • delete: Delete member
  • clear: 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