ES6之函式的擴充套件

wade3po發表於2019-04-30

ES6對函式的擴充套件函式蠻多的,不過常用的估計也就是預設值和箭頭函式了。

函式引數預設值:

估計很多人都這樣用過預設值:

var a = 10;

var b = a || 1
複製程式碼

正常情況下沒有問題,但是要是a是0或者是false等會被轉換成Boolean型別false的時候就會出錯。ES6對引數的預設值允許直接設定:

function fn(x = 10, y = 20) {  

  console.log(x);  

  console.log(y);

}

fn()// 10 20
複製程式碼

引數預設值相當於你考慮了沒有引數的情況,沒有引數也不會報錯。要注意的是引數變數不能用let或者const再次宣告,不允許同名。引數預設值位置是不能跳過的,想要跳過預設想要傳undefined,null無效。還有一點,沒有默傳參情況下才會賦值:

function fn(x = (function () {  

  console.log('執行');

})(), y = 20) {



}

fn()//執行fn(10)

複製程式碼

引數預設值和解構賦值配合使用:

function fn({x = 10, y = 20} = {}) {  

  console.log(x);  

  console.log(y);

}

fn()//10 20

fn({x: 30, y: 40})//30 40
複製程式碼

Length屬性:

簡單說就是引數個數:

function fn(a, b, c) {}

console.log(fn.length);//3
複製程式碼

有預設值的時候,這個length只會計算最後面有預設值之前的引數個數:

function fn(a = 0, b, c) {}

console.log(fn.length);//0

function fn(a, b = 0, c) {}

console.log(fn.length);//1

function fn(a, b, c = 0) {}

console.log(fn.length);//2

function fn(a = 0, b = 0, c) {}

console.log(fn.length);//0
複製程式碼

函式引數作用域:

設定函式引數預設值的時候,引數會形成一個單獨的作用域,初始化接收作用域消失。注意,只有設定預設值的時候才會。

var a = 1;function fn(a, b = a) {  

  console.log(a);

}

fn(10)//10
複製程式碼

形成一個作用域,b指向了引數裡面的a

var a = 1;

function fn(b = a) {  

  var a = 10;  

  console.log(b);

}

fn()//1
複製程式碼

形成作用域,a沒有找到就向外尋找,找到全域性的a。

Rest引數:

函式有一個arguments引數,我們可以用陣列的方法去獲取內容,但是arguments不是陣列,用不了陣列的方法。Rest引數其實就是用擴充套件運算子把引數變成一個陣列:

function fn(...val) {   

 console.log(val);

}

fn(1, 2, 3)//[1, 2, 3]
複製程式碼

嚴格模式:

ES5之後可以函式內部使用嚴格模式,ES6只要使用了預設值、解構賦值、或者擴充套件運算子就不能使用

function fn() {  

  'use strict'

}

複製程式碼

Name屬性:

ES6對name有一些調整,優先函式名字,其次函式變數的名字,Function建構函式會返回anonymous,通過bind改變this的會加bound

function fn() {}

console.log(fn.name);//fn

var fn = function () {}

console.log(fn.name);//fn

var fn = function ffn() {}

console.log(fn.name);//ffn

console.log((new Function).name);//anonymous

function fn() {}

console.log(fn.bind({}).name);//bound fn

複製程式碼

箭頭函式:

這應該不用多說了,現在幾乎都使用箭頭函式,之前也有分享過箭頭函式的一些內容。

雙冒號運算子:

雙冒號左邊是一個物件,右邊是一個函式。該運算子會自動將左邊的物件,作為上下文環境(即this物件),繫結到右邊的函式上面。這好像目前是一個提案,我試著寫了寫,執行報錯。

尾呼叫優化:

尾呼叫是被忽略的,所以單獨分享了一篇尾呼叫優化的,可以檢視。

函式引數尾逗號:

我們函式不管是呼叫還是定義的時候,都不會在引數最後面加個逗號,ES2017才開始允許加逗號不報錯:

function fn(a, b,) {  

  console.log(a);  

  console.log(b);

}

fn(10, 20,)
複製程式碼

Coding 個人筆記

ES6之函式的擴充套件

相關文章