ES6 乙個關於函式解構賦值預設值的有趣案例

2021-08-21 12:46:41 字數 3329 閱讀 3486

在說這個小案例前，先簡單的梳理一下es6的解構和預設值賦值

ps: 已經了解的同志的同志可以直接看小栗子

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
函式預設引數允許在沒有值或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
其實解構賦值也是可以賦值預設值的；由此可見：

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

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

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

比如：

function


foo () 


foo()// 1 2
note: 可以看成做了以下操作： 

const  = ;


console.log(a, b)
更多的時候，我們不會滿足於此，我們想要乙個預設值

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 解構賦值

陣列的解構賦值 let a,b 12,13 let a,b,c d 13,15,16 let a,b c 78,12 23 let x,y 1,3,5 x 1,y 3 let x,y,z a x a,y undefined z let h,b 1,2,3,4 1,2,3,4 預設值 let x tr...

ES6解構賦值

一 基本用法 解構 destructuring 按照一定的模式，從陣列或者物件中提取值，對變數進行賦值。let par1,par2,par3 1,2 console.log par1,par2,par3 1 2 不完全解構時par3對值為undefined 解構賦值允許指定變數對預設值。let pa...

es6解構賦值

coding changes the world accumulating makes yourself 主要從三個方面講述 陣列式的解構賦值 物件式的解構賦值 函式中的解構賦值 preface 現今的變數宣告語法十分的直接 左邊是乙個變數名，右邊可以是乙個陣列 的表示式或乙個物件 的表示式，等等。...