剩余參數(shù)怎樣使用？剩余參數(shù)計(jì)算多個(gè)數(shù)值

在函數(shù)中，當(dāng)函數(shù)實(shí)參個(gè)數(shù)大于形參個(gè)數(shù)時(shí)，剩余的實(shí)參可以存放到一個(gè)數(shù)組中。剩余參數(shù)語法允許將一個(gè)不確定數(shù)量的參數(shù)表示為數(shù)組。用這種不確定參數(shù)的定義方式聲明一個(gè)未知參數(shù)個(gè)數(shù)的函數(shù)非常方便。下面將對剩余參數(shù)進(jìn)行詳細(xì)講解。

在ES6之前，JavaScript函數(shù)內(nèi)部有一個(gè)arguments對象，可以使用這個(gè)對象來獲取所有實(shí)參?，F(xiàn)在ES6提供了一個(gè)新的對象來實(shí)現(xiàn)這一功能，并且該對象也可以很方便地獲取函數(shù)中除開始參數(shù)之外的其余參數(shù)。

下面通過代碼演示如何獲取剩余參數(shù)，示例代碼如下。

<script>
  function sum(first, ...args) {
    console.log(first)； //輸出結(jié)果：10
    console.log (args)； //輸出結(jié)果：[20,30]
  }
  sum(10, 20, 30)
</script>

上述代碼中，第2行代碼使用function關(guān)鍵字定義sum0函數(shù)，該函數(shù)有兩個(gè)形參。第1個(gè)參數(shù)聲明了一個(gè)變量first，剩余的參數(shù)會(huì)被..args收集成一個(gè)數(shù)組，這就是剩余參數(shù)。第6行代碼在函數(shù)調(diào)用時(shí)傳遞了3個(gè)實(shí)參，分別為10、20和30。當(dāng)調(diào)用sum0函數(shù)后，第1個(gè)形參變量的值first對應(yīng)實(shí)參10.第2個(gè)形參args在前面加上了3個(gè)點(diǎn)“…”，表示args接收剩余的實(shí)參，即數(shù)組[20, 30]。

剩余參數(shù)是程序員自定義的一個(gè)普通標(biāo)識符，接收剩余參數(shù)的變量是一個(gè)數(shù)組(Amray的實(shí)例)，能夠直接使用所有的數(shù)組方法，例如 sort0、map()、forEach()和 pop()等方法。

下面通過代碼演示使用剩余參數(shù)計(jì)算多個(gè)數(shù)值的求和結(jié)果，示例代碼如下。

<script>
  const sum = (...args) => (
    let total = 0;
    args.forEach((item) => (
      total += item;
    ));
    // 等價(jià)于args.forBach(item=>total+=item)；
    return total;
  };
  console.log(sum(10, 20));     //輸出結(jié)果：30
  console.log(sum(10,20,30))：  //輸出結(jié)果：60
</script>

上述代碼中，第2行代碼使用const關(guān)鍵字聲明了一個(gè)m常量，用于計(jì)算多個(gè)數(shù)相加，它的值為一個(gè)箭頭函數(shù)。小括號中的args是一個(gè)數(shù)組，前面加上3個(gè)點(diǎn)“...”表示接收所有實(shí)參。第3行代碼在箭頭函數(shù)中使用let關(guān)鍵字聲明一個(gè)tolal變量，用于存儲(chǔ)數(shù)字相加的總和。第4行代使用forEach0方法來遍歷args數(shù)組，該方法接收一個(gè)回調(diào)函數(shù)，args數(shù)組中有多少項(xiàng)值，這個(gè)回調(diào)函數(shù)就會(huì)被執(zhí)行多少次，item為當(dāng)前循環(huán)數(shù)組中的當(dāng)前項(xiàng)。第8行代碼在循環(huán)體外返回total值。第10行、第11行代碼分別調(diào)用sum0函數(shù)，并在瀏覽器控制臺中輸出結(jié)果。

根據(jù)箭頭函數(shù)的特點(diǎn)，第4~6行代碼還可以簡寫成第7行代碼注釋中的形式。如果箭頭函數(shù)中只有一個(gè)形參item，則item外側(cè)的小括號可以省略;如果箭頭函數(shù)中只有一個(gè)形參item并且箭頭函數(shù)內(nèi)部只有一句代碼，則可以省略大括號。