ECMAscrip函數(shù)的擴(kuò)展怎么使用

本篇內(nèi)容主要講解“ECMAscrip函數(shù)的擴(kuò)展怎么使用”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“ECMAscrip函數(shù)的擴(kuò)展怎么使用”吧!

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é)合起來(lái)使用?？梢酝ㄟ^(guò)兩種方式為其設(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ì)消失。這種語(yǔ)法行為，在不設(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á)式具有較短的語(yǔ)法并以詞法的方式綁定this 。箭頭函數(shù)在大多數(shù)情況下都是匿名的。

箭頭函數(shù)的語(yǔ)法結(jié)構(gòu)如下所示：

// 基本語(yǔ)法結(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ù)名，語(yǔ)法結(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ù)，也就是說(shuō)，不可以使用new命令，否則會(huì)拋出一個(gè)錯(cuò)誤。

• 不可以使用arguments對(duì)象，該對(duì)象在函數(shù)體內(nèi)不存在。如果要用，可以用rest參數(shù)代替。

4.函數(shù)的尾調(diào)用

尾調(diào)用是函數(shù)式編程的一個(gè)重要概念，本身非常簡(jiǎn)單，一句話就能說(shuō)清楚，就是指某個(gè)函數(shù)的最后一步是調(diào)用另一個(gè)函數(shù)。

示例代碼如下所示：

let x = (x) => {
  return 2 * x
}

let y = function (y) {
  return x(y)
}

console.log(y(20)); // 40

到此，相信大家對(duì)“ECMAscrip函數(shù)的擴(kuò)展怎么使用”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！