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二.擴(kuò)展運算符
1.含義:
擴(kuò)展運算符(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.擴(kuò)展運算符與正常的函數(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]);三.擴(kuò)展運算符的應(yīng)用
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]
四.嚴(yán)格模式
1.從ES5開始,函數(shù)內(nèi)部可以設(shè)定為嚴(yán)格模式
function doSomething(a,b){
'use strict'
//code
}2.ES6做了一點修改,規(guī)定只要函數(shù)參數(shù)使用了默認(rèn)值、解構(gòu)賦值、或者擴(kuò)展運算符，那么函數(shù)內(nèi)部就不能顯式設(shè)置為嚴(yán)格模式,否則就會報錯.
五.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 "參考文檔
到此這篇關(guān)于ES6的函數(shù)rest參數(shù)用法的文章就介紹到這了,更多相關(guān)ES6 rest參數(shù)用法內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
一文帶你掌握J(rèn)avaScript中的箭頭函數(shù)
在JavaScript中，箭頭函數(shù)是一種簡化的函數(shù)語法，它在ES6（ECMAScript?2015）引入，本文就來和大家深入講講JavaScript中的箭頭函數(shù)的使用吧2023-05-05
這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)簡單圖片拖拽效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-02-02
這篇文章主要為大家介紹了Web?Components入門教程示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
這篇文章主要介紹了JavaScript設(shè)計模式之裝飾者模式,結(jié)合實例形式較為詳細(xì)的分析了裝飾者模式的概念、原理及javascript定義、使用裝飾者模式的相關(guān)操作技巧,需要的朋友可以參考下2019-01-01
眾所周知，剛剛開源的「鴻蒙 2.0」以 JavaScript 作為 IoT 應(yīng)用開發(fā)的框架語言。作為科普，這篇文章不會拿著放大鏡找出代碼中的槽點來吹毛求疵，而是希望通俗地講清楚它所支持的 GUI 到底是怎么一回事。2020-09-09
一文詳解JavaScript?如何將?HTML?轉(zhuǎn)成?Markdown
這篇文章主要介紹了一文詳解JavaScript如何將HTML轉(zhuǎn)成Markdown，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-08-08
這篇文章主要為大家詳細(xì)介紹了javascript微信支付的相關(guān)代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
這篇文章主要介紹了js計算兩個時間之間天數(shù)差的實例代碼，有需要的朋友可以參考一下2013-11-11
這篇文章主要介紹了Next.js項目實戰(zhàn)踩坑指南(小結(jié))，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11
下面小編就為大家?guī)硪黄猨avascript 廣告移動特效的實現(xiàn)代碼。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-06-06