ECMAscrip新特性函數(shù)介紹
1.函數(shù)參數(shù)的默認值
1.1函數(shù)參數(shù)指定默認值
在ECMAScript 2015
中,允許為函數(shù)的參數(shù)添加默認值,將默認值直接寫在參數(shù)的后面即可。
示例代碼如下所示:
// 函數(shù)參數(shù)指定默認值 function fun(a = 1, b = 2) { console.log(a + b); } fun() // 3
值得注意的是:參數(shù)變量是默認聲明的,所以不能用let或const再次聲明, 否則會拋出異常。
還有就是默認參數(shù)的位置都是在參數(shù)列表的最后面,否則會引發(fā)歧義,該省略的參數(shù)不能省略,
如下代碼示例:
// 默認參數(shù)的位置應該是在最后面 function fun(a = 1, b) { console.log(a, b); } // 調(diào)用函數(shù),傳遞一個參數(shù) fun(20); // 20 undefined
1.2與解耦賦值配合使用
參數(shù)默認值可以與解構(gòu)賦值的默認值,結(jié)合起來使用。可以通過兩種方式為其設(shè)置默認值。示例代碼如下所示:
function fun([a, b = 5] = [3]) { console.log(a, b); } fun() // 3 5
1.3函數(shù)參數(shù)的作用域
一旦設(shè)置了參數(shù)的默認值,函數(shù)進行聲明初始化時,參數(shù)會形成一個單獨的作用域 。等到初始化結(jié)束,這個作用域就會消失。這種語法行為,在不設(shè)置參數(shù)默認值時,是不會出現(xiàn)的。
示例代碼如下所示:
let x = 5 function fun(y = x) { x = 10 console.log(y); } fun() // 5
2.rest參數(shù)
ECMAScript 2015
引入rest
參數(shù)(形式為...變量名),用于獲取函數(shù)的多余參數(shù),這樣就不需要使用arguments對象了。rest 參數(shù)搭配的變量是一個數(shù)組,該變量將多余的參數(shù)放入數(shù)組中。
示例代碼如下所示:
// 使用 arguments 對象最傳入的參數(shù)求出最大值 function max1() { return Math.max.apply(null, arguments) } console.log(max1(1, 5, 6, 33, 65, 35, 15)); // 65 // 使用 rest 參數(shù) function max2(...arg) { return Math.max(...arg) } console.log(max2(1, 5, 6, 33, 65, 35, 15)); // 65
3.箭頭函數(shù)
3.1什么是箭頭函數(shù)
ECMAScript 2015
新增了箭頭函數(shù)(又稱胖剪頭函數(shù)), 相比函數(shù)表達式具有較短的語法并以詞法的方式綁定this 。箭頭函數(shù)在大多數(shù)情況下都是匿名的。
箭頭函數(shù)的語法結(jié)構(gòu)如下所示:
// 基本語法結(jié)構(gòu) (參數(shù)1, 參數(shù)2, ..., 參數(shù)N) => {函數(shù)聲明} (參數(shù)1, 參數(shù)2, ..., 參數(shù)N) => 表達式(單一) // 相當于:(參數(shù)1, 參數(shù)2, ..., 參數(shù)N) => {return 表達式} // 當只有一個參數(shù)時,小可號是可選的 (參數(shù)) => {函數(shù)聲明} // 或者 參數(shù) => {函數(shù)聲明} // 沒有參數(shù)應該寫一對小括號 () => {函數(shù)聲明} // 可以配合 rest 參數(shù)和默認參數(shù) (參數(shù)1, 參數(shù)2, ...rest) => {函數(shù)聲明} (參數(shù)1, 參數(shù)2, ..., 參數(shù)N = 默認值N) => {函數(shù)聲明}
箭頭函數(shù)也可以為其定義函數(shù)名,語法結(jié)構(gòu)如下所示:
let funName = (參數(shù)1, 參數(shù)2, ..., 參數(shù)N) => {函數(shù)聲明}
示例代碼如下所示:
let sum = (a, b) => { return a + b } console.log(sum(10, 20)); //30
3.2箭頭函數(shù)的注意事項
箭頭函數(shù)有幾個使用注意點:
- 函數(shù)體內(nèi)的
this
對象,就是定義時所在的對象,而不是使用時所在的對象。
示例代碼如下所示:
// ES5 寫法 let fun1 = function () { console.log(this.id); } // ES6 箭頭函數(shù)寫法 let fun2 = () => { console.log(this.id); } let obj1 = { id: 666, fun: fun1 } let obj2 = { id: 666, fun: fun2 } obj1.fun() // 666 obj2.fun() // undefined
由代碼我們可以看出,普通函數(shù)的this
是調(diào)用時確定的,而我們的箭頭函數(shù)的this
是在定義時就確定了的。
- 不可以當作構(gòu)造函數(shù),也就是說,不可以使用
new
命令,否則會拋出一個錯誤。 - 不可以使用
arguments
對象,該對象在函數(shù)體內(nèi)不存在。如果要用,可以用rest參數(shù)代替。
4.函數(shù)的尾調(diào)用
尾調(diào)用是函數(shù)式編程的一個重要概念,本身非常簡單,一句話就能說清楚,就是指某個函數(shù)的最后一步是調(diào)用另一個函數(shù)。
示例代碼如下所示:
let x = (x) => { return 2 * x } let y = function (y) { return x(y) } console.log(y(20)); // 40
到此這篇關(guān)于ECMAscrip新特性之函數(shù)的擴展的文章就介紹到這了,更多相關(guān)ECMAscrip函數(shù)的擴展內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
js傳遞數(shù)組參數(shù)到后臺controller的方法
下面小編就為大家分享一篇js傳遞數(shù)組參數(shù)到后臺controller的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03用JavaScript實現(xiàn)讓瀏覽器停止載入頁面的方法
下面小編就為大家?guī)硪黄肑avaScript實現(xiàn)讓瀏覽器停止載入頁面的方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-01-01JavaScript取得gridview中獲取checkbox選中的值
這篇文章主要介紹了 js取得gridview中獲取checkbox選中的值,本文給大家分享兩段代碼片段,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2017-07-07