javaScript learning notes ES6

Keywords: Javascript html5 Vue.js

;

1, Remaining parameters

1. Understanding residual parameters

The remaining parameters are always arrays, even if there are no values, they are empty arrays

// grammar
        const add = (x, y, ...args) => {
            console.log(x, y, args)   // w 4 [5,45]
        }
        add('w', 4, 5, 45)

2. Remaining parameter considerations

  • Remaining parameters of arrow function: parentheses cannot be omitted even if there is only one remaining parameter in the parameter part of arrow function
  • Replace arguments with the remaining parameters to get the actual parameters
  • Location of remaining parameters: the remaining parameters can only be the last parameter, and there can be no other parameters after that, otherwise an error will be reported

3. Application of residual parameters

The remaining parameters are used in conjunction with deconstruction assignment

        const [b, z, ...arge] = [2, 3, 4, 5, 6, 6]
        console.log(b, z, arge) //2 3 (4) [4, 5, 6, 6]

        const fn = ([a, ...rest]) => {
            console.log(a, rest)
        }
        fn([2, 3, 4, 5])
        const { a, bs, ...agr } = { a: 10, bs: 'M', l: 'T', k: '55' }
        console.log(agr) //{l: "T", k: "55"}

2, Usage of expansion operator

Basic usage:
console.log(Math.max(...[4, 3, 4, 5, 6])) //6

1. How to distinguish between remaining parameters and expansion operators

    Expand operator:[1, 3, 4]=> 1, 2, 3
    Remaining parameters: 1, 2, 3=> [1, 2, 3]

2. Application of array expansion operator

Basic Usage   const str=...[1,3,3,45]  //1,3,3,45

    //Copy array
        const nw = [2, 34, 4, 5]
        const ol = [...nw]
        ol[2] = 20000
        console.log(nw) // [2, 34, 4, 5]

 // Merge array
        const c = [2, 3, 4, 54]
        const m = [2, 4, 5, 6,]
        console.log([...c, ...m]) //[2, 3, 4, 54, 2, 4, 5, 6]

        // String to array
        const str = 'HELLO'
        console.log([...str]) //["H", "E", "L", "L", "O"]

   //Class array to array (arguments, NodeList)

        function fuu() {
            console.log([...arguments]) //[4, 34, 5, 7678]
        }
        fuu(4, 34, 5, 7678)
    //NodeList 
        console.log(document.querySelectorAll('p'));     //NodeList(3) [p, p, p]
        console.log([...document.querySelectorAll('p')]) //[p, p, p]

3. Object's extension operator

Object cannot be expanded directly. It needs to be expanded in {}

       const tem = {
            name: 'principal',
            age: '500'
        }
        const tem1 = {
            name: 'Big pot',
            age: 80
        }
        // The new object has all the attributes. The attributes are the same, and the latter overrides the former
        console.log({ ...tem, ...tem1 }) //{name: "big pot", age: 80}

1. Object deployment considerations

If you expand an empty object, there is no effect
If the expanded object is not an object, it will be automatically converted to an object and its attributes will be listed

    console.log((....1)//{}
    console.log(new Object(1));
    console.log(....undefined })//{}
    console.log(4...null })//{}
    console.log((....true})//{}

If the expansion operator is followed by a string, it will be automatically converted to an array like object, so the returned object is not empty

    console.log({...'HELLO'}) //{0: "H", 1: "E", 2: "L", 3: "L", 4: "O"}
    console.log({...[3,4,5,6]}) //{0: 3, 1: 4, 2: 5, 3: 6}

3, set and Map data deconstruction

Set

1. What is Set

Collection ()
An array is a series of ordered data sets: [1,3,4,55]
Set is a series of unordered data sets without duplicate values

There are two ways to create an array:[1,2,3,4],new.Array(1,3,4,5)
establish Set Method: const st = new Set(); // grammar

Set does not have a subscript to indicate each value, so set is unordered, and its members cannot be accessed through subscripts like arrays

