一个解构赋值不常用的技巧

需求:

1. 声明空变量 var a,b,c,d;
2. 已有对象 obj = { a: 1, b: 2, c: 3, d: 4 };
3. 在 if 判断里将 obj的abcd 赋值给变量 abcd;
4. if以外,还需要调用abcd;

一般来说,直接赋值就可以了:

var a, b, c, d;
var obj = { a: 1, b: 2, c: 3, d: 4 };

if (true) {
	a = obj.a
	b = obj.b
	c = obj.c
	d = obj.d
}
console.log(a, b, c, d) //1 2 3 4

但实际情况, 变量 abcd 不止4个, 命名还较复杂
对象 obj 比较长,调用层比较深
所以就想到用 ES6 的解构赋值处理

var obj = { a: 1, b: 2, c: 3, d: 4 };
var { a, b, c, d } = obj

console.log(a, b, c, d) //1 2 3 4

虽然看起来很和谐,但冷静分析->稍加思索->发现事情并不简单
解构赋值的声明和赋值是一步到位的呀!
也就是说在 if外 声明就不能在 if里 判断; 在 if里 声明就不能在 if外 调用;
强行分开的后果更严重,因为 {} = obj 并不是合法代码

var a, b, c, d;
var obj = { a: 1, b: 2, c: 3, d: 4 };

if (true) {
	{ a, b, c, d } = obj
	//Uncaught SyntaxError: Unexpected token '='
}

console.log(a, b, c, d);

一番思索过后,我决定换一个思路解决问题
解构赋值不可以分开,但右边可以为空

var obj = { a: 1, b: 2, c: 3, d: 4 };
var obj2 = {};
if (true) {
	obj2 = obj
}
var { a, b, c, d } = obj2

console.log(a, b, c, d) //1 2 3 4

可现在多了一个无用变量,这并不符合我的代码风格,于是我继续思考.最后,想到了解构对象的无声明赋值

var a, b, c, d;
var obj = { a: 1, b: 2, c: 3, d: 4 };

if (true) {
	({ a, b, c, d } = obj)
}

console.log(a, b, c, d) //1 2 3 4

之前没有用过这个功能,只是在不知道哪里看过一次,仅需加一层()包着就实现需求,优雅!

提交代码之后,上网找相关资料"解构赋值 - JavaScript | MDN"才知道这个技巧叫解构对象之无声明赋值

---

补充:

var { a, b, c, d } = obj
// 是简写

var { a: a, b: b, c: c, d: d } = obj
// 正式写法应该如此

var { a: A, b: B, c: C, d: D } = obj
// 赋值对象名也可以更改

// 所以解构赋值应该理解为
var A = obj.a
// ...

//end