ES6 series six: set and map

"Code tailor" provides technical-related information and a series of basic articles for front-end developers. Follow the "Novices of Xiaoheshan" public account on WeChat to get the latest articles in time.

Preface

Before we start learning, what we want to tell you is that this article is a summary of chapter 16084e94ad6a30 "Set and Map" "Introduction to ECMAScript6". If you have mastered the following knowledge items, you can skip this The link directly enters the question exercise

• What are Set and Map?
• Common methods of Set and Map

If you have forgotten some parts, 👇🏻 is ready for you!

Learning link

set and map learning

Summary

concept

Set object is a collection of values, and you can iterate its elements in the order of insertion. Set only appears once, that is, the element in Set

Map object saves key-value pairs and can remember the original insertion order of the keys. Any value (object or primitive value) can be used as a key or a value.

Common methods of set and map

Set

• Set()

Create a new Set object.

let mySet = new Set()

• Set.prototype.size

Returns the number of values in the Set

let mySet = new Set()

mySet.add(1) // Set [ 1 ]
mySet.add(5) // Set [ 1, 5 ]
mySet.size // 2

• Set.prototype.add(value)

Add an element to the end of the Set Return the Set object

let mySet = new Set()
mySet.add(1) // Set [ 1 ]
mySet.add(5) // Set [ 1, 5 ]

• Set.prototype.clear()

Remove all elements in the Set

let mySet = new Set()
mySet.add(1) // Set [ 1 ]
mySet.add(5) // Set [ 1, 5 ]
mySet.clear()
mySet.size // 0

• Set.prototype.delete(value)

Remove the element equal to this value in Set Set.prototype.has(value) would return before this operation (that is, if the element exists, return true , otherwise return false ). Set.prototype.has(value) will return to false .

let mySet = new Set()
mySet.add(1) // Set [ 1 ]
mySet.add(5) // Set [ 1, 5 ]
mySet.delete(5) // true,  从set中移除5
mySet.size // 1

• Set.prototype.has(value)

Returns a Boolean value, indicating whether the value exists Set

let mySet = new Set()

mySet.add(1) // Set [ 1 ]
mySet.add(5) // Set [ 1, 5 ]

mySet.has(1) // true
mySet.has(3) // false

mySet.delete(5) // true,  从set中移除5
mySet.has(5) // false, 5已经被移除

mySet.size // 1, 刚刚移除一个值

Map()

• Map()

Used to create Map objects

let myMap = new Map()

• Map.prototype.size

Returns the Map of key/value pairs of the 06084e94ad6fa8 object.

let myMap = new Map()
let keyString = 'a string'
myMap.set(keyString, "和键'a string'关联的值")
myMap.size //1

• Map.prototype.clear()

Remove all key/value pairs of the Map

myMap.clear()

• Map.prototype.delete(key)

If Map object, remove it and return true ; otherwise, if the element does not exist, return false . Subsequent calls to Map.prototype.has(key) will return false

let keyString = 'a string'
myMap.set(keyString, "和键'a string'关联的值")
myMap.delete('a string') //true
myMap.delete('xhs') //false(因为没有set)

• Map.prototype.get(key)

Returns the value corresponding to the key, if it does not exist, returns undefined .

myMap.get(keyString) // "和键'a string'关联的值"

• Map.prototype.has(key)

Returns a Boolean value indicating Map instance contains the value corresponding to the key.

myMap.has('a string') // true

• Map.prototype.set(key, value)

Set the value of the key in the Map Return the Map object.

myMap.set(keyString, "和键'a string'关联的值")

let myMap = new Map()
let keyString = 'a string'
myMap.set(keyString, "和键'a string'关联的值")
myMap.size //1
myMap.get(keyString) // "和键'a string'关联的值"
myMap.has('a string') // true
myMap.delete('a string') //true
myMap.clear()

Self-test

One: The difference between Map and Set

---

2: Find the union and intersection of

Problem analysis

One,

Answer:

The Set object is a collection of values, and the Map object is a collection of key-value pairs. The elements of the Set object will only appear once, that is, the elements in the Set are unique. Since the Map object has duplicate key values, the later ones will overwrite the previous ones, so the key is relatively unique

,

Answer:

const array1 = [1, 3, 5, 7, 9]
const array2 = [2, 3, 4, 5, 6]

const s1 = new Set([...array1, ...array2]) //并集
let Union = [...s1]
console.log(Union) // [1, 3, 5, 7, 9, 2, 4, 6]

const s2 = new Set(array1) //交集
const Intersection = array2.filter((item) => s2.has(item))
console.log(Intersection) // [3, 5]