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 ES6Are built-in constructorsInstantiate using new ...
Set
Map
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) , ƒ, ...} [[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: 1: => function () {}} 2: 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

20 September 2021, 03:40 | Views: 3859

Add new comment

For adding a comment, please log in
or create account

0 comments