Set basic usage

Time:2022-5-27

The main application scenarios of set and map are data reorganization and data storage. Set is a data structure called set, and map is a data structure called dictionary


Set

A new data structure added in ES6 is similar to array, but the members areUnique and disorderedSet itself is a constructor used to generate a set data structure

//Super obvious sign: disorder and uniqueness
const s = new Set()
[1,2,3,4,3,2,1].forEach(x=>s.add(x))
for(let i of s){
  console.log(i) // 1 2 3 4
}
//Duplicate objects of de duplication array
let arr = [1,2,3,2,1]
console.log([...new Set(arr)]) //[1,2,3]

The set object allows you to store unique values of any type, whether original values or object references.

When adding a value to set, no type conversion occurs, so 5 and “5” are two different values. Set determines whether two values are different internally. The algorithm used is called “same value zero equality”, which is similar to the exact equality operator (= = =). The main difference isNan is equal to itself, while the exact equality operator assumes that Nan is not equal to itself.

let set = new Set();
let a = NaN;
let b = NaN;
set.add(a);
set.add(b);
set // Set {NaN}

let set1 = new Set()
set1.add(5)
set1.add('5')
console.log([...set1])    // [5, "5"]

Set instance properties and common methods

attribute
//Constructor: constructor size: number of elements
let set = new Set([1, 2, 3, 2, 1])
console. Log (set. Size) // 3 (the number of elements after de duplication is returned here). Note: set Length is undefined
Array. The from method can convert the set structure into an array
const items = new Set([1, 2, 3, 2])
const array = Array.from(items)
console.log(array)    // [1, 2, 3]
//Or
const arr = [...items]
console.log(arr)    // [1, 2, 3]
method
  • Operation method: add (value): add — equivalent to push in array. Delete (value): delete — value in the collection. Has (value): judge whether value exists in the set. Clear (): clear the collection.

    let set = new Set()
    set.add(1).add(2).add(1)
    set.has(1)    // true
    set.has(3)    // false
    set.delete(1)    
    set.has(1)    // false
    • Traversal method (the traversal order is the insertion order). Keys (): returns an iterator that contains all the keys in the collection.
      Values (): returns an iterator that contains all values in the collection.
      Entries (): returns a key value pair iterator containing all elements in the set object
      Foreach (callbackfn, thisarg): used to perform callbackfn operations on collection members. If the thisarg parameter is provided, this in the callback will be this parameter,no return value

      let set = new Set([1, 2, 3])
      console.log(set.keys())    // SetIterator {1, 2, 3}
      console.log(set.values())    // SetIterator {1, 2, 3}
      console.log(set.entries())    // SetIterator {1, 2, 3}
      
      for (let item of set.keys()) {
      console.log(item);// 1    2     3
      }    
      for (let item of set.entries()) {
       console.log(item);// [1, 1]    [2, 2]    [3, 3]
      }    
      
      set.forEach((value, key) => {
      console.log(key + ' : ' + value)// 1 : 1    2 : 2    3 : 3
      })    
      console.log([...set])    // [1, 2, 3]
  • Set can be traversed by default, and the default iterator generation function is the values () method
Set.prototype[Symbol.iterator] === Set.prototype.values    // true

//Therefore, set can use map and filter methods
let set = new Set([1, 2, 3])
set = new Set([...set].map(item => item * 2))
console.log([...set])    // [2, 4, 6]

set = new Set([...set].filter(item => (item >= 4)))
console.log([...set])    //[4, 6]
  • Therefore, set can easily realize intersection, union and difference
let set1 = new Set([1, 2, 3])
let set2 = new Set([4, 3, 2])

let intersect = new Set([...set1].filter(value => set2.has(value)))
let union = new Set([...set1, ...set2])
let difference = new Set([...set1].filter(value => !set2.has(value)))

console.log(intersect)    // Set {2, 3}
console.log(union)        // Set {1, 2, 3, 4}
console.log(difference)    // Set {1}

Recommended Today

Vue2 technology finishing 3 – Advanced chapter – update completed

3. Advanced chapter preface Links to basic chapters:https://www.cnblogs.com/xiegongzi/p/15782921.html Link to component development:https://www.cnblogs.com/xiegongzi/p/15823605.html 3.1. Custom events of components 3.1.1. Binding custom events There are two implementation methods here: one is to use v-on with vuecomponent$ Emit implementation [PS: this method is a little similar to passing from child to parent]; The other is to use ref […]