es6函數(shù)之rest參數(shù)用法實(shí)例分析
本文實(shí)例講述了es6函數(shù)之rest參數(shù)用法。分享給大家供大家參考，具體如下：
es6引入rest參數(shù)(形式為 …變量名)，用于獲取函數(shù)的多余參數(shù)，這樣就不需要使用arguments對(duì)象了，rest參數(shù)搭配的變量是一個(gè)數(shù)組，該變量將多余的參數(shù)放入數(shù)組中。
function add (...values) {
let sum = 0;
for (var val of values) {
sum += val
}
return sum
}
add(2, 3, 5) // 10
上面代碼的add函數(shù)是一個(gè)求和函數(shù)，利用rest參數(shù)，可以向該函數(shù)傳入任意數(shù)目的參數(shù)。
下面是一個(gè)rest參數(shù)代替arguments變量的例子。
// arguments變量的寫(xiě)法
function sortNumbers() {
return Array.prototype.slice.call(arguments).sort()
}
// rest參數(shù)的寫(xiě)法
const sortNumbers = (...numbers) => numbers.sort()
上面代碼的兩種寫(xiě)法，比較后可以發(fā)現(xiàn)，rest參數(shù)的寫(xiě)法更自然也更簡(jiǎn)潔。
arguments對(duì)象不是數(shù)組，而是一個(gè)類(lèi)似數(shù)組的對(duì)象。所以為了使用數(shù)組的方法，必須使用Array.prototype.slice.call先將其轉(zhuǎn)為數(shù)組。rest參數(shù)就不存在這個(gè)問(wèn)題，它就是一個(gè)真正的數(shù)組，數(shù)組特有的方法都可以使用。下面是一個(gè)利用rest參數(shù)改寫(xiě)數(shù)組push方法的例子。
function push(array, ...items) {
items.forEach(item => {
array.push(item)
})
}
var a = []
push(a, 1, 2, 3)
注意,rest參數(shù)之后不能再有其他參數(shù)(即只能是最后一個(gè)參數(shù))，否則會(huì)報(bào)錯(cuò)
function f (a, ...b, c) {
// ..
} // 報(bào)錯(cuò)
函數(shù)的length屬性，不包括rest參數(shù)。
（function (a) {}）.length // 1
(function (...a) {}).length // 0
(function (a, ...b) {}).length // 1
感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測(cè)試上述代碼運(yùn)行效果。
更多關(guān)于JavaScript相關(guān)內(nèi)容可查看本站專(zhuān)題：《JavaScript常用函數(shù)技巧匯總》、《javascript面向?qū)ο笕腴T(mén)教程》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
相關(guān)文章
JavaScript數(shù)據(jù)庫(kù)TaffyDB用法實(shí)例分析
這篇文章主要介紹了JavaScript數(shù)據(jù)庫(kù)TaffyDB用法,實(shí)例分析了TaffyDB數(shù)據(jù)庫(kù)的定義、查詢(xún)、更新、刪除等操作的相關(guān)使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-07-07
基于javascript的無(wú)縫滾動(dòng)動(dòng)畫(huà)實(shí)現(xiàn)2
這篇文章主要介紹了基于javascript的無(wú)縫滾動(dòng)動(dòng)畫(huà)實(shí)現(xiàn)2，文章通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08
JavaScript Event學(xué)習(xí)第四章 傳統(tǒng)的事件注冊(cè)模型
在這一章我會(huì)講解給元素注冊(cè)事件的最好的一種辦法，那就是：確保一個(gè)特定的事件在特定的HTML元素上發(fā)生并且能運(yùn)行特定的腳本。2010-02-02
JavaScript結(jié)合Canvas繪畫(huà)畫(huà)運(yùn)動(dòng)小球
這篇文章主要介紹了JavaScript結(jié)合Canvas畫(huà)運(yùn)動(dòng)小球，canvas被稱(chēng)為畫(huà)布，可以結(jié)合javascript實(shí)現(xiàn)繪制各種圖形,制作各種炫酷的動(dòng)畫(huà)效果，下面文章更多詳細(xì)內(nèi)容介紹需要的小伙伴可以參考一下2022-03-03
Json實(shí)現(xiàn)傳值到后臺(tái)代碼實(shí)例
這篇文章主要介紹了Json實(shí)現(xiàn)傳值到后臺(tái)代碼實(shí)例,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-06-06
這篇文章主要給大家介紹了關(guān)于微信小程序使用wxParse解析html的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2018-07-07
JavaScript實(shí)現(xiàn)向OL列表內(nèi)動(dòng)態(tài)添加LI元素的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)向OL列表內(nèi)動(dòng)態(tài)添加LI元素的方法,實(shí)例分析了javascript操作html元素的技巧,需要的朋友可以參考下2015-03-03
微信小程序云函數(shù)添加數(shù)據(jù)到數(shù)據(jù)庫(kù)的方法
這篇文章主要介紹了微信小程序云函數(shù)添加數(shù)據(jù)到數(shù)據(jù)庫(kù)的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
js中json對(duì)象和字符串的理解及相互轉(zhuǎn)化操作實(shí)現(xiàn)方法
這篇文章主要介紹了js中json對(duì)象和字符串的理解及相互轉(zhuǎn)化操作實(shí)現(xiàn)方法,結(jié)合實(shí)例形式分析了json對(duì)象與字符串的功能以及相互轉(zhuǎn)換操作實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-09-09
JS removeAttribute()方法實(shí)現(xiàn)刪除元素的某個(gè)屬性
這篇文章主要介紹了JS removeAttribute()方法實(shí)現(xiàn)刪除元素的某個(gè)屬性，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01