後知後覺的解構賦值，原來如此

大神常用而菜鳥不清楚的 對象解構賦值

1、普通對象解構賦值

let obj = {
  a: 1,
  b: `I'm b`
}
let { a, b } = obj  
console.log(a,b) // 1 I'm b

普普通通的解構賦值，就像我普普通通地學了幾個小時。

2、進階嵌套解構賦值

let obj = {
	a: 1,
	c: { b: `I'm b` }
}
let { a, c:{ b } } = obj
console.log(a,b) // 1 I'm b

進階的嵌套賦值，學它像低階植物打高階殭屍。

3、超階版已聲明變量解構賦值

let obj = {
 a: 1,
 b: `I'm b`
}
let a = 3;
({ a } = obj) 
/* 此處需要用小括號括住，因爲賦值是從右往左的，這句代碼可以按照數學的常規概念(1+1=2)可以這樣理解，
obj = { a },但是js遇到{}花括號時會認爲它是一個代碼塊/作用域，我們不能給代碼塊/作用域賦值，
所以要加上一個（）來告訴js這不是代碼塊/作用域，而是一個表達式。 */
console.log(a) // 1

// 稍微進階下
// 還是上面的obj
({ a } = obj) // 此時沒有let a = 3，說明是可以不聲明變量進行結構賦值的
console.log(a) // 1

// 超階的意思是進階後再進階
// 還是上面的obj
let a = 3
let objBro
objBro = { a } = obj
console.log(objBro,a) // { a: 1, b: `I'm b`} 1
/* you see, obj通過解構賦值後的結果，仍是obj本身，這時 objBro === obj 爲true，
這個實際應用中可能有些雞肋，但是有些破公司面試有可能會用到 */

超階學習，猝死不足惜

4、返璞歸真字符串解構賦值

let [a,b,c,d] = '1234'
console.log(a,b,c,d) // 1 2 3 4

如果喜歡你也如此簡單，我能喜歡你一億次

大神常用而菜鳥不知道的 數組解構賦值

let [a, b, c] = [1, 2, 3] // a=1, b=2, c=3
let [a, [b], c] = [1, [2], 3] // 嵌套數組解構 a=1, b=2, c=3
let [a, ...b] = [1, 2, 3] // 數組拆分 a=1, b=[2, 3]
let [a,,b] = [1, 2, 3] // 不連續解構 a=1, b=3
let [a,b] = [1, 2, 3] // 不完全解構 a=1, b=2

沒什麼難度，就像太陽落下，太陽升起，我又開始喜歡你

大神常用而“一點就透”聽過知道但發給她看不懂的 函數解構賦值

// es5 函數使用形參
function animals(dog,cat,pig,fox){
	console.log(dog,cat,pig,fox) // 結果顯而易見
	let obj = {
		sb: dog || '白眼婷' // 防止未傳遞參數，下面有關obj.sb的業務邏輯無法執行，所以 || 一份保險
	}
	// 執行obj.sb有關業務邏輯
}
animals(，'白領婷','黃臉婷','黃婷')
// 這種函數傳遞形參的方式，是固定的，一但dog與pig相反，那值就亂了，雖然意思差不多,但做人一定要拎得清


// es6 函數使用形參
function animals({ pig, cat, dog = '白眼婷', fox} = {}){
	console.log(dog,cat,pig,fox) // 結果顯而易見，參數也不會變，媽媽再也不用擔心我拎不清了
	let obj = {
		sb: dog  // 另一種提前聲明的方式
	}
	// 執行obj.sb有關業務邏輯
}
const obj = {
  pig: '黃臉婷',
  cat: '白領婷',
  fox: '黃婷'
}
animals(obj) // 不用擔心參數位置不對，也不用擔心沒有dog，sb得以執行

學如逆水行舟，愛進不進