我們知道JS函數(shù)內(nèi)部有個(gè)arguments對象，可以拿到全部實(shí)參?，F(xiàn)在ES6給我們帶來了一個(gè)新的對象，可以拿到除開始參數(shù)外的參數(shù)，即剩余參數(shù)（廢話好多 O(∩_∩)O~）。

這個(gè)新的對象和arguments不一樣，它是程序員自定義的一個(gè)普通標(biāo)識符，只是需要在前面加上三個(gè)點(diǎn)：...

function func(a, ...rest) {
 console.log(a)
 console.log(rest)
}
func(1)
func(1, 2, 3, 4)

注意func的第二個(gè)參數(shù)rest，前面有三個(gè)點(diǎn)。定義好后調(diào)用了兩次，結(jié)果分別如下

可以看到第一次調(diào)用時(shí)，rest為一個(gè)空數(shù)組，第二次為[2, 3, 4]。

又比如，在前面定義2個(gè)參數(shù)

function func(a, b, ...rest) {
 console.log(a, b)
 console.log(rest)
}
func(1, 2)
func(1, 2, 3, 4)

輸出結(jié)果如下

通過以上兩個(gè)示例應(yīng)該已經(jīng)了解剩余參數(shù)的意義了吧。

剩余參數(shù)嘛，所以后面就不要再跟其它的參數(shù)了，不然會(huì)報(bào)錯(cuò)

function func(a, ...rest, b) {
 
}

這里在rest后面加了一個(gè)參數(shù)b，F(xiàn)irefox會(huì)報(bào)錯(cuò)

當(dāng)您使用剩余參數(shù)后，函數(shù)的length屬性會(huì)發(fā)生一些變化

function func(a, b, ...rest) {
}
func.length // 2

即length不包含rest，為2。

有同學(xué)會(huì)想，剩余參數(shù)前面是否可以一個(gè)參數(shù)都沒有呢？ 答案是肯定的

function func(...rest) {
 console.log(rest)
}
func(1) // [1]
func(1, 2, 3, 4) // [1,2,3,4]

這里的rest實(shí)際和arguments功能差不多，有同學(xué)想這不就替代了arguments嗎？ ECMAScript就是這個(gè)打算，在被廢棄的ES4里就已經(jīng)有Rest Parameters（熟悉AS3的同學(xué)應(yīng)該了解），ES4被廢棄后，Rest Parameters被保留到了ES6。

請注意，rest不能和arguments一起使用，會(huì)報(bào)錯(cuò)

function func(...rest) {
 console.log(rest)
 console.log(arguments)
}

Firefox控制臺如下

arguments和剩余參數(shù)的區(qū)別

arguments是一個(gè)偽數(shù)組（Array-like）
剩余參數(shù)是一個(gè)真正數(shù)組（Array），具有Array.prototype上的所有方法
arguments上有callee，callee上有caller
如

function func(a, ...rest) {
  console.log(rest instanceof Array)
}
func(1, 2) // true

最后我們以一個(gè)剩余參數(shù)實(shí)際應(yīng)用作為結(jié)束

/*
 * 任意個(gè)數(shù)相加
 *
 * **示例**
 * sum(1)
 * sum(1, 2)
 * sum(1, 2, 3)
 */
function sum(first, ...rest) {
  var result = first
  var i = 0
  var len = rest.length
  while (i < len) {
    result += rest[i]
    i++
  }
  return result
}

以上所述就是本文的全部內(nèi)容了，希望大家能喜歡。

最新評論