es6 函數(shù)的擴(kuò)展

hqman 發(fā)布于2019-08-23 16:05 / 867人閱讀

摘要：我們來看一看官方解釋函數(shù)內(nèi)部的嚴(yán)格模式，同時(shí)適用于函數(shù)體和函數(shù)參數(shù)。

函數(shù)參數(shù)的默認(rèn)值

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

代碼

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

上面的小例子只是設(shè)置了一個(gè)y的默認(rèn)值2，然后我們使用這個(gè)函數(shù)的時(shí)候，只傳遞了x的參數(shù)2，所以我們會(huì)得到4，如果我們給y傳遞參數(shù)1呢？我們會(huì)得到什么樣的結(jié)果，繼續(xù)看下面的例子

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

我們會(huì)得到3，因?yàn)槟銈鬟f實(shí)參的話會(huì)替換默認(rèn)值，更多的例子需要大家自己去實(shí)驗(yàn)?。?！

function f(x，x,y=2) {
    return x+y
}
console.log(f(2，2, 1)) // 報(bào)錯(cuò)

上面的例子會(huì)報(bào)錯(cuò)，因?yàn)槲覀儾荒茉O(shè)置相同的參數(shù)

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

上面三個(gè)例子是函數(shù)參數(shù)作用域的例子，我們來看一下第一個(gè)和第二個(gè)例子函數(shù)默認(rèn)值會(huì)有一個(gè)自己多帶帶的作用域，所以我們?cè)谕饷媛暶餍薷牡膞是不會(huì)起作用的，但是第三個(gè)例子我們?cè)诤瘮?shù)內(nèi)部修改x，我們可以看一看我們打印的值可以看的未聲明之前我們的x，y都是2，這里沒有變量提升，聲明下面x則變成了3，y依舊不變，所以得到5

rest 參數(shù)

官方注解：ES6 引入 rest 參數(shù)（形式為...變量名），用于獲取函數(shù)的多余參數(shù)，這樣就不需要使用arguments對(duì)象了。rest 參數(shù)搭配的變量是一個(gè)數(shù)組，該變量將多余的參數(shù)放入數(shù)組中

代碼

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

上面的例子我們會(huì)得到一個(gè)數(shù)組，這正和它定義的一樣它會(huì)把多余的變量一起放到一個(gè)數(shù)組里面

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

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

上面的兩個(gè)例子第一個(gè)可以執(zhí)行并可以得到自己想要的結(jié)果，第二個(gè)則會(huì)執(zhí)行報(bào)錯(cuò)，因?yàn)閞est參數(shù)只能放到最后一個(gè)參數(shù)位置使用

嚴(yán)格模式下rest如何去使用?

從Es5開始函數(shù)內(nèi)已經(jīng)可以定義嚴(yán)格模式了，但Es6規(guī)定函數(shù)參數(shù)默認(rèn)值定義嚴(yán)格模式會(huì)報(bào)錯(cuò)，但也要看嚴(yán)格模式定義在局部還是全局

嚴(yán)格模式不懂的可以去看看了解
嚴(yán)格模式

代碼

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

上面這個(gè)例子我們?cè)诤瘮?shù)內(nèi)部設(shè)置了嚴(yán)格模式但是它并沒有我們?nèi)缙诘哪菢臃祷亟Y(jié)果，而是報(bào)錯(cuò)了。我們來看一看官方解釋：函數(shù)內(nèi)部的嚴(yán)格模式，同時(shí)適用于函數(shù)體和函數(shù)參數(shù)。但是，函數(shù)執(zhí)行的時(shí)候，先執(zhí)行函數(shù)參數(shù)，然后再執(zhí)行函數(shù)體。也就是說在函數(shù)內(nèi)部定義嚴(yán)格模式，函數(shù)參數(shù)是先執(zhí)行的函數(shù)體后執(zhí)行（不定義嚴(yán)格模式也是先執(zhí)行函數(shù)參數(shù)），這樣在函數(shù)體驗(yàn)證參數(shù)是否為嚴(yán)格模式則為不合理存在

那我們?cè)撛趺幢苊膺@樣的錯(cuò)誤呢？
代碼

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

我們可以在全局定義嚴(yán)格模式，或是在一個(gè)函數(shù)內(nèi)部定義然后返回一個(gè)帶參數(shù)的函數(shù)，這樣就可以繞過執(zhí)行函數(shù)參數(shù)，執(zhí)行函數(shù)體的時(shí)候不會(huì)報(bào)錯(cuò)

name 屬性

 官方注解： 函數(shù)的name屬性，返回該函數(shù)的函數(shù)名  使用方式   函數(shù)名.name

代碼

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

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

上面兩個(gè)例子通過使用name屬性我們會(huì)得到函數(shù)的名字，當(dāng)然Es5也能使用，大家可以去嘗試在Es6環(huán)境和Es5環(huán)境測(cè)試一下

箭頭函數(shù)

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

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

函數(shù)體內(nèi)的this對(duì)象，就是定義時(shí)所在的對(duì)象，而不是使用時(shí)所在的對(duì)象（this指向固定）

不可以當(dāng)作構(gòu)造函數(shù)，也就是說，不可以使用new命令，否則會(huì)拋出一個(gè)錯(cuò)誤

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

不可以使用yield命令，因此箭頭函數(shù)不能用作 Generator 函數(shù)（這個(gè)函數(shù)到最后咱們會(huì)提到這里看看就行）

尾調(diào)用

 通俗的解釋：就是在函數(shù)中最后一步調(diào)用函數(shù)

代碼

  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))

在函數(shù)內(nèi)部最后一步進(jìn)行遞歸調(diào)用本身，從而達(dá)到遞歸的效果

函數(shù)參數(shù)的尾逗號(hào)

Es7中允許函數(shù)形參最后一個(gè)帶有逗號(hào)，以前都是不允許帶有逗號(hào)的
  let fn = (a,) => {
      console.log(a)
  }
  fn(1)

上面一個(gè)例子我們?cè)趨?shù)的后面加了一個(gè)逗號(hào)，執(zhí)行結(jié)果之后發(fā)現(xiàn)可以正常運(yùn)行，但是我在es6環(huán)境下也是不會(huì)報(bào)錯(cuò)的試了下es5也不報(bào)錯(cuò)，大家可以在去試試、

函數(shù)的擴(kuò)展就到這里了，最主要需要我們學(xué)的就是箭頭函和rest參數(shù)傳值，以及嚴(yán)格模式下函數(shù)的運(yùn)作

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/102677.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

hqman

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

tensorflow

閱讀 709·2023-04-25 18:37
SCADA系統(tǒng)資料整理-概論

閱讀 2854·2021-10-12 10:12
主機(jī)號(hào)和主機(jī)數(shù)是什么-主機(jī)號(hào)怎么填寫？

閱讀 8530·2021-09-22 15:07
三種方法實(shí)現(xiàn)CSS三欄布局

閱讀 618·2019-08-30 15:55
前端面試每日3+1——第119天

閱讀 3232·2019-08-30 15:44
瀏覽器工作原理整理

閱讀 2253·2019-08-30 15:44
CSS 居中完全指南

閱讀 1688·2019-08-30 13:03
CSS：元素高度與寬度的討論系列文章(四)

閱讀 1618·2019-08-30 12:55

成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲中文字幕日韩无码

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購(gòu)！

es6 函數(shù)的擴(kuò)展

相關(guān)文章