js扩展运算符（spread）是三个点（...）

Bertha 。 2023-06-03 10:56 15阅读 0赞

作用：将一个数组转为用逗号分隔的参数序列。

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> 
    <div>
      4 
    </div> 
    <div>
      5 
    </div> 
    <div>
      6 
    </div> 
    <div>
      7 
    </div> 
    <div>
      8 
    </div> 
    <div>
      9 
    </div> 
    <div>
      10 
    </div> </td> 
   <td> 
    <div> 
     <div> 
      <code>//该运算符主要用于函数调用。&lt;br&gt;function push(array, ...items) { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>array.push(...items);</code> 
     </div> 
     <div> 
      <code>}</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>function</code>&nbsp; 
      <code>add(x, y) { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>return</code>&nbsp; 
      <code>x + y;</code> 
     </div> 
     <div> 
      <code>}</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>var</code>&nbsp; 
      <code>numbers = [4, 38];</code> 
     </div> 
     <div> 
      <code>add(...numbers)&nbsp;</code> 
      <code>// 42</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> 
    <div>
      4 
    </div> 
    <div>
      5 
    </div> 
    <div>
      6 
    </div> 
    <div>
      7 
    </div> 
    <div>
      8 
    </div> 
    <div>
      9 
    </div> </td> 
   <td> 
    <div> 
     <div> 
      <code>//扩展运算符取代apply方法的一个实际的例子，应用Math.max方法，简化求出一个数组最大元素的写法。</code> 
     </div> 
     <div> 
      <code>// ES5 的写法</code> 
     </div> 
     <div> 
      <code>Math.max.apply(</code> 
      <code>null</code> 
      <code>, [14, 3, 77])</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>// ES6 的写法</code> 
     </div> 
     <div> 
      <code>Math.max(...[14, 3, 77])</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>// 等同于</code> 
     </div> 
     <div> 
      <code>Math.max(14, 3, 77);</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> 
    <div>
      4 
    </div> 
    <div>
      5 
    </div> 
    <div>
      6 
    </div> 
    <div>
      7 
    </div> 
    <div>
      8 
    </div> 
    <div>
      9 
    </div> 
    <div>
      10 
    </div> </td> 
   <td> 
    <div> 
     <div> 
      <code>//通过push函数，将一个数组添加到另一个数组的尾部</code> 
     </div> 
     <div> 
      <code>// ES5的 写法</code> 
     </div> 
     <div> 
      <code>var</code>&nbsp; 
      <code>arr1 = [0, 1, 2];</code> 
     </div> 
     <div> 
      <code>var</code>&nbsp; 
      <code>arr2 = [3, 4, 5];</code> 
     </div> 
     <div> 
      <code>Array.prototype.push.apply(arr1, arr2);</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>// ES6 的写法</code> 
     </div> 
     <div> 
      <code>var</code>&nbsp; 
      <code>arr1 = [0, 1, 2];</code> 
     </div> 
     <div> 
      <code>var</code>&nbsp; 
      <code>arr2 = [3, 4, 5];</code> 
     </div> 
     <div> 
      <code>arr1.push(...arr2);</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> 
    <div>
      4 
    </div> 
    <div>
      5 
    </div> 
    <div>
      6 
    </div> 
    <div>
      7 
    </div> 
    <div>
      8 
    </div> 
    <div>
      9 
    </div> 
    <div>
      10 
    </div> 
    <div>
      11 
    </div> 
    <div>
      12 
    </div> 
    <div>
      13 
    </div> 
    <div>
      14 
    </div> 
    <div>
      15 
    </div> 
    <div>
      16 
    </div> 
    <div>
      17 
    </div> </td> 
   <td> 
    <div> 
     <div> 
      <code>//合并数组</code> 
     </div> 
     <div> 
      <code>// ES5</code> 
     </div> 
     <div> 
      <code>[1, 2].concat(more)</code> 
     </div> 
     <div> 
      <code>// ES6</code> 
     </div> 
     <div> 
      <code>[1, 2, ...more]</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>var</code>&nbsp; 
      <code>arr1 = [</code> 
      <code>'a'</code> 
      <code>,&nbsp;</code> 
      <code>'b'</code> 
      <code>];</code> 
     </div> 
     <div> 
      <code>var</code>&nbsp; 
      <code>arr2 = [</code> 
      <code>'c'</code> 
      <code>];</code> 
     </div> 
     <div> 
      <code>var</code>&nbsp; 
      <code>arr3 = [</code> 
      <code>'d'</code> 
      <code>,&nbsp;</code> 
      <code>'e'</code> 
      <code>];</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>// ES5的合并数组</code> 
     </div> 
     <div> 
      <code>arr1.concat(arr2, arr3);</code> 
     </div> 
     <div> 
      <code>// [ 'a', 'b', 'c', 'd', 'e' ]</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>// ES6的合并数组</code> 
     </div> 
     <div> 
      <code>[...arr1, ...arr2, ...arr3]</code> 
     </div> 
     <div> 
      <code>// [ 'a', 'b', 'c', 'd', 'e' ]</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> </td> 
   <td> 
    <div> 
     <div> 
      <code>扩展运算符将字符串转为真正的数组</code> 
     </div> 
     <div> 
      <code>[...</code> 
      <code>'hello'</code> 
      <code>]</code> 
     </div> 
     <div> 
      <code>// [ "h", "e", "l", "l", "o" ]</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

转载于:https://www.cnblogs.com/robinunix/p/11401751.html