Detailed explanation of Set object and Map object in front-end JS (probability, creation, use method, etc.)

Map and Set

  • Map and Set are two new data types in ES6
  • Are built-in constructors
  • Instantiate using new

Set

  • It is used in conjunction with new

    const s = new Set()
    console.log(s)
    
    /*
         Set(0) {}
            [[Entries]]
            No properties
            size: (...)
            __proto__: Set
    */
    
  • Is a data set

  • We can add data directly to the inside when we are new

    // When instantiating, add data directly in the form of an array
    const s = new Set([1, 2, 3, {}, function () {}, true, 'hwllo'])
    console.log(s)
    
    /*
            Set(7) {1, 2, 3, {...}, ƒ, ...}
                [[Entries]]
                0: 1
                1: 2
                2: 3
                3: Object
                4: function () {}
                5: true
                6: "hwllo"
                size: (...)
                __proto__: Set
            
    */
    
  • It looks like an array like data structure, but it's not. It's a Set data structure

Common methods and properties

  • size: used to obtain how much data is in the data structure

    const s = new Set([1, 2, 3, {}, function () {}, true, 'hwllo'])
    console.log(s.size) // 7
    
    • It looks like a data structure similar to the array data type, and we also see the length attribute
    • However, it cannot be used. To obtain the number of members in the data type, you need to use the size attribute
  • add: used to append data to this data type

    const s = new Set()
    s.add(0)
    s.add({})
    s.add(function () {})
    console.log(s.size) // 3
    
    • This method is used to append data to the data type
  • delete: deletes a data in the data structure

    const s = new Set()
    s.add(0)
    s.add({})
    s.add(function () {})
    
    s.delete(0)
    
    console.log(s.size) // 2
    
  • Clear: clear all data in the data structure

    const s = new Set()
    s.add(0)
    s.add({})
    s.add(function () {})
    
    s.clear()
    
    console.log(s.size) // 0
    
  • has: query whether there is any data in the data deconstruction

    const s = new Set()
    s.add(0)
    s.add({})
    s.add(function () {})
    
    console.log(s.has(0)) // true
    
  • forEach: the method used to traverse the Set data structure

    const s = new Set()
    s.add(0)
    s.add({})
    s.add(function () {})
    
    s.forEach(item => {
        console.log(item) // 0   {}   function () {}
    })
    
  • The method is almost introduced. There is a problem, that is

  • Our method is either add, delete, or query without getting

  • Because to get the data in the Set structure, you need to use a... Expansion operator

  • Put everything in it into an array, and then get it

    const s = new Set([1, 2, 3, 4, 5, 6])
    const a = [...s]
    console.log(a) // (6) [1, 2, 3, 4, 5, 6]
    
    console.log(a[0]) // 1
    console.log([...s][0]) // 1
    
  • Another problem arises. new needs to be passed in the form of an array

  • Then, when obtaining, it should be converted to the form of array

  • So why don't I define an array from the beginning? What do I want to do with this Set data type

  • This has to mention the characteristics of a Set

  • Set does not allow duplicate data to be stored

    const s = new Set([1, 2, 3])
    
    s.add(4)  // At this point, the size is 4
    s.add(1)  // At this point, the size is 4
    s.add(2)  // At this point, the size is 4
    s.add(3)  // At this point, the size is 4
    

Map

  • It should also be used with new

  • Is a data set, which is very similar to an object

    const m = new Map()
    console.log(m)
    
    /*
         Map(0) {}
            [[Entries]]
            No properties
            size: (...)
            __proto__: Map
    */
    
  • No matter what is stored in our object, the key must be a string type

  • However, in the Map, our key can be any data type

  • We also call Map (value = value data type)

    const m = new Map([[{}, {}], [function () {}, function () {}], [true, 1]])
    console.log(m)
    
    /*
        Map(3) {{...} => {...}, ƒ => ƒ, true => 1}
            [[Entries]]
            0: {Object => Object}
            1: {function () {} => function () {}}
            2: {true => 1}
            size: (...)
            __proto__: Map
    
    */
    

Common methods and properties

  • size: used to obtain the number of data in the data type

    const m = new Map([[{}, {}], [function () {}, function () {}], [true, 1]])
    console.log(m.size) // 3
    
  • Delete: used to delete a data in the data set

    const m = new Map([[{}, {}], [function () {}, function () {}], [true, 1]])
    m.delete(true)
    
    console.log(m.size) // 2
    
  • Set: used to add data to the data set

    const m = new Map()
    m.set({ name: 'Jack' }, { age: 18 })
    console.log(m.size) // 1
    
  • Get: used to get a data in the data set

    const m = new Map()
    
    m.set({ name: 'Jack' }, { age: 18 })
    m.set(true, function () {})
    console.log(m.get(true)) // function () {}
    
  • Clear: clear all data in the data set

    const m = new Map()
    
    m.set({ name: 'J ack' }, { age: 18 })
    m.set(true, function () {})
    
    m.clear()
    
    console.log(m.size) // 0
    
  • has: used to judge whether a data exists in the data set

    const m = new Map()
    
    m.set({ name: 'Jack' }, { age: 18 })
    m.set(true, function () {})
    
    console.log(m.has(true)) // true
    

Tags: Javascript node.js data structure set map

Posted on Mon, 20 Sep 2021 03:40:42 -0400 by mulysa