Spread operator

1. Spread operator … (array)

   The spread operator can split an array or array-like structure into a comma-separated sequence of arguments.

   const arr = [1, 2, 3];
   console.log(...arr) //result is 1 2 3

   Note that the spread operator unpacks [ ] not a value, but a sequence. That is, something like var a =...obj; is wrong, because there is no such thing as var a = 1, 2, 3;. But the spread operator can be used for destructuring assignments.

   
   

   Use of spread operator:

   1. Pass a sequence of arguments to a function

      let arr = [1, 2, 3];
      function getMax(a, b, c){
          console.log(b);
      }
      getMax(...arr);
      Math.max(...arr);

      
      

   2. Merging of arrays

      const arr1 = [1, 2];
      const arr2 = [3, 4];
      
      const arr3 = arr1.concat(arr2) //The merge method in ES5. The result is [1, 2, 3, 4]
      const arr4 = [...arr, ...arr2] //The merge method in ES6. The result is [1, 2, 3, 4]

      
      

   3. Copy of array

      const arr1 = [1, 2, 3, 4];
      const arr2 = [...arr1];
      console.log(arr2); //result is [1, 2, 3, 4]

      Note that if the elements in the array are reference type elements, then this copy is also a shallow copy. If not, it is a deep copy.

      
      

   4. Convert pseudo array to real array

      const divs = document.querySelectorAll('div');
      console.log(divs); //The result is an object because it is a pseudo-array.

      const divs = document.querySelectorAll('div');
      const divArr = [...divs];
      console.log(divArr); //The result is a real array: [div, div, div]

      The arguments parameter can also be converted to a true array using this method. But since there are rest parameters, this method is unnecessary.

2. Spread operator … (object)

   Merge two objects

   let obj1 = {
       name:'Tom',
       age:18
   }
   let obj2 = {
       gender:'male',
       hobby:'football'
   }
   let obj3 = {...obj1, ...obj2};
   console.log(obj3) //result {name: 'Tom', age: 18, gender: 'male', hobby: 'football'}

   
   

   Add attributes to element objects

   1. Native JS approach

      var obj = {
          'id':'Hello',
          'className':'box',
          'style':'width:200px; height:200px; background:red'
      }
      let app = document.getElementsByTagName('div')[0]
      for(let key in obj){
          app[key]=obj[key]
          //app[key] is to be distinguished from app.key, [key] is a variable and .key is a property name. That is, app[key] is the key in the key-value pair.
           //[key] of obj[key] is the value in the key-value pair. It's not the key because the obj object is in the for in loop.
      }

      
      

   2. Spread operator method

      var obj = {
          'id':'Hello',
          'className':'box',
          'style':'width:200px; height:200px; background:red'
      }
      let app = document.getElementsByTagName('div')[0]
      app.innerHTML="<div "+...obj+"></div>" //Note here...obj can only be used in React.