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

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

在ES6之前，JavaScript函數(shù)內(nèi)部有一個arguments對象，可以使用這個對象來獲取所有實參?，F(xiàn)在ES6提供了一個新的對象來實現(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ù)有兩個形參。第1個參數(shù)聲明了一個變量first，剩余的參數(shù)會被..args收集成一個數(shù)組，這就是剩余參數(shù)。第6行代碼在函數(shù)調(diào)用時傳遞了3個實參，分別為10、20和30。當(dāng)調(diào)用sum0函數(shù)后，第1個形參變量的值first對應(yīng)實參10.第2個形參args在前面加上了3個點“…”，表示args接收剩余的實參，即數(shù)組[20, 30]。

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

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

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

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