2. Methods and properties of the Set instance

     1,Method( add)
        const s = new Set()
        s.add(1).add(3)
        console.log(s) //Set(2) {1, 3}
     2,has(is Judge members)
        console.log(s.has(2)) //false
        console.log(s.has(1)) //true
     3,delete(Delete member)
        // If you use delete to delete a member that does not exist, nothing will happen and no error will be reported
        s.delete(1)
        console.log(s) //Set(1) {3}

      4,clear(Delete all)
        s.clear();
        console.log(s) //Set(0) {}

      5,forEach
        const obj = { name: '55' }
        // Non arrow function, forEach parameter 2, can change this
        s.add(200).add(500).add(6)
        s.forEach((value, key, set) => {
            // value=key in Set
            console.log(value, set)
            console.log(this) //window
        })
      6, attribute(size)
        console.log(s.size) //3

3. Arguments to the Set constructor

     Array mode
        const ar = new Set([1, 32, 3, 4, 5, 1])
        console.log(ar) //Set(5) {1, 32, 3, 4, 5}
     character string
        const ar1 = new Set('HELLO')
        console.log(ar1) //Set(4) {"H", "E", "L", "O"}
        // arguments
        function fun() {
            console.log(new Set(arguments)) //Set(4) {14, 3, 4, 5}
        }
        fun(14, 3, 4, 5)
     NodeList
        const ar2 = new Set(document.querySelectorAll('p'))
        console.log(ar2) //Set(3) {p, p, p}
        //Set
        const a = new Set([2, 4, 5, 6])
        const b = new Set(s) //copy
        console.log(b)

4. Set precautions

1. Judge duplicate value
console.log(1 === 1) //true
console.log(NaN )=== NaN) // false
//Set's judgment of duplicate values basically follows strict equality (= = =) / / but the judgment of NaN is different from = = =. NaN in set is equal to NaN

5. Usage scenario

1) Array or string de duplication

 console.log([...new Set([1, 1, 3, 4, 5, 33, 3])]) //(5) [1, 3, 4, 5, 33]

2) Without subscript access, you can use forEach to traverse
3) In order to use the methods and attributes provided by Set (add delete clear has forEach size, etc.)
4) String de duplication

        const str = new Set('bbdshdhhfss')
        console.log([...str].join('')) //bdshf

Map

1. Recognize map

Map s and objects are collections of key value pairs

 const m = new Map() // grammar

2. Difference between Map and object

Objects generally use strings as key values
const person={name:"",age:"30"}

Basic data type:Numbers and characters,Boolean undefined, nul ;  
Reference data type:object(1.1,Functions Set, Map etc.) ===>All of the above can be used as Map Key value of;
const objs = { name: '512', [{}]: 'Objeck' }

const m = new Map()
m.set({ name: '25' }, 18)
m.set(true, 18)
m.set([1, 2, 3, 4], 18)
console.log(m)  //Map(3) {{...} => 18, true => 18, Array(4) => 18}

3. Map instance properties and methods

     add to(set)
        //If a new member added by set already exists, the newly added key value pair overwrites the existing one
        m.set('age', 18)

      obtain(get)
        console.log(m.get('age')) //18

     has
        console.log(m.has('age'))// true

      delete(delete)
        m.delete('age')

     Clear( clear)
        m.clear()
     Traversal( forEach)

     Attributes( size)

4. Map constructor parameters (array, Set, map)

Map array can only be transferred to two-dimensional array, and must reflect keys and values

       console.log(new Map([['name', 'principal'], ['age', '19']])) //Map (2) {"name" = > "principal", "age" = > "19"}
      //Set and Map as parameters
        const bb = new Map([['name', 'principal'], ['age', '19']])
        const aa = new Set([['name', 'principal'], ['age', '19']])
        console.log(new Map(bb)) //Map (2) {"name" = > "principal", "age" = > "19"}
        console.log(new Map(aa)) //Map (2) {"name" = > "principal", "age" = > "19"}

5. Precautions

1) . determine whether the key names are the same. / / strict equality (= = =) / / the exception is NaN, and NaN in the map is also equal to Nan //console.log(NaN===NaN):

        const m=new Map:
        m.set(NaN,1).set(NaN,2);
        console.log(m);

2) When to use Map: if you only need a key - > value structure, or need a value other than a string as a key, it is more appropriate to use Map

6. Map application

        const [p1, p2, p3] = document.querySelectorAll('p')
        const p = new Map([[p1, 'red'], [p2, 'yellow'], [p3, 'grenn']])
        p.forEach((item, el) => {
            el.style.color = item
        })

Posted by freddykhalid on Thu, 02 Sep 2021 19:10:42 -0700