ECMAscrip新特性函數介紹

Posted on by

1.函數參數的默認值

1.1函數參數指定默認值

在ECMAScript 2015中，允許為函數的參數添加默認值，將默認值直接寫在參數的後面即可。

示例代碼如下所示：

// 函數參數指定默認值
function fun(a = 1, b = 2) {
  console.log(a + b);
}
fun() // 3

值得註意的是：參數變量是默認聲明的，所以不能用let或const再次聲明, 否則會拋出異常。

還有就是默認參數的位置都是在參數列表的最後面，否則會引發歧義，該省略的參數不能省略，

如下代碼示例：

// 默認參數的位置應該是在最後面
function fun(a = 1, b) {
  console.log(a, b);
}
// 調用函數，傳遞一個參數
fun(20); // 20 undefined

1.2與解耦賦值配合使用

參數默認值可以與解構賦值的默認值，結合起來使用。可以通過兩種方式為其設置默認值。示例代碼如下所示：

function fun([a, b = 5] = [3]) {
  console.log(a, b);
}
fun() // 3 5

1.3函數參數的作用域

一旦設置瞭參數的默認值，函數進行聲明初始化時，參數會形成一個單獨的作用域 。等到初始化結束，這個作用域就會消失。這種語法行為，在不設置參數默認值時，是不會出現的。

示例代碼如下所示：

let x = 5

function fun(y = x) {
  x = 10
  console.log(y);
}
fun() // 5

2.rest參數

ECMAScript 2015引入rest參數（形式為…變量名），用於獲取函數的多餘參數，這樣就不需要使用arguments對象瞭。rest 參數搭配的變量是一個數組，該變量將多餘的參數放入數組中。

示例代碼如下所示：

// 使用 arguments 對象最傳入的參數求出最大值
function max1() {
  return Math.max.apply(null, arguments)
}

console.log(max1(1, 5, 6, 33, 65, 35, 15)); // 65

// 使用 rest 參數
function max2(...arg) {
  return Math.max(...arg)
}
console.log(max2(1, 5, 6, 33, 65, 35, 15)); // 65

3.箭頭函數

3.1什麼是箭頭函數

ECMAScript 2015新增瞭箭頭函數(又稱胖剪頭函數), 相比函數表達式具有較短的語法並以詞法的方式綁定this 。箭頭函數在大多數情況下都是匿名的。

箭頭函數的語法結構如下所示：

// 基本語法結構
(參數1, 參數2, ..., 參數N) => {函數聲明}
(參數1, 參數2, ..., 參數N) => 表達式(單一)
// 相當於:(參數1, 參數2, ..., 參數N) => {return 表達式}

// 當隻有一個參數時，小可號是可選的
(參數) => {函數聲明}
// 或者
參數 => {函數聲明}

// 沒有參數應該寫一對小括號
() => {函數聲明}

// 可以配合 rest 參數和默認參數
(參數1, 參數2, ...rest) => {函數聲明}
(參數1, 參數2, ..., 參數N = 默認值N) => {函數聲明}

箭頭函數也可以為其定義函數名，語法結構如下所示：

let funName = (參數1, 參數2, ..., 參數N) => {函數聲明}

示例代碼如下所示：

let sum = (a, b) => {
  return a + b
}
console.log(sum(10, 20)); //30

3.2箭頭函數的註意事項

箭頭函數有幾個使用註意點：

  • 函數體內的this對象，就是定義時所在的對象，而不是使用時所在的對象。

示例代碼如下所示：

// ES5 寫法
let fun1 = function () {
  console.log(this.id);
}
// ES6 箭頭函數寫法
let fun2 = () => {
  console.log(this.id);
}

let obj1 = {
  id: 666,
  fun: fun1
}
let obj2 = {
  id: 666,
  fun: fun2
}
obj1.fun() // 666
obj2.fun() // undefined

由代碼我們可以看出，普通函數的this是調用時確定的，而我們的箭頭函數的this是在定義時就確定瞭的。

  • 不可以當作構造函數，也就是說，不可以使用new命令，否則會拋出一個錯誤。
  • 不可以使用arguments對象，該對象在函數體內不存在。如果要用，可以用rest參數代替。

4.函數的尾調用

尾調用是函數式編程的一個重要概念，本身非常簡單，一句話就能說清楚，就是指某個函數的最後一步是調用另一個函數。

示例代碼如下所示：

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

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

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

到此這篇關於ECMAscrip新特性之函數的擴展的文章就介紹到這瞭,更多相關ECMAscrip函數的擴展內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：