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