ECMAscrip新特性函數(shù)介紹
1.函數(shù)參數(shù)的默認(rèn)值
1.1函數(shù)參數(shù)指定默認(rèn)值
在ECMAScript 2015中,允許為函數(shù)的參數(shù)添加默認(rèn)值,將默認(rèn)值直接寫在參數(shù)的后面即可。
示例代碼如下所示:
// 函數(shù)參數(shù)指定默認(rèn)值
function fun(a = 1, b = 2) {
console.log(a + b);
}
fun() // 3
值得注意的是:參數(shù)變量是默認(rèn)聲明的,所以不能用let或const再次聲明, 否則會(huì)拋出異常。
還有就是默認(rèn)參數(shù)的位置都是在參數(shù)列表的最后面,否則會(huì)引發(fā)歧義,該省略的參數(shù)不能省略,
如下代碼示例:
// 默認(rèn)參數(shù)的位置應(yīng)該是在最后面
function fun(a = 1, b) {
console.log(a, b);
}
// 調(diào)用函數(shù),傳遞一個(gè)參數(shù)
fun(20); // 20 undefined
1.2與解耦賦值配合使用
參數(shù)默認(rèn)值可以與解構(gòu)賦值的默認(rèn)值,結(jié)合起來使用??梢酝ㄟ^兩種方式為其設(shè)置默認(rèn)值。示例代碼如下所示:
function fun([a, b = 5] = [3]) {
console.log(a, b);
}
fun() // 3 5
1.3函數(shù)參數(shù)的作用域
一旦設(shè)置了參數(shù)的默認(rèn)值,函數(shù)進(jìn)行聲明初始化時(shí),參數(shù)會(huì)形成一個(gè)單獨(dú)的作用域 。等到初始化結(jié)束,這個(gè)作用域就會(huì)消失。這種語法行為,在不設(shè)置參數(shù)默認(rèn)值時(shí),是不會(huì)出現(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對(duì)象了。rest 參數(shù)搭配的變量是一個(gè)數(shù)組,該變量將多余的參數(shù)放入數(shù)組中。
示例代碼如下所示:
// 使用 arguments 對(duì)象最傳入的參數(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ù)表達(dá)式具有較短的語法并以詞法的方式綁定this 。箭頭函數(shù)在大多數(shù)情況下都是匿名的。
箭頭函數(shù)的語法結(jié)構(gòu)如下所示:
// 基本語法結(jié)構(gòu)
(參數(shù)1, 參數(shù)2, ..., 參數(shù)N) => {函數(shù)聲明}
(參數(shù)1, 參數(shù)2, ..., 參數(shù)N) => 表達(dá)式(單一)
// 相當(dāng)于:(參數(shù)1, 參數(shù)2, ..., 參數(shù)N) => {return 表達(dá)式}
// 當(dāng)只有一個(gè)參數(shù)時(shí),小可號(hào)是可選的
(參數(shù)) => {函數(shù)聲明}
// 或者
參數(shù) => {函數(shù)聲明}
// 沒有參數(shù)應(yīng)該寫一對(duì)小括號(hào)
() => {函數(shù)聲明}
// 可以配合 rest 參數(shù)和默認(rèn)參數(shù)
(參數(shù)1, 參數(shù)2, ...rest) => {函數(shù)聲明}
(參數(shù)1, 參數(shù)2, ..., 參數(shù)N = 默認(rè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ù)的注意事項(xiàng)
箭頭函數(shù)有幾個(gè)使用注意點(diǎn):
- 函數(shù)體內(nèi)的
this對(duì)象,就是定義時(shí)所在的對(duì)象,而不是使用時(shí)所在的對(duì)象。
示例代碼如下所示:
// 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í)確定的,而我們的箭頭函數(shù)的this是在定義時(shí)就確定了的。
- 不可以當(dāng)作構(gòu)造函數(shù),也就是說,不可以使用
new命令,否則會(huì)拋出一個(gè)錯(cuò)誤。 - 不可以使用
arguments對(duì)象,該對(duì)象在函數(shù)體內(nèi)不存在。如果要用,可以用rest參數(shù)代替。
4.函數(shù)的尾調(diào)用
尾調(diào)用是函數(shù)式編程的一個(gè)重要概念,本身非常簡單,一句話就能說清楚,就是指某個(gè)函數(shù)的最后一步是調(diào)用另一個(gè)函數(shù)。
示例代碼如下所示:
let x = (x) => {
return 2 * x
}
let y = function (y) {
return x(y)
}
console.log(y(20)); // 40
到此這篇關(guān)于ECMAscrip新特性之函數(shù)的擴(kuò)展的文章就介紹到這了,更多相關(guān)ECMAscrip函數(shù)的擴(kuò)展內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
js與jquery獲取input輸入框中的值實(shí)例講解
在本篇文章里小編給大家整理了關(guān)于js與jquery獲取input輸入框中的值實(shí)例講解,需要的朋友們可以學(xué)習(xí)參考下。2020-02-02
JavaScript知識(shí)點(diǎn)總結(jié)(四)之邏輯OR運(yùn)算符詳解
這篇文章主要介紹了JavaScript知識(shí)點(diǎn)總結(jié)(四)之邏輯OR運(yùn)算符詳解的相關(guān)資料,在JavaScript中,邏輯OR運(yùn)算符用||表示。本文介紹的非常詳細(xì),具有參考借鑒價(jià)值,感興趣的朋友一起看看吧2016-05-05
js原生之焦點(diǎn)圖轉(zhuǎn)換加定時(shí)器實(shí)例
本文主要分享了在jQuery之焦點(diǎn)圖轉(zhuǎn)換-左右的基礎(chǔ)上,將jQuery代碼改成js原生,并添加定時(shí)器(setInterval()和clearInterval())的實(shí)例代碼。需要的朋友可以參考借鑒2016-12-12
JavaScript使用pop方法移除數(shù)組最后一個(gè)元素用法實(shí)例
這篇文章主要介紹了JavaScript使用pop方法移除數(shù)組最后一個(gè)元素,實(shí)例分析了javascript中pop方法的使用技巧,需要的朋友可以參考下2015-04-04
js控制href內(nèi)容的連接內(nèi)容的變化示例
這篇文章主要介紹了使用js控制href內(nèi)容的連接內(nèi)容的變化,需要的朋友可以參考下2014-04-04
[js高手之路]圖解javascript的原型(prototype)對(duì)象,原型鏈實(shí)例
下面小編就為大家?guī)硪黄猍js高手之路]圖解javascript的原型(prototype)對(duì)象,原型鏈實(shí)例。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-08-08
Javascript函數(shù)技巧學(xué)習(xí)
這篇文章主要介紹了Javascript函數(shù)技巧學(xué)習(xí),文章圍繞主題展開詳細(xì)的內(nèi)容介紹,具有一定的參考價(jià)值,需要的朋友可以參考一下2022-07-07
JavaScript檢測瀏覽器cookie是否已經(jīng)啟動(dòng)的方法
這篇文章主要介紹了JavaScript檢測瀏覽器cookie是否已經(jīng)啟動(dòng)的方法,實(shí)例分析了javascript操作cookie的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-02-02
js獲取觸發(fā)事件元素在整個(gè)網(wǎng)頁中的絕對(duì)坐標(biāo)(示例代碼)
這篇文章主要介紹了js獲取觸發(fā)事件元素在整個(gè)網(wǎng)頁中的絕對(duì)坐標(biāo)。需要的朋友可以過來參考下,希望對(duì)大家有所幫助2013-12-12

