ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。
{ let a, b, rest [a, b] = [1, 2] console.log(a, b) // 1 2 }
结构赋值展开符特性
{ let a, b, rest [a, b, ...rest] = [1, 2, 3, 4, 5, 6] console.log(a, b, rest) // 1 2 [3, 4, 5, 6] }
结构赋值可以设置默认值, 并且如果左右匹配数量不对, 未匹配到的变量值为 undefined
{ let a, b, rest [a, b, rest = 3] = [1, 2] console.log(a, b, rest) // 1 2 3 } { let a, b, rest [a, b, rest] = [1, 2] console.log(a, b, rest) // 1 2 undefined }
解构赋值使用场景--变量值交换
{ let a = 1; let b = 2; [a, b] = [b, a]; console.log(a, b) // 2 1 }
函数多个返回值的接收
{ function test() { return [1, 2] } let a, b [a, b] = test() console.log(a, b) // 1 2 }
选择性接收值
{ function test() { return [1, 2, 3, 4] } let a, b [a, , b] = test() console.log(a, b) // 1 3 }
不知道返回值返回几个, 只要第一个, 剩余的可以接收数组形式
{ function test() { return [1, 2, 3, 4] } let a, b [a, ...b] = test() console.log(a, b) // 1 [2, 3, 4] }
{ let a, b ({a, b} = {a: 1, b: 2}) console.log(a, b) // 1 2 }
对象结构赋值默认值
{ let {a = 10, b = 5} = {a: 3} console.log(a, b) // 3 5 }
使用场景, 服务端返回数据
{ let metaDate = { title: ‘title‘, test: [ { title: ‘test‘, desc: ‘description‘ } ] } let {title: esTitle, test: [{title: cnTitle}]} = metaDate console.log(esTitle, cnTitle) // title test }
上边的代码是说，对象的解构赋值的内部机制，是先找到同名属性，然后再赋给对应的变量。真正被赋值的是后者，而不是前者。
使用场景, 对象的解构赋值，可以很方便地将现有对象的方法，赋值到某个变量。
let { log, sin, cos } = Math;
上面代码将Math对象的对数、正弦、余弦三个方法，赋值到对应的变量上，使用起来就会方便很多。
{ let a, b, c, d [a, b, c, d] = ‘中华曲库‘ console.log(a, b, c, d) // 中 华 曲 库 let {length : len} = ‘hello‘; console.log(len) // 5 }
变量解构赋值的用途：
原文：https://www.cnblogs.com/helzeo/p/11811452.html