ES6學習 函式引數預設值與解構賦值預設值

2021-09-25 17:32:22 字數 2408 閱讀 1840

1. es6的解構

es6中引入了解構賦值的操作,其作用是:將值從陣列array或屬性從物件object提取到不同的變數中

即分為兩種情況:從陣列array中解構,以及從物件object中解構

①.從陣列中解構

const [a, b] = [1, 2]

//a = 1, b = 2

當然這些是基本的陣列解構賦值,你還可以用逗號,進行跨值解構,用擴充套件運算子...進行多餘項的解構等等

②.從物件中結構

const =

//a = 1, b = 2

這也是基本的物件結構賦值,不過在這裡提一下,你仍然可以用擴充套件運算子...進行多餘項的解構:

const =

//a = 1

//b =

③. 其他型別

當解構其他型別時,也是先將其他型別值轉換為array或者object

const [a, b, c] = 'hello'

// a = 'h', b = 'e', c = 'l'

const = true

tostring === boolean.prototype.tostring // true

2. es6的函式預設引數

① 定義

函式預設引數允許在沒有值或undefined被傳入時使用預設形參。

栗子:function foo (a = 1, b = 2)

foo ()// 1 2

note: 形參預設是undefiend, 也就是說,在沒有預設值時,a = undefiend, b = undefined;不過上面這個例子是沒有值被傳入的情況

undefiend被傳入的情況如下:

function foo (a = 1, b = 2)

foo (undefined, window.valueisnotdefined)// 1 2

② 預設值不是只有函式引數才能用

還是直接舉個例子:

var = {}

// a = 1, b = 2

var =

// a = 'hello', b = 2

其實解構賦值也是可以賦值預設值的;由此可見:

函式引數預設值的本質,還是解構賦值

3. 乙個有趣的小栗子

說了那麼多廢話,終於要說到這個小栗子了。

step 1

這是一種超常見的情況,有的時候,當我們定義函式引數的時候,可以去解構當前的引數

比如:function foo ()

foo()// 1 2

note: 可以看成做了以下操作:

const = ;

console.log(a, b)

step 2

更多的時候,我們不會滿足於此,我們想要乙個預設值

function foo ()

foo({})// 1 2

note: 可以看成做了以下操作:

const = {};

console.log(a, b)

問題 1

然而,我們實際使用時,不會用foo({})這種寫法來表示引數預設,我們大多數人採用foo()這種顯而易見的寫法,由此問題來了

function foo ()

foo()

uncaught typeerror: cannot destructure property `a` of 'undefined' or 'null'.

at foo (:1:14)

at :4:1

通過換一種寫法,不難發現錯誤原因:

const = undefined // error

解決方法:

其實,function foo () {}是對第乙個引數的解構,那我們完全按照文章前面函式預設引數定義的那樣,在引數為undefined或沒有傳入的時候,預先定義:

function foo ( = )

foo()// 1 2

分析:可以看做以下寫法

function foo (temp = ) = temp

console.log(a, b)

}foo()// 1 2

問題 2

上面這種方法看似解決了問題,但當我們回過頭來,重新執行foo({}),卻出現了錯誤:

function foo ( = )

foo({}) // undefined undefined

經歷了前面情景的分析後,不難發現:此時的函式引數傳入了乙個有效值,所以temp不會去採納預設值,而是去採納有效的傳入值{}; 而var = {}的解構,自然而然會讓a和b變為undefined

解決方法:

var = {}的形式,可以解決這種情況,原函式寫作:

function foo ( = {})

foo()// 1 2

foo({})//1 2

方法引數 預設值 ES6 函式的預設值

es6 之前,不能直接為函式的引數指定預設值,只能採用變通的方法。function log x,y log hello hello world log hello 你好 hello china 這裡可以看到,檢查函式log的引數y有沒有賦值,如果沒有,則指定預設值為 哈嘍 這種寫法的缺點在於,如果引...

ES6 函式引數的預設值

在es6之前,不能直接為函式的引數指定預設值,只能採取變通的方法。function log x,y log kkk kkk world這種寫法的缺點在於 如果引數y賦值了,但是對應的布林值為false,則該賦值不起作用。如果在呼叫函式的時候,傳入的y引數是乙個空字串,那麼y就會被修改為預設值。避免這...

ES6 函式預設值

1 es6之前,函式如果需要預設值,需要在函式內額外處理,如 function log x,y log hello hello world log hello es6 hello es6 log hello hello world上述 中第二行,檢查y引數是否有值,如果沒有,將其賦值為預設值 wor...