ES6 (7) — Set & Map

Time:2021-4-19

catalog

  • Set data structure

    • Declaration set
    • Set method

      • Store data
      • Delete data
      • wipe data
      • Find data
      • Size length
      • Read data

        • get API & keys API & values API & entries API
        • forEach API
        • for-of API
      • Modify data
    • Array de duplication ES6 can be handled with set
  • Map data structure (Dictionary type)

    • The keys of previous objects are all strings. Will there be an error?
    • The key of a map can be of any type
    • If you instantiate a map object
    • Map method

      • Add / edit data
      • Delete data
      • wipe data
      • Find data
      • Size length
      • Read data

        • get API & keys API & values API & entries API
        • forEach API
        • for-of API
    • The difference between map and object
  • Weakset and weakmap
  • Es6-es10 learning map

Set data structure

ES6 can use not only object to store data, but also set to store data

  1. The members stored in set are unique and not duplicate. If there are duplicate members, they will be automatically filtered out (for array de duplication, explained below)
  2. You can chain call add, foreach, delete, clear, has, size, for of

Declaration set

//A set is declared
let s = new Set()
//Declare and initialize data. The parameters passed in are traversable objects, not just arrays
let s = new Set([1, 2, 3, 4])

Set method

Store data

add API

let s = new Set()
s.add('hello')
s.add('goodbye')
console.log(s)
// Set(2) {"hello", "goodbye"}

//You can use the short form because it returns the current object
s.add('hello').add('goodbye')
console.log(s)
// Set(2) {"hello", "goodbye"}

//The duplicate data will be filtered
s.add('hello').add('goodbye').add('hello')
console.log(s)
// Set(2) {"hello", "goodbye"}
Delete data

delete API

let s = new Set()
s.add('hello').add('goodbye')
console.log(s)
// Set(2) {"hello", "goodbye"}
s. Delete ('goodby ') // if the deletion is successful, a true value will be returned
console.log(s)
// Set(1) {"hello"}
wipe data

clear API

let s = new Set()
s.add('hello').add('goodbye')
console.log(s)
// Set(2) {"hello", "goodbye"}
s.clear()
console.log(s)
// Set(0) {}
Find data

has API

let s = new Set()
s.add('hello').add('goodbye')
console.log(s.has('hello'))
// true
Size length

size Property

let s = new Set()
s.add('hello').add('goodbye')
console.log(s.size)
// 2
Read data
keys API & values API & entries API
let s = new Set()
s.add('hello').add('goodbye')
//Returns the set of keys, and setiterator is the traverser
console.log(s.keys())
// SetIterator {"hello", "goodbye"}

//Return value collection
console.log(s.values())
// SetIterator {"hello", "goodbye"}

//Returns the set of key value pairs
console.log(s.entries())
// SetIterator{"hello" => "hello", "goodbye" => "goodbye"}
//The essence of set is still object or in the form of key value pair.
forEach API
let s = new Set()
s.add('hello').add('goodbye')
s.forEach(item => {
    console.log(item)
})
for-of API
let s = new Set()
s.add('hello').add('goodbye')
for(let item if s) {
    console.log(item)
}
Modify data

At present, there is no API for modification. You need to delete the modification before adding it

Array de duplication ES6 can be handled with set

const arr = [1,2,1,3,4,1]
const result = Array.from(new Set(arr)]
// [ 1, 2, 3, 4 ]
// or
const result = [... new Set(arr)]
// [ 1, 2, 3, 4 ]

Map data structure (Dictionary type)

The keys of previous objects are all strings. Will there be an error?

Before ES6, the key of an object is a string. You will encounter the following problem. The key is directly toString, so we can access the value by passing any object inside

const obj = {}
obj[true] = 'value'
obj[123] = 'value'
obj[{a: 1, b: 2}] = 'haha'

console.log(Reflect.ownKeys(obj)) // [ '123', 'true', '[object Object]' ]

console.log(obj[{}]) // haha
console.log(obj['[object Object]']) // haha

The key of a map can be of any type

The key below is the object

const m = new Map()

const tom = {name: 'xm'}

m.set(tom, 90)

console.log(m) // Map { { name: 'xm' } => 90 }
console.log(m.get(tom)) // 90

