ES6函數剩余參數(Rest Parameters)


我們知道JS函數內部有個arguments對象,可以拿到全部實參。現在ES6給我們帶來了一個新的對象,可以拿到除開始參數外的參數,即剩余參數(廢話好多 O(∩_∩)O~)。

 

這個新的對象和arguments不一樣,它是程序員自定義的一個普通標識符,只是需要在前面加上三個點:...

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

注意func的第二個參數rest,前面有三個點。定義好后調用了兩次,結果分別如下

可以看到第一次調用時,rest為一個空數組,第二次為[2, 3, 4]。

 

又比如,在前面定義2個參數

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

輸出結果如下

 

通過以上兩個示例應該已經了解剩余參數的意義了吧。

 

剩余參數嘛,所以后面就不要再跟其它的參數了,不然會報錯

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

}

這里在rest后面加了一個參數b,Firefox會報錯

 

當您使用剩余參數后,函數的length屬性會發生一些變化

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

即length不包含rest,為2。

 

有同學會想,剩余參數前面是否可以一個參數都沒有呢? 答案是肯定的

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

這里的rest實際和arguments功能差不多,有同學想這不就替代了arguments嗎? ECMAScript就是這個打算,在被廢棄的ES4里就已經有Rest Parameters(熟悉AS3的同學應該了解),ES4被廢棄后,Rest Parameters被保留到了ES6

 

請注意,rest不能和arguments一起使用,會報錯

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

Firefox控制台如下

 

arguments和剩余參數的區別

  • arguments是一個偽數組(Array-like)
  • 剩余參數是一個真正數組(Array),具有Array.prototype上的所有方法
  • arguments上有callee,callee上有caller

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

 

最后我們以一個剩余參數實際應用作為結束

/*
 * 任意個數相加
 * 
 * **示例**
 *  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
}

  

相關:

http://www.cnblogs.com/snandy/archive/2011/03/21/1989743.html


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM