es6 函數的擴展

hqman 發布于2019-08-23 16:05 / 828人閱讀

摘要：我們來看一看官方解釋函數內部的嚴格模式，同時適用于函數體和函數參數。

函數參數的默認值

我們都知道聲明函數可以設置形參，但你有沒有想過形參也可以直接設置默認值，我們接下來看看如何去寫

代碼

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，因為你傳遞實參的話會替換默認值，更多的例子需要大家自己去實驗?。。?/p>

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指向固定）

不可以當作構造函數，也就是說，不可以使用new命令，否則會拋出一個錯誤

不可以使用arguments對象，該對象在函數體內不存在。如果要用，可以用 rest 參數代替

不可以使用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參數傳值，以及嚴格模式下函數的運作

GPU云服務器云服務器 es6字符串擴展 js模板擴展函數對象的擴展云計算的擴展

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/102677.html

es6 - 函數的擴展

摘要：函數的擴展上一篇，我們介紹了箭頭函數的內容箭頭函數。匿名函數的屬性的值為空字符串。最佳實踐新引入的默認參數和剩余參數特性都非常好用。推薦使用默認參數代替原來默認值的書寫方式，使用剩余參數代替的能力來操作參數。 es6 - 函數的擴展上一篇，我們介紹了es6箭頭函數的內容 - es6 - 箭頭函數。事實上，箭頭函數只是函數擴展中最有意思的那部分，除此以外，es6函數還增加了一些其他的...

youkede 2019-08-26 11:46 評論0 收藏0
《ES6標準入門》讀書筆記

摘要：標準入門讀書筆記和命令新增命令，用于聲明變量，是塊級作用域。用于頭部補全，用于尾部補全。函數調用的時候會在內存形成一個調用記錄，又稱為調用幀，保存調用位置和內部變量等信息。等到執行結束再返回給，的調用幀才消失。《ES6標準入門》讀書筆記 @(StuRep) showImg(https://segmentfault.com/img/remote/1460000006766369?w=3...

HollisChuang 2019-08-19 18:41 評論0 收藏0
ES6入門之對象的擴展

摘要：循環遍歷對象自身的和繼承的可枚舉屬性不含屬性。返回一個數組，包含對象自身的所有屬性的鍵名。目前，只有對象方法的簡寫法可以讓引擎確認，定義的是對象的方法。showImg(https://user-gold-cdn.xitu.io/2019/5/21/16ada8456223b0e1); 1. 屬性的簡潔表示法在ES6中允許直接寫入變量和函數，作為對象的屬性和方法，使得代碼的書寫更為簡潔。...

RiverLi 2019-05-23 11:58 評論0 收藏0
ES6學習手稿之基本類型擴展

摘要：它是一個通用標準，奠定了的基本語法。年月發布了的第一個版本，正式名稱就是標準簡稱。結語的基本擴展還有一些沒有在這里詳細介紹。前言 ES6標準以及頒布兩年了，但是，好像還沒有完全走進我們的日常開發。這篇文章從ES6的基本類型擴展入手，逐步展開對ES6的介紹。 ECMAScript和JavaScript JavaScript是由Netscape創造的，該公司1996年11月將JavaSc...

tommego 2019-08-21 18:25 評論0 收藏0
ES6入門之函數的擴展

摘要：如果所有函數都是尾調用，那么完全可以做到每次執行時，調用幀只有一項，這將大大節省內存。等同于等同于注意，只有不再用到外層函數的內部變量，內層函數的調用幀才會取代外層函數的調用幀，否則就無法進行尾調用優化。 showImg(https://segmentfault.com/img/bVbrTHp?w=1080&h=1920); 1. 函數參數的默認值 1.1 用法在ES6之前是不能為...

dackel 2019-08-02 16:15 評論0 收藏0
ES6入門之函數的擴展

摘要：如果所有函數都是尾調用，那么完全可以做到每次執行時，調用幀只有一項，這將大大節省內存。等同于等同于注意，只有不再用到外層函數的內部變量，內層函數的調用幀才會取代外層函數的調用幀，否則就無法進行尾調用優化。 showImg(https://segmentfault.com/img/bVbrTHp?w=1080&h=1920); 1. 函數參數的默認值 1.1 用法在ES6之前是不能為...

graf 2019-08-23 17:10 評論0 收藏0