es6函數的擴充介紹（程式碼範例）

這篇文章帶給大家的內容是關於es6函數的擴充介紹（程式碼範例），有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

函數參數的預設值

我們都知道宣告函數可以設定形參，但你有沒有想過形參也可以直接設定預設值，我們接下來看看如何去寫

程式碼

function f(x,y=2) {
    return x+y
}
console.log(f(2)) // 4

上面的小範例只是設定了一個y的預設值2，然後我們使用這個函數的時候，只傳遞了x的參數2，所以我們會得到4，如果我們給y傳遞參數1呢？我們會得到什麼樣的結果，繼續看下面的例子

function f(x,y=2) {
    return x+y
}
console.log(f(2，1)) // 3

我們會得到3，因為你傳遞實參的話會替換預設值，更多的例子需要大家自己去實驗！ ！ ！

function f(x，x,y=2) {
    return x+y
}
console.log(f(2，2, 1)) // 报错

上面的例子會報錯，因為我們不能設定相同的參數

let x = 3
function f(x,y=x) {
    return x+y
}
console.log(f(2))

var x = 3
function f(x,y=x) {
    return x+y
}
console.log(f(2))

function f(x,y=x) {
    console.log(x,y) // 2 2
    var x = 3
    console.log(x,y) // 3 2
    return x+y
}
console.log(f(2)) // 5

上面三個例子是函數參數作用域的例子，我們來看第一個和第二個範例函數預設值會有一個自己單獨的作用域，所以我們在外面宣告修改的x是不會起作用的，但是第三個例子我們在函數內部修改x，我們可以看看我們印出的值可以看的未宣告之前我們的x，y都是2，這裡沒有變數提升，宣告下面x則變成了3，y依舊不變，所以得到5

rest 參數

官方注解：ES6 引入 rest 参数（形式为...变量名），用于获取函数的多余参数，这样就不需要使用arguments对象了。rest 参数搭配的变量是一个数组，该变量将多余的参数放入数组中

代碼

function f(...x) {
    console.log(x) // [1,2,3]
}
f(1,2,3)

上面的例子我們會得到一個數組，這正和它定義的一樣它會把多餘的變數一起放到一個數組裡面

function f(arr,y,...x) {
    console.log(x)
}

function f(arr,...x，y) {
}

上面的兩個例子第一個可以執行並且可以得到自己想要的結果，第二個則會執行報錯，因為rest參數只能放到最後一個參數位置使用

##嚴格模式下rest如何去使用?

从Es5开始函数内已经可以定义严格模式了，但Es6规定函数参数默认值定义严格模式会报错，但也要看严格模式定义在局部还是全局

嚴格模式不懂的可以去看看了解

嚴格模式

程式碼

 function fn(a=5) {
   'use strict';
   console.log(a)
   }
   fn()

上面這個例子我們在函數內部設定了嚴格模式但是它並沒有我們如期的那樣回傳結果，而是報錯了。我們來看看官方解釋：函數內部的嚴格模式，同時適用於函數體和函數參數。但是，函數執行的時候，先執行函數參數，然後再執行函數體。也就是說在函數內部定義嚴格模式，函數參數是先執行的函數體後執行（不定義嚴格模式也是先執行函數參數），這樣在函數體驗證參數是否為嚴格模式則為不合理存在

那我們該怎麼避免這樣的錯誤呢？  程式碼

   'use strict';
   function fn2(a=5) {
       console.log(a)
   }
   fn2()
   
    function fn() {
   'use strict';
       return function (a=5) {
           console.log(5)
       }
   }
   fn()() // 5

我們可以在全域定義嚴格模式，或是在一個函數內部定義然後回傳一個帶有參數的函數，這樣就可以繞過執行函數參數，執行函數體的時間不會報錯

name 屬性

 官方注解： 函数的name属性，返回该函数的函数名  使用方式   函数名.name

程式碼

function a() {
}
console.log(a.name) // a

function b() {
}
console.log(b.name) // a

上面兩個範例透過使用name屬性我們會得到函數的名字，當然Es5也能使用，大家可以去嘗試在Es6環境和Es5環境測試一下

箭頭函數

  let fn = a => a
  console.log(fn(10)) // 10
  
  // 对比
  
  let fn1 = function (a) {
      return a
  }
  console.log(fn1(10)) //10
  
  let fn2 =  (a,b) => a+b
  console.log(fn2(1,2))
  
  // 对比
  
  let fn21 = function (a,b) {
      return a+b
  }
  console.log(fn2(1,2))

我們可以看看上面的箭頭函數與Es5中我們常用書寫的函數的區別，就是大大縮減英文字母的編寫而且變得更簡潔了，其實箭頭函數和普通函數作用都差不多，而且簡單易懂，可以相互嵌套，對於自己代碼整潔度非常有幫主，鼓勵大家多使用箭頭函數，那麼箭頭函數也有幾個注意點需要大家記住

函數體內的this對象，就是定義時所在的對象，而不是使用時所在的對象（this指向固定）
1. 不可以當作建構函數，也就是說，不可以使用new指令，否則會拋出一個錯誤
2. 不可以使用arguments對象，該物件在函數體內不存在。如果要用，可以用rest 參數代替
3. 不可以使用yield命令，因此箭頭函數不能用作Generator 函數（這個函數到最後咱們會提到這裡看看就行）

#尾呼叫

 通俗的解释：就是在函数中最后一步调用函数

程式碼

  let fn = () => {
  console.log(123)
  return () => 5
  }
  console.log(fn()()) // 123     5

尾遞歸

let fn = (a,b) => {
  if(a===b) return b
  console.log(1)
  return fn(a+1, b)
  }
  console.log(fn(1,5))

在函數內部最後一步進行遞迴呼叫本身，從而達到遞歸的效果

#函數參數的尾逗號

Es7中允许函数形参最后一个带有逗号，以前都是不允许带有逗号的
  let fn = (a,) => {
      console.log(a)
  }
  fn(1)

上面一個例子我們在參數的後面加了一個逗號，執行結果之後發現可以正常運行，但是我在es6環境下也是不會報錯的試了下es5也不報錯，大家可以在去試試、

函數的擴充就到這裡了，最主要需要我們學的就是箭頭函和rest參數傳值，以及嚴格模式下函數的運作

#這篇文章到這裡就已經全部結束了，更多其他精彩內容可以關注PHP中文網的JavaScript教學影片專欄！

以上是es6函數的擴充介紹（程式碼範例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！