es6 destructuring assignment + remaining parameters + spread operator

es6 destructuring assignment

Deconstruction: Deconstruct the data and assign values: Assign values to variables. es6 allows to extract values from the array and assign values to variables according to the corresponding positions. Objects can also be deconstructed

1. Array destructuring

let arr1 = [1,2,3];
let [a,b,c] = arr1;// [a,b,c]表示解构，而不是数组
console.log(a);// 1
console.log(b);// 2
console.log(c);// 3

[a,b,c] Match the data in the array one by one

The number of deconstructed variables on the left is less than the number of data in the right array

Still one-to-one correspondence
```
let arr1 = [1,2,3];
let [a,b] = arr1;
console.log(a);// 1
console.log(b);// 2
```
The number of deconstructed variables on the left is greater than the number of data in the right array

There are more variables on the left than deconstructed variables because they are just declared without assignment, so they are undefined
```
let arr1 = [1,2,3];
let [a,b,c,d] = arr1;
console.log(a);// 1
console.log(b);// 2
console.log(c);// 3
console.log(d);// undefined
```

2. Object deconstruction

Object deconstruction is deconstructed in accordance with attribute matching

Method 1: One-to-one correspondence of attributes

let obj = {
      
       uname: 'zt', age: 19, sex: '男'};
let {
      
       uuname, age, sex} = obj;// { uuname, age, sex}为对应的解构变量
console.log(uuname);// undefined
console.log(age);// 19
console.log(sex);// 男

The variable name of the deconstructed variable on the left must correspond to the property name of the object on the right to get the value, otherwise undefined

Method 2: On the basis of one-to-one correspondence of attributes, alias deconstructed variables
```
let obj = {
      
       uname: 'zt', age: 19, sex: '男'};
let {
      
       uname: myName} = obj;
console.log(myName);// zt
console.log(uname);// uname is not defined
```
After the deconstructed variable on the left is aliased, the variable created is myName, but the variable uname is not created, so the variable that can actually be used is myName

3. Remaining parameters

When the actual parameter is greater than the formal parameter, the traditional function can use the function built-in attribute object arguments to obtain data, but the arrow function does not have the arguments function object, and it is further implemented by the remaining parameters.

use

The formal parameter uses...args to receive an array of data

Case study

 var fn = (...args) => {
        
        
        var total = 0;
        args.forEach(item => total += item);
        return total;
    }
    console.log(fn(1,2,3));// 6

Usage is similar to arguments, both are a pseudo-array

The remaining parameters are used with array destructuring
1. Used to obtain the remaining parameter data
```
const arr = [1,2,3];
let [a,...b] = arr;
console.log(a);// 1
console.log(b);// [2,3]
```
  b gets the remaining data matched in the array
2. Note: Since object deconstruction requires attribute matching, the remaining parameters cannot be used for matching.

4. Spread operator

The spread operator can convert an array or object into a sequence of parameters separated by commas
Different from the remaining parameters, the remaining parameters put the remaining parameters in an array, while the spread operator splits the array into a comma-separated sequence of parameters. But both are represented by three dots (...)

usage:

let arr = [1,2,3];
// ...arr; // 1,2,3
console.log(...arr); // 1 2 3
// 等价于
console.log(1,2,3);// 1 2 3
// 由于console.log方法将逗号作为参数的分隔符，因此打印结果为1 2 3而不是1,2,3

application:
1. Merge array
  
  Since the spread operator can convert an array into a comma- separated parameter sequence, multiple arrays can be converted into multiple parameter sequences. The parameter sequences are connected by commas, and [] is added to form a new array
  1. method one:
```
let arr1 = [1,2,3];
let arr2 = [4,5,6];
let arr3 = [...arr1, ...arr2];
 console.log(arr3);// [1,2,3,4,5,6];
```
  2. Method Two:
    
    Because the push() method parameter is multiple parameters, and the parameters are separated by commas, they can also be appended to the array, so it conforms to the result of the expansion operator to convert the array
```
let arr1 = [1,2,3];
let arr2 = [4,5,6];
arr1.push(...arr2);
console.log(arr1);
```
2. Convert the pseudo-array to a real array in order to use the corresponding method of the array
  1. Via spread operator
  Since the pseudo-array can only be read and only has the Length property, but the other property methods of the real array cannot be used, so the expansion operator can be used to convert so that the corresponding methods and properties of the array can be used
```
function fn() {
        
        
     var arr = [...arguments];
    console.log(arr);
}
fn(1,2,3);
```
  1. Through the Array.from() method
    1. Array.from(pseudo array, callback function);
    2. Parameter explanation
      1. Pseudo-array: the pseudo-array that needs to be converted
      2. Callback function: similar to the map method of an array, used to process each element after conversion, and put the processed value into the returned array
    3. use
```
let arrayLike = {
            
            
    '0': 1,
    '1': 2,
    'length': 2
}
let newArray = Array.from(arrayLike,item => item * 2);
 console.log(newArray);
```