后知后觉的解构赋值，原来如此

大神常用而菜鸟不清楚的 对象解构赋值

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得以执行

学如逆水行舟，爱进不进