This is the 20th day of my participation in the Genwen Challenge

1. Set()

Basic usage

ES6 provides a new data structure, Set. It is similar to an array, but the values of the members are unique and there are no duplicate values.

The Set itself is a constructor used to generate the Set data structure.

const s = new Set(a); [2.3.5.4.5.2.2].forEach(x= > s.add(x));

for (let i of s) {
  console.log(i);
}
// 2 3 5 4
Copy the code

The Set function can take an array (or some other data structure with an Iterable interface) as an argument for initialization.

/ / a
const set = new Set([1.2.3.4.4]);
[...set]
// [1, 2, 3, 4]

/ / two cases
const items = new Set([1.2.3.4.5.5.5.5]);
items.size / / 5

/ / 3
function divs () {
  return [...document.querySelectorAll('div')];
}

const set = new Set(divs());
set.size / / 56

/ / similar to
divs().forEach(div= > set.add(div));
set.size / / 56
Copy the code

Instance properties and instance methods

let mySet = new Set(a);// set.prototype. add(value) Last bit added
mySet.add(1); // Set [ 1 ]

mySet.add(5); // Set [ 1, 5 ]
mySet.add(5); // Set [ 1, 5 ]
mySet.add("some text"); // Set [ 1, 5, "some text" ]    

let o = {a: 1.b: 2};
mySet.add(o);

mySet.add({a: 1.b: 2}); // o points to a different object, so no problem

// Set.prototype.has(value)
mySet.has(1); // true
mySet.has(3); // false
mySet.has(5);              // true
mySet.has(Math.sqrt(25));  // true
mySet.has("Some Text".toLowerCase()); // true
mySet.has(o); // true

mySet.size; / / 5

// Set.prototype.delete(value)
mySet.delete(5);  // true to remove 5 from set
mySet.has(5);     // false, 5 has been removed

mySet.size; // 4, just removed a value

console.log(mySet);
// logs Set(4) {1, "some text", {... }, {... }}

// Set.prototype.clear()
mySet.clear();
console.log(mySet);
// logs Set(0) []

Copy the code

Iterative Set

// Iterate through the set
/ / output in sequence: 1, the text ", "{" a" : 1, "b", 2}, {" a ": 1," b ": 2}
for (let item of mySet) console.log(item);

/ / output in sequence: 1, the text ", "{" a" : 1, "b", 2}, {" a ": 1," b ": 2}
for (let item of mySet.keys()) console.log(item);

/ / output in sequence: 1, the text ", "{" a" : 1, "b", 2}, {" a ": 1," b ": 2}
for (let item of mySet.values()) console.log(item);

/ / output in sequence: 1, the text ", "{" a" : 1, "b", 2}, {" a ": 1," b ": 2}
//(key = value)
for (let [key, value] of mySet.entries()) console.log(key);
Copy the code

2. Map()

Meaning and basic usage

JavaScript objects are essentially collections of key-value pairs (Hash structures), but traditionally strings can only be used as keys. This puts a great limit on its use.

const data = {};
const element = document.getElementById('myDiv');

data[element] = 'metadata';
data['[object HTMLDivElement]'] // "metadata"
Copy the code

To solve this problem, ES6 provides Map data structures. It is similar to an object in that it is a collection of key-value pairs, but the range of keys is not limited to strings, and all types of values (including objects) can be used as keys. In other words, the Object structure provides string-value mapping, and the Map structure provides value-value mapping, which is a more complete implementation of Hash structures. If you need key-value pairs of data structures, Map is better than Object.

const m = new Map(a);const o = {p: 'Hello World'};

m.set(o, 'content')
m.get(o) // "content"

m.has(o) // true
m.delete(o) // true
m.has(o) // false
Copy the code

The above code uses the set method of the Map structure to treat the object O as a key of M, then reads the key using the get method, and then deletes the key using the DELETE method.

The example above shows how to add members to a Map. As a constructor, a Map can also take an array as an argument. The members of this array are arrays representing key-value pairs.

const map = new Map([['name'.'Joe'],
  ['title'.'Author']]); map.size/ / 2
map.has('name') // true
map.get('name') // "/"
map.has('title') // true
map.get('title') // "Author"
Copy the code

Copy or merge Maps

You can copy directly with a Map object. Different objects, so === = will be different.

let original = new Map([[1.'one']]);let clone = new Map(original);

console.log(clone.get(1)); // one
console.log(original === clone); // false. Shallow comparisons are not references to the same object
Copy the code

When a map object is merged with a Map object, the map object is overwritten if the key value is the same. Merging with an array also overwrites the same key.

let first = new Map([[1.'one'],
  [2.'two'],
  [3.'three']]);let second = new Map([[1.'uno'],
  [2.'dos']]);// When two maps are merged, if there are duplicate keys, the latter overwrites the former.
// The expansion operator essentially converts a Map object into an array.
let merged = new Map([...first, ...second]);

console.log(merged.get(1)); // uno
console.log(merged.get(2)); // dos
console.log(merged.get(3)); // three

// When a Map object is merged with an array, if there are duplicate keys, the last one overwrites the previous one.
let merged = new Map([...first, ...second, [1.'eins']]);

console.log(merged.get(1)); // eins
console.log(merged.get(2)); // dos
console.log(merged.get(3)); // three
Copy the code

reference

  • [1] Yifeng Ruan: Introduction to ECMAScript6
  • [2] MDN