ES6的函數(shù)rest參數(shù)使用小結(jié)
ES6的函數(shù)rest參數(shù)用法
es6中引入了rest參數(shù)，樣式形如…xxx，用于獲取函數(shù)的多余參數(shù)，這樣就不需要使用arguments對象了。rest參數(shù)搭配的一個變量是一個數(shù)組，該變量將多余的參數(shù)放入數(shù)組中。例如：
function add(...value){
console.log(value);
let sum=0;
for(var val of value){
sum+=val
}
return sum
}
add(2,3,5);//10上面代碼的add函數(shù)是一個求和函數(shù)，利用rest參數(shù)，可以向該函數(shù)傳入任意數(shù)目的參數(shù)。
下面是一個rest參數(shù)代替arguments變量的例子：
function sortNumbers(){
return Array.prototype.slice.call(arguments).sort();
}
//rest寫法
const sortNumbers=(...numbers)=>numbers.sort();上面兩種寫法rest參數(shù)的寫法更加自然簡潔。
arguments對象不是數(shù)組，只是一個類數(shù)組對象。為了使用數(shù)組的方法，得使用Array.prototype.slice.call先將其轉(zhuǎn)為數(shù)組。rest參數(shù)就不存在這個問題，它就是一個真正的數(shù)組，數(shù)組的方法都可以使用。下面是一個利用rest參數(shù)改寫數(shù)組的push方法。
function push(array,...items){
items.forEach(function(item){
array.push(item);
console.log(item);
})
}
var a=[];
push(a,1,2,3);還需要注意的是
rest參數(shù)之后不能有其他參數(shù)，否則會報錯。
函數(shù)的length屬性不包括rest參數(shù)。
(function(a) {}).length // 1
(function(...a) {}).length // 0
(function(a, ...b) {}).length // 1ES6-rest參數(shù)
rest參數(shù)
一.rest參數(shù)
- rest參數(shù)(形式為"…變量名"),用于獲取函數(shù)的多余參數(shù),這樣就不需要使用arguments(參數(shù))對象了.
- rest參數(shù)搭配的變量是一個數(shù)組,該變量將多余的參數(shù)放入數(shù)組中.
function add(...a){
let sum = 0;
for(var val of a){
sum += val;
}
return sum;
}
add(2,5,3);//10add函數(shù)是一個求和函數(shù),利用rest參數(shù),可以向該函數(shù)傳入任意數(shù)目的參數(shù).
3. rest參數(shù)代替arguments變量
// arguments變量的寫法
function sortNumbers() {
return Array.prototype.slice.call(arguments).sort();
}
// rest參數(shù)的寫法
const sortNumbers = (...numbers) => numbers.sort();4.res參數(shù)中的變量代表一個數(shù)組,所以數(shù)組特有的方方都可以用于這個變量.下面是一個利用rest參數(shù)改寫數(shù)組push方法的例子
function push(array, ...items){
//forEach為每一個
items.forEach(function(item){
array.push(item);
console.log(item);
});
}
var a = [];
push(a, 1, 2, 3);5.rest參數(shù)之后不能再有其他參數(shù)(即只能是最后一個參數(shù)),否則會報錯.
6.函數(shù)的length屬性,不包括rest參數(shù)
(function(a){}).length //1
(function(...a){}).length //0
(function(a,...b){}).length //1二.擴展運算符
1.含義:
擴展運算符(spread)是三個點(…).它好比rest參數(shù)的逆運算,將一個數(shù)組轉(zhuǎn)為用逗號分隔的參數(shù)序列.
console.log(...[1,2,3])
//1 2 3
console.log(1,...[2,3,4],5);
//1 2 3 4 5
[...document.querySelectorAll('div')]
//[<div>,<div>,<div>]2.該運算符主要用于函數(shù)調(diào)用
function add(x, y) {
return x + y;
}
var numbers = [4, 38];
add(...numbers) // 423.擴展運算符與正常的函數(shù)參數(shù)可以結(jié)合使用,非常靈活
function f(v, w, x, y, z) {
console.log(v); //-1
console.log(w); //0
console.log(x); //1
console.log(y); //2
console.log(z); //3
}
var args = [0, 1];
f(-1, ...args, 2, ...[3]);三.擴展運算符的應用
1.合并數(shù)組
//ES5 [1, 2].concat(more) //ES6 [1, 2, ...more] var arr1 = ['a','b']; var arr2 = ['c']; //ES5的合并數(shù)組 arr1.concat(arr1, arr2); //ES6的合并數(shù)組 [...arr1, ...arr2]
四.嚴格模式
1.從ES5開始,函數(shù)內(nèi)部可以設定為嚴格模式
function doSomething(a,b){
'use strict'
//code
}2.ES6做了一點修改,規(guī)定只要函數(shù)參數(shù)使用了默認值、解構(gòu)賦值、或者擴展運算符，那么函數(shù)內(nèi)部就不能顯式設置為嚴格模式,否則就會報錯.
五.name屬性
1.函數(shù)的name屬性,返回該函數(shù)的函數(shù)名.
function foo(){}
foo.name //"foo"如果將一個匿名函數(shù)賦值給一個變量,ES5的name屬性, 會返回空字符串,而ES6的name屬性會返回實際的函數(shù)名.
2. function構(gòu)造函數(shù)返回的函數(shù)實例,name屬性的值為"anonymous".
function foo(){}
foo.name //"foo"3.bind返回的函數(shù)，name屬性值會加上“bound ”前綴。
function foo() {};
foo.bind({}).name // "bound foo"
(function(){}).bind({}).name // "bound "參考文檔
到此這篇關于ES6的函數(shù)rest參數(shù)用法的文章就介紹到這了,更多相關ES6 rest參數(shù)用法內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
微信小程序?qū)崿F(xiàn)客服功能(客服消息)的全過程
在最近做的微信小程序中需要實現(xiàn)一個自帶的客服功能,下面這篇文章主要給大家介紹了關于微信小程序?qū)崿F(xiàn)客服功能(客服消息)的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-12-12
解決javascript:window.close()在chrome,Firefox下失效的問題
本篇文章是對javascript:window.close()在chrome,Firefox下失效問題的解決方法進行了分析介紹。需要的朋友參考下2013-05-05
這篇文章主要介紹了小程序vant彈窗組件的實現(xiàn)方式，本文給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2020-02-02
這篇文章主要介紹了js實現(xiàn)磁性吸附的示例，幫助大家更好的制作js特效，美化自己的網(wǎng)頁，感興趣的朋友可以了解下2020-10-10
Math.random() 這個方法相信大家都知道，是用來生成隨機數(shù)的。不過一般的參考手冊時卻沒有說明如何用這個方法來生成指定范圍內(nèi)的隨機數(shù)。這次我就來詳細的介紹一下Math.random()，以及如何用它來生成制定范圍內(nèi)的隨機數(shù)。2015-04-04
這篇文章主要為大家介紹了如何利用JS實現(xiàn)消消樂小游戲,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-04-04
這篇文章主要介紹了JS實現(xiàn)網(wǎng)頁表格自動變大縮小的方法,實例分析了javascript操作表格的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03
下面小編就為大家?guī)硪黄Ｓ迷鷍s自定義函數(shù)總結(jié)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-11-11
這篇文章主要介紹了在微信小程序中使用mqtt服務的方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-12-12
javascript之鎖定表格欄位...2007-06-06