ES6的函數rest參數使用小結
ES6的函數rest參數用法
es6中引入了rest參數，樣式形如…xxx，用于獲取函數的多余參數，這樣就不需要使用arguments對象了。rest參數搭配的一個變量是一個數組，該變量將多余的參數放入數組中。例如：
function add(...value){
console.log(value);
let sum=0;
for(var val of value){
sum+=val
}
return sum
}
add(2,3,5);//10上面代碼的add函數是一個求和函數，利用rest參數，可以向該函數傳入任意數目的參數。
下面是一個rest參數代替arguments變量的例子：
function sortNumbers(){
return Array.prototype.slice.call(arguments).sort();
}
//rest寫法
const sortNumbers=(...numbers)=>numbers.sort();上面兩種寫法rest參數的寫法更加自然簡潔。
arguments對象不是數組，只是一個類數組對象。為了使用數組的方法，得使用Array.prototype.slice.call先將其轉為數組。rest參數就不存在這個問題，它就是一個真正的數組，數組的方法都可以使用。下面是一個利用rest參數改寫數組的push方法。
function push(array,...items){
items.forEach(function(item){
array.push(item);
console.log(item);
})
}
var a=[];
push(a,1,2,3);還需要注意的是
rest參數之后不能有其他參數，否則會報錯。
函數的length屬性不包括rest參數。
(function(a) {}).length // 1
(function(...a) {}).length // 0
(function(a, ...b) {}).length // 1ES6-rest參數
rest參數
一.rest參數
- rest參數(形式為"…變量名"),用于獲取函數的多余參數,這樣就不需要使用arguments(參數)對象了.
- rest參數搭配的變量是一個數組,該變量將多余的參數放入數組中.
function add(...a){
let sum = 0;
for(var val of a){
sum += val;
}
return sum;
}
add(2,5,3);//10add函數是一個求和函數,利用rest參數,可以向該函數傳入任意數目的參數.
3. rest參數代替arguments變量
// arguments變量的寫法
function sortNumbers() {
return Array.prototype.slice.call(arguments).sort();
}
// rest參數的寫法
const sortNumbers = (...numbers) => numbers.sort();4.res參數中的變量代表一個數組,所以數組特有的方方都可以用于這個變量.下面是一個利用rest參數改寫數組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參數之后不能再有其他參數(即只能是最后一個參數),否則會報錯.
6.函數的length屬性,不包括rest參數
(function(a){}).length //1
(function(...a){}).length //0
(function(a,...b){}).length //1二.擴展運算符
1.含義:
擴展運算符(spread)是三個點(…).它好比rest參數的逆運算,將一個數組轉為用逗號分隔的參數序列.
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.該運算符主要用于函數調用
function add(x, y) {
return x + y;
}
var numbers = [4, 38];
add(...numbers) // 423.擴展運算符與正常的函數參數可以結合使用,非常靈活
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.合并數組
//ES5 [1, 2].concat(more) //ES6 [1, 2, ...more] var arr1 = ['a','b']; var arr2 = ['c']; //ES5的合并數組 arr1.concat(arr1, arr2); //ES6的合并數組 [...arr1, ...arr2]
四.嚴格模式
1.從ES5開始,函數內部可以設定為嚴格模式
function doSomething(a,b){
'use strict'
//code
}2.ES6做了一點修改,規(guī)定只要函數參數使用了默認值、解構賦值、或者擴展運算符，那么函數內部就不能顯式設置為嚴格模式,否則就會報錯.
五.name屬性
1.函數的name屬性,返回該函數的函數名.
function foo(){}
foo.name //"foo"如果將一個匿名函數賦值給一個變量,ES5的name屬性, 會返回空字符串,而ES6的name屬性會返回實際的函數名.
2. function構造函數返回的函數實例,name屬性的值為"anonymous".
function foo(){}
foo.name //"foo"3.bind返回的函數，name屬性值會加上“bound ”前綴。
function foo() {};
foo.bind({}).name // "bound foo"
(function(){}).bind({}).name // "bound "參考文檔
到此這篇關于ES6的函數rest參數用法的文章就介紹到這了,更多相關ES6 rest參數用法內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
在JavaScript中，箭頭函數是一種簡化的函數語法，它在ES6（ECMAScript?2015）引入，本文就來和大家深入講講JavaScript中的箭頭函數的使用吧2023-05-05
這篇文章主要為大家詳細介紹了js實現(xiàn)簡單圖片拖拽效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-02-02
這篇文章主要為大家介紹了Web?Components入門教程示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-05-05
這篇文章主要介紹了JavaScript設計模式之裝飾者模式,結合實例形式較為詳細的分析了裝飾者模式的概念、原理及javascript定義、使用裝飾者模式的相關操作技巧,需要的朋友可以參考下2019-01-01
眾所周知，剛剛開源的「鴻蒙 2.0」以 JavaScript 作為 IoT 應用開發(fā)的框架語言。作為科普，這篇文章不會拿著放大鏡找出代碼中的槽點來吹毛求疵，而是希望通俗地講清楚它所支持的 GUI 到底是怎么一回事。2020-09-09
一文詳解JavaScript?如何將?HTML?轉成?Markdown
這篇文章主要介紹了一文詳解JavaScript如何將HTML轉成Markdown，文章圍繞主題展開詳細的內容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-08-08
這篇文章主要為大家詳細介紹了javascript微信支付的相關代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
這篇文章主要介紹了js計算兩個時間之間天數差的實例代碼，有需要的朋友可以參考一下2013-11-11
這篇文章主要介紹了Next.js項目實戰(zhàn)踩坑指南(小結)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11
下面小編就為大家?guī)硪黄猨avascript 廣告移動特效的實現(xiàn)代碼。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-06-06