ES6---扩展运算符和rest‘...’(三点运算符)，在数组、函数、set/map等中的应用

旧城等待， 2022-06-05 23:42 148阅读 0赞

ES6新增的三点运算符，是由三个点表示，在数组中扮演着重要的角色，可以对数组进行合并与分解、可以对set等数据结构进行转换、可以对函数参数进行简化表示，接下来，我们一起揭开其神秘面纱…

--------------------

<table style="width:946px; border-collapse:collapse; border-spacing:0px; border:1px solid rgb(238,238,238); color:rgb(63,63,63); font-family:&quot;microsoft yahei&quot;; font-size:15px"> 
 <tbody style=""> 
  <tr style=""> 
   <td style="padding:8px; line-height:20px; vertical-align:top; border:1px solid rgb(238,238,238)"> 作为rest参数，三点运算符可以函数，解构赋值等方面发挥重要作用。‘人如其名’，rest表示剩下的，它把剩下的任意数量的参数推入数组，所以也继承了数组的方法。rest参数只能出现在最后一位，不然会报错，当然以扩展运算的身份出现时另当别论。</td> 
  </tr> 
 </tbody> 
</table>

--------------------

let arr=[1,2,3];
    console.log(...arr);//1, 2, 3返回数组中的各项
    
    
    let a=[2,3];
    console.log(1,...a,4);//1,2,3,4扩展运算符可以放在中间
    
    
    let divs=document.querySelectorAll('div');
    [...divs];//Array[300]，[]可以将divs转为数组解构；
    console.log(...divs);//div1,div2....遍历divs各项
    
    
    let set=new Set([1,2,3,3]);
    [...set];//返回数组[1,2,3]，可以将set数据结构转化为数组
    
    
    let map=new Map([[1,'a'],[2,'b'],[3,'c']]);
    [...map.keys];//返回[1,2,3],属性数组；
    [...map.values];//返回[a,b,c],value数组
    
    ///////////////
    [...'wbiokr'];//["w", "b", "i", "o", "k", "r"]遍历字符串，返回各个字符；
    
    let str='abc';
    ['aaa',...str,'ccc'];//[aaa, a, b, c, ccc]扩展运算符位置比较任性
    
     
      
       1
       2
       3
       4
       5
       6
       7
       8
       9
       10
       11
       12
       13
       14
       15
       16
       17
       18
       19
       20
       21
       22
       23
       24
       25
       26
       27

<table style="width:946px; border-collapse:collapse; border-spacing:0px; border:1px solid rgb(238,238,238); color:rgb(63,63,63); font-family:&quot;microsoft yahei&quot;; font-size:15px"> 
 <tbody style=""> 
  <tr style=""> 
   <td style="padding:8px; line-height:20px; vertical-align:top; border:1px solid rgb(238,238,238)"> 三点的扩展运算符，把数组或者类数组对象展开成一系列逗号隔开的值序列，它好比rest参数时候的逆运算。</td> 
  </tr> 
 </tbody> 
</table>