The following key is a number or a function

let map = new Map()
map.set(1, 'value-2')
let o = function () {
    console.log('o')
}
map.set(o, 4)
console.log(map)
// Map(2) {1 => "value-2",  ƒ => 4} ƒ Represents a function
console.log(map.get(o))
// 4

If you instantiate a map object

//A map is declared
let map = new Map()
//Declare and initialize the data. The parameters passed in are traversable objects
//However, there are conditional restrictions on the elements that can be traversed, and the key must be used
let map = new Map([1, 2, 3])
//Iterator value 1 is not an entry object

//Correct writing
//For the outer layer data satisfying the ergodic object, the inner layer array is an element of the outer layer object. The first 1 is the key and the second is the value. Similarly, the first 3 is the key and the last 4 is the value
let map = new Map([[1, 2]], [3, 4])
console.log(map)
// Map(2) {1 => 2, 3 => 4}
//Difference: the key in map can be any value, and the element in set can be any value

Map method

Map methods include set, delete, has, clear, size, foreach, for of

Add / edit data

Set API – (added is modifiable)

let map = new Map()
map.set(1, 2)
map.set(3, 4)
console.log(map)
// Map(2) {1 => 2, 3 => 4}
map.set(1, 2).set(3, 4)
console.log(map)
// Map(2) {1 => 2, 3 => 4}
map.set(1, 3)
console.log(map)
// Map(2) {1 => 3, 3 => 4}
Delete data

Delete API – (delete index value)

let map = new Map()
map.set(1, 2).set(3, 4)
// Map(2) {1 => 2, 3 => 4}
map.delete(1)
console.log(map)
// Map(1) {3 => 4}
wipe data

clear API

let map = new Map()
map.set(1, 2).set(3, 4)
// Map(2) {1 => 2, 3 => 4}
map.clear()
console.log(map)
// Map(0) {}
Find data

Has API – (find index value)

let map = new Map()
map.set(1, 2).set(3, 4)
console.log(map.has(1))
// true
Size length

size Property

let map = new Map()
map.set(1, 2).set(3, 4)
console.log(map.size)
// 2
Read data

The order of data is consistent according to the order of initialization

get API & keys API & values API & entries API
let map = new Map()
map.set(1, 2).set(3, 4)
console.log(map.get(1))
// 2
console.log(map.keys())
// MapIterator {1, 3}
console.log(map.values())
// MapIterator {2, 4}
console.log(map.entries())
// MapIterator {1 => 2, 3 => 4}
forEach API
let map = new Map()
map.set(1, 'value-2').set(3, 'value-4')
map.forEach((value, key) => {
    console.log(value, key)
})
// value-2 1
// value-4 3
for-of API
let map = new Map()
map.set(1, 'value-2').set(3, 'value-4')
//Map is a traversable object, [key, value] is consistent with the data structure defined before
for (let [key, value] of map) {
    console.log(key, value)
}
// 1 "value-2"
// 3 "value-4"

The difference between map and object

Apart from the above differences:

The difference between map and object Map Object
Type of key The key of map can be any value, including function, object and basic type The key of object can only be string and symbols
Key order The key value in map isOrderOf The key of the object is unordered, < br / > – if the object is an integer or a string of integer type, it is arranged in the order from small to large, and the rest of the data structures are arranged in the order of input. < br / > – if there are integers and other data types in the object, the integers are placed at the top
Statistics of key value pairs You can get the number of key value pairs of a map directly through the size attribute Object can only be calculated manually
Traversal of key value pairs Map can be iterated directly, and the iteration of object needs to obtain its key array Object traversal method is not as many as map
performance Map has a performance advantage in scenarios involving frequent addition and deletion of key value pairs

Weakset and weakmap

Not commonly used, API is the same

Difference between weakset and set:

  • Stored data can only be objects

Difference between weakmap and map:

  • Only keys of object type can be accepted

Learning territory

ES6 (7) -- Set & Map

Recommended Today

Envoy announced alpha version of native support for windows

Author: sunjay Bhatia Since 2016, porting envoy to the windows platform has been an important part of the projectOne of the goalsToday, we are excited to announce the alpha version of envoy’s windows native support. The contributor community has been working hard to bring the rich features of envoy to windows, which is another step […]