Es6’s extended operators are simply three dots…

Retrieves all traversable properties from the parameter object and copies them to the current object

Object extension operator

Extension operators in objects (…) Use to fetch all traversable properties from an object and copy them to the current object

    let bar = {a:1.b:2 };
    letbarz = {... bar};//log--{a:1,b:2 }
                          // In this case it is equivalent to
    let bar ={a:1.b:2 }
    let baz = object.assign({},bar)  //log--{a:1,b:2 }
Copy the code

If a user-defined attribute is placed after an extension operator, the attributes of the same name inside the extension operator will be overwritten

    let bar = {a: 1.b: 2};
    letbaz = {... bar, ... {a:2.b: 4}};  // {a: 2, b: 4}
Copy the code

To write a method that allows it to pass in arguments that are indeterminate, you can use the object extension operator to make arguments as follows

  function cdd(. arg){
                console.log(arg[0]);
                console.log(arg[1]);
                console.log(arg[2]);
                console.log(arg[3]);
            }
            cdd(1.2.3);  // 1, 2, 3 // This means that multiple values can be passed in, and no error will be reported even if there are too many references in the method.
Copy the code

Deep copy is done using extended operators

Declare two arrays arr1 and arR2, and then we assign arr1 to arR2, and then we change the value of arR2, and you’ll notice that the value of arR1 also changes, because we’re referencing the memory stack, not actually assigning.

 let arr1=['www'.'a'.'com'];
            let arr2 = arr1;
            console.log(arr2);        //["www", "a", "com"]
            arr2.push('b');
            console.log(arr1);        //["www", "a", "com", "b"]   
            // This is not what we want to see. We can simply fix this problem by using the object extension operator
                
        let arr1=['www'.'a'.'com'];
            //let arr2=arr1;
            let arr2=[...arr1];   
            console.log(arr2);
            arr2.push('b');
            console.log(arr2);        //["www", "a", "com", "b"] 
            console.log(arr1);        //["www", "a", "com"]
            // In console preview, you can see that our ARR1 has not changed, simple extension operators solve this problem.
Copy the code

Deconstruct assignment & expand operators

Object destruct assignment is used to value an object as an enumerable property of the target object itself. All keys assigned to the specified object and their values are copied to the new object.

let{ x, y, ... z } = {x: 1.y: 2.a: 3.b: 4 };
        x   // log--1
        y   // log--2
        z   // log--{ a: 3, b: 4 }
// Note: Since destructuring assignment requires an object to the right of the equals sign
// So if the right side of the equals sign is undefined or null, an error will be reported
// Because they cannot be converted to objects
// Destruct assignment must be the last argument, otherwise an error will be reported... You have to put the parameters last
        let { ...z } = null;                 // Runtime error
        let { ...z } = undefined;            // Runtime error
        let { ...x, y, z } = someObject;     // error in syntax... Put the last one
        let{ x, ... y, ... z } = someObject;// Syntax error
Copy the code

If the extension operator is followed by a string

It automatically converts to an array-like object, so instead of returning an empty object {… ‘hello’} {0: “h”, 1: “e”, 2: “l”, 3: “l”, 4: “o”}

Object extension operators are equivalent to using the object.assign () method

        letaClone = { ... a };/ / is equivalent to
        let aClone = Object.assign({}, a);
Copy the code

The extension operator can be used to merge two objects.

        letab = { ... a, ... b };/ / is equivalent to
        let ab = Object.assign({}, a, b);
Copy the code

Extend an operator in an array

The spread operator is three points (…) . It is like the inverse of the REST argument, turning an array into a comma-separated sequence of arguments.

console.log(... [1.2.3])
    / / 1 2 3
console.log(1. [2.3.4].5)
    // 1, 2, 3, 4, 5
[...document.querySelectorAll('div')] 
    
      

       , 
       

        , 
        

         ] // Get all div elements
        

       

      

Copy the code

Find the largest element in an array

// ES5

Math.max.apply(null[14.3.77])
// ES6
Math.max(... [14.3.77])
/ / is equivalent to
Math.max(14.3.77);
Copy the code

Common use of extension operators in arrays

// Copy the array
const a1 = [1.2];
const a2 = a1;
a2[0] = 2;
a1  / / (2, 2)
    In the above example, 'a2' is not a clone of 'a1'
    // It is another pointer to the same data. Changes to 'A2' affect 'A1'.
Copy the code

You can convert an array to a sequence of parameters

function add(x, y) {
   return x + y;
 }
 const numbers = [4.38]; add(... numbers)//log- 42
Copy the code

Extension operators can be used to generate arrays in conjunction with destructuring assignments

const [first, ...rest] = [1.2.3.4.5];
// first // 1
// rest // [2, 3, 4, 5]
 const [first, ...rest] = ["foo"];
// first // "foo"
// rest // []

// But there is one thing to note: if you use the extension operator for array assignment
// Can only be placed in the last bit of the argument, otherwise an error will be reported.
const [...rest, last] = [1.2.3.4.5];       / / an error
const [first, ...rest, last] = [1.2.3.4.5];/ / an error
Copy the code

Extension operators can also turn strings into true arrays.

   [...'hello']
// [ "h", "e", "l", "l", "o" ]
/ / {... 'hello'}
// {0: "h", 1: "e", 2: "l", 3: "l", 4: "o"}
// If the extension operator is followed by a string
// It is automatically converted to an array-like object, so it does not return an empty object
Copy the code

What is the rest parameter? What is the default parameter?

// Rest arguments (of the form... Variable name), used to get extra arguments to a function.
// Default is the default value
/ / call the animal () method is forgot to pass parameters, the traditional approach is combined with the sentence type = type | | 'cat' to specify a default value.
function animal(type){
    type = type || 'cat'  
    console.log(type)
}
animal();
// es6
function animal(type = 'cat'){
    console.log(type)
}
animal()

/ / rest syntax
function animals(. types){
    console.log(types)
}
animals('cat'.'dog'.'fish') //["cat", "dog", "fish"]
Copy the code