解构是ES6的新特征，用于从JavaScript对象和数组中提取数据，语法上比ES5所供应的越发简约、紧凑、清晰。它不仅能削减你的代码量，还能从根本上转变你的编码体式格局。用的越多，你就会发明越多塑造数据和函数的体式格局，这些完成体式格局在过去几乎是不能够的。本文将深切探讨解构赋值，为你引见该新特征中你所须要知悉的统统。
什么是解构？
解构与组织数据截然相反。 比方，它不是组织一个新的对象或数组，而是逐一拆分现有的对象或数组，来提取你所须要的数据。
ES6应用了一种新形式来婚配你想要提取的数值, 解构赋值就是采纳了这类形式。 该形式会映照出你正在解构的数据构造，只需那些与该形式相婚配的数据，才会被提掏出来。
被解构的数据项位于赋值运算符 = 的右边，可所以任何数组和对象的组合，许可随便嵌套。用于给这些数据赋值的变量个数不限。
本文深切解说 解构赋值 中你所应知悉的知识点。假如想更好地邃晓它的事变道理，请参考 数组解构 和 对象解构。
数组解构
数组解构 应用一个数组作为一个数据项，你可以依据 数组形式 （用于从数组中婚配你所须要的数值）从这个数组内里提取数值给一个或许多个变量赋值。
数组形式 是依据数值的位置来判别哪些值是你想要提取的。它必需能精确地映照数组的构造，来要让数组形式中的每一个变量都被赋上 被解构数组中 位置与之相对应的值。
举几个例子来协助我们邃晓吧：
数组形式示例
把数组中一切的数值赋给一个个零丁的变量
// 设置数组
const avengers = ['Tony Stark', 'Steve Rogers', 'Natasha Romanoff'];
// 把数组解构赋值给变量。数组形式位于赋值运算符 `=` 的左侧，被构造的数组在
// 其右边。
const [ironMan, cap, blackWidow] = avengers;
// ironMan = 'Tony Stark'
// cap = 'Steve Rogers'
// blackWidow = 'Natasha Romanoff'
// 输出 ironMan:
ironMan; 提取除第一个外的一切数值
const avengers = ['Tony Stark', 'Steve Rogers', 'Natasha Romanoff'];
// 我们不必用到Tony
const [, cap, blackWidow] = avengers;
// ironMan = Error: undefined
// cap = 'Steve Rogers'
// blackWidow = 'Natasha Romanoff'
// 输出 cap:
cap;
提取除第二个外的一切数值
const avengers = ['Tony Stark', 'Steve Rogers', 'Natasha Romanoff'];
// cap 缺失
const [ironMan, , blackWidow] = avengers;
// ironMan = 'Tony Stark'
// cap = Error: undefined
// blackWidow = 'Natasha Romanoff'
// 输出 blackWidow:
blackWidow; 提取除末了一个外的一切数值
const avengers = ['Tony Stark', 'Steve Rogers', 'Natasha Romanoff'];
// ironMan vs cap
const [ironMan, cap] = avengers;
// ironMan = 'Tony Stark'
// cap = 'Steve Rogers'
// blackWidow = Error: undefined
// 输出 blackWidow:
ironMan; 嵌套数组
这类婚配形式也支撑嵌套数组，只需保证赋值运算符 = 左侧的数组形式与右边的数组构造相婚配即可。再次申明一下，= 左侧的变量都会被赋上 = 右边数组中位置与之相对应的值。 不管你怎样深层次地嵌套，仍可以对它们举行解构。
解构嵌套的数组
// Destructuring Nested Arrays
const avengers = [
'Natasha Romanoff',
['Tony Stark', 'James Rhodes'],
['Steve Rogers', 'Sam Wilson']
];
// Avengers and their partners
const [blackWidow, [ironMan, warMachine], [cap, falcon]] = avengers;
// blackWidow = 'Natasha Romanoff'
// ironMan = 'Tony Stark'
// warMachine = 'James Rhodes'
// cap = 'Steve Rogers'
// falcon = 'Sam Wilson'
// Output warMachine:
warMachine; 从深层嵌套的数组中提取一个值
// 从该数组中提取 Pepper Potts
const avengers = [
'Natasha Romanoff',
[['Tony Stark', 'Pepper Potts'], 'James Rhodes'],
['Steve Rogers', 'Sam Wilson']
];
// Destructure
const [ , // 跳过 'Natasha Romanoff'
[[ , // 跳过 'Tony Stark'
hera // Pepper Potts 赋值给变量 'hera'
]]] = avengers;
// 请注意：你也可以如许写
// const [, [[, hera ]]] = avengers;
// 输出 hera:
hera;
// hera = 'Pepper Potts' 应用rest操作符捕捉一切盈余项
假如你想要猎取特定的数组项，而且把盈余的项归在一个数组，那末你可以如许应用 rest操作符 来解构：
// 经由过程rest操作符解构
const avengers = ['Natasha Romanoff', 'Tony Stark', 'Steve Rogers'];
const [blackWidow, ...theOthers] = avengers;
theOthers;
// blackWidow = 'Natasha Romanoff'
// theOthers = ['Tony Stark', 'Steve Rogers']
// 输出 theOthers:
theOthers;
对象解构
对象解构就更奇异了，尤其是当你须要从一个庞杂的、深层嵌套的对象中取值时，其作用越发显著。重申一下，对象解构与数组解构用的是一样的划定规矩（即在赋值运算符左侧建立一个 对象形式， 使它的变量位置与 = 右边对象的值位置相婚配）。
在对象解构中，你须要指明那些须要被提取值的属性称号，以及将要被赋值的变量名。跟数组解构一样，我们须要在赋值运算符左侧先建立一个对象形式来映照被解构的对象。
只管在这类状况下，我们想要提取的是 对象属性的值 (如：我们从 { prop: value } 中提取 value)。响应地，我们的对象形式必需有一个变量，这个变量的位置要跟我们行将提取的属性值地点的位置一致。
简朴示例
提取一个简朴的对象属性值
我们可以如许做，来将对象 { ironMan: 'Tony Stark' } 的属性 ironMan 的值 'Tony Stark' 赋值给变量 a：
//解构对象的属性值，赋给单个变量 `a`:
const { ironMan: a } = { ironMan: 'Tony Stark' };
// 输出 a:
a; // a = 'Tony Stark ' 提取多个属性值
我们只需拓展雷同的形式，就可以够从一个对象中提取多个属性值，以下：
// Setup our object
const avengers = {
ironMan: 'Tony Stark',
cap: 'Steve Rogers',
blackWidow: 'Natasha Romanoff'
};
// Destructure object to individual variables
const {
ironMan: a,
cap: b,
blackWidow: c
} = avengers;
// a = 'Tony Stark '
// b = 'Steve Rogers'
// c ='Natasha Romanoff'
// Output a:
a; 视察一下这个解构形式是怎样确实地婚配 被解构对象 的。
嵌套的对象解构
像解构嵌套数组一样，我们可以对嵌套对象举行解构，不管它的层级多深。
// Setup our object
const avengers = {
blackWidow: 'Natasha Romanoff',
ironManCharacters: {
couple: {
ironMan: 'Tony Stark',
hera: 'Pepper Potts',
},
partner: {
warMachine: 'James Brodie'
}
},
capCharacters: {
cap: 'Steve Rogers',
partner: {
falcon: 'Sam Wilson'
}
}
};
// Destructure object to individual variables
const {
blackWidow: a,
ironManCharacters: {
couple: {
ironMan: b,
hera: c
},
partner: {
warMachine: d
}
},
capCharacters: {
cap: e,
partner: {
falcon: f
}
}
} = avengers;
// a = 'Natasha Romanoff'
// b = 'Tony Stark '
// c = 'Pepper Potts'
// d = 'James Brodie'
// e = 'Steve Rogers'
// f = 'Sam Wilson'
// Output a:
a; 给赋值的变量定名
固然，把变量名设为诸如 a, b, c 之类，是很蹩脚的，变量称号应该是有意义的。
冗杂式定名
// Setup our object
const avengers = {
ironMan: 'Tony Stark',
cap: 'Steve Rogers',
blackWidow: 'Natasha Romanoff'
};
// Destructure object to individual variables with meaningful names
const {
ironMan: ironMan,
cap: cap,
blackWidow: blackWidow
} = avengers;
// blackWidow = 'Natasha Romanoff'
// ironMan = 'Tony Stark '
// cap = 'Steve Rogers'
// Output blackWidow:
blackWidow;
这类做法比上面用 a,b,c 定名好，然则依然可以完美。 { ironMan: ironMan } 看起来有点丑而且不直观。
语法上定名捷径
假如你要把一个对象的属性值赋给一个变量，该变量的称号跟对象的属性称号一样，那末在 = 左侧的赋值形式内里，你只须要简朴地写属性名即可，以下：
// Setup our object
const avenger = {
ironMan: 'Tony Stark'
};
// Destructure object to individual variables with meaningful names
const {
ironMan // equivalent to 'ironMan: ironMan'
} = avenger;
// ironMan = 'Tony Stark '
// Output ironMan:
ironMan; 由于 被解构的对象属性称号 跟 被赋值的变量称号 雷同，我们只须要把称号列出来一次即可。
语法简约
我们轻微从新修整下前面的代码，就可以够使它们看起来越发简约明了：
// Setup our object
const avengers = {
ironMan: 'Tony Stark',
cap: 'Steve Rogers',
blackWidow: 'Natasha Romanoff'
};
// Destructure object to individual variables with meaningful names
const { ironMan, cap, blackWidow } = avengers;
// Output ironMan:
ironMan; 从对象中提取一个深层嵌套的属性
当我们要提取一个深层嵌套的对象属性时，事变就更风趣了：
// Setup our object
const avengers = {
blackWidow: 'Natasha Romanoff',
ironManCharacters: {
couple: {
ironMan: 'Tony Stark',
hera: 'Pepper Potts',
},
partner: {
warMachine: 'James Brodie'
}
},
capCharacters: {
cap: 'Steve Rogers',
partner: {
falcon: 'Sam Wilson'
}
}
};
// Destructure a deeply nested object
const { ironManCharacters: { couple } } = avengers;
// couple = {
// ironMan: 'Tony Stark',
// hera: 'Pepper Potts',
// }
// Output couple:
couple;
等等，你是怎样浏览这段代码的？couple 这个变量又是怎样被定义的呢？
经由过程如许拆分，我们就可以够看出赋值运算符 = 左侧是被解构对象的一个映照：
const avengers = {
ironManCharacters: {
couple: {
ironMan: 'Tony Stark',
hera: 'Pepper Potts',
}
}
};
const {
ironManCharacters: {
couple
}
} = avengers;
// Output couple:
couple; 仅仅应用 const { couple } = avengers; 并没有方法提掏出 couple 的值。只需把要提取的对象属性的 位置和称号映照出来，JS 编译器才获得响应的信息，沿着对象的一切属性往下查找，并正确地提取我们想要的值。
这里也要注意到 couple 用了语法捷径给变量定名，实际上是如许的：
const {
ironManCharacters: {
couple: couple
}
} = avengers;couple 就是如许被定义的，它的值就是对象 avengers 中属性名为 couple 的值。
给对象的属性解构赋值
到目前为止，我们都是解构对象的值来给单个的变量赋值，着实还可以给另一个对象的属性赋值。
const avengers = {
blackWidow: 'Natasha Romanoff',
ironManCharacters: {
couple: {
ironMan: 'Tony Stark',
hera: 'Pepper Potts'
}
}
};
const ironManProperties = {
family: {}
};
({
ironManCharacters: {
couple: ironManProperties.family
}
} = avengers);
ironManProperties.family
// ironManProperties.family = {
// ironMan: 'Tony Stark',
// hera: 'Pepper Potts'
// }
// Output ironManProperties.family:
ironManProperties.family;
在这里我们把 ironManCharacters.couple 的值赋给了 ironManProperties.family 这个属性，这里有两点须要申明一下：
1. 解构赋值必需被包含在 圆括号 内
当我们在对一个已存在的变量（如上面例子中的 ironManProperties）举行解构时，肯定要如许做，而不是去声明一个新的变量。
2. 形式依然相婚配
{ ironManCharacters: { couple... } } 与对象 avengers 中的 ironManCharacters 相婚配。如许就可以如你所愿，从 avengers 对象中提掏出 ironManCharacters.couple 的值了。然则如今，couple 背面安排了一个新的对象ironManProperties 和它的属性 family，着实被赋值的就是这个对象的属性ironManProperties.family了。
当你尝试把这类状况诠释清晰时，是不是另有所疑心呢？在jsfiddle内里尝试上面的代码，统统就明了了。
假如你不清晰本身为什么要如许做，请参考下一篇文章的例子。这些例子会通知你，为什么采纳这类形式来解构API挪用的 JSON 对象，让你邃晓解构的奇异的地方！
默认值
解构时，你还可以给变量指定一个默认值：
// Setup our object
const avengers = {
ironMan: 'Tony Stark',
cap: 'Steve Rogers',
blackWidow: 'Natasha Romanoff'
};
// Destructure using defaults
const { ironMan, cap, blackWidow, theHulk='Bruce Banner' } = avengers;
// ironMan = 'Tony Stark'
// cap = 'Steve Rogers'
// blackWidow = 'Natasha Romanoff'
// theHulk = 'Bruce Banner'
// Output blackWidow:
blackWidow; 解构时要防止涌现这些题目
解构赋值时没有应用 const, let, var
在讲到对 对象属性 举行解构赋值时就已说起了这一点，但这里照样有必要再重申一下，让人人有个深入的印象。
不能对已声明的变量举行解构
也就是说，你只能在对变量解构赋值的同时声明变量。
// Setup our object
const avengers = {
ironMan: 'Tony Stark',
cap: 'Steve Rogers',
blackWidow: 'Natasha Romanoff',
theHulk: 'Bruce Banner'
};
// Valid destructuring
const { ironMan } = avengers;
let { cap } = avengers;
var { blackWidow } = avengers;
// Invalid destructuring
let theHulk;
{ theHulk } = avengers;
// Error
// Output theHulk:
theHulk;
为什么不能对一个已声明的变量举行解构呢？那是由于这时候假如你应用了花括号 { ，JavaScript会以为你是在声明一个 block。
处理的方法就是把全部解构赋值用一对 圆括号 括起来。
怎样对一个已声明的变量举行解构赋值
// Setup our object
const avengers = {
ironMan: 'Tony Stark',
cap: 'Steve Rogers',
blackWidow: 'Natasha Romanoff',
theHulk: 'Bruce Banner'
};
// A valid Hulk
let theHulk;
({ theHulk } = avengers);
// theHulk = 'Bruce Banner'
// Output theHulk:
theHulk;
如今我们不是以花括号开首，所以JS不会以为我们是在声明一个 block ，如许就可以够到达预期的解构结果。
直接返回一个被解构的值
在没有先声明一个接下来要被返回的变量时，就直接返回一个被解构的值，如许是没法到达预期结果的。比方，下面的代码中，返回的将是全部 ironMan对象，而不是预期要的值 Tony Stark。
// Note: this doesn't work!
function getTonyStark(avengers){
return { ironMan: { realName } } = avengers;
// return the avengers object, not the realName value
}
const avengers = {
ironMan: {
realName: 'Tony Stark'
}
};
const tonyStark = getTonyStark(avengers);
// tonyStark = {
// ironMan: {
// realName: 'Tony Stark'
// }
// };
// Output tonyStark:
tonyStark;
要从一个被解构的对象中提取值，必需先把它赋值给一个变量，然后再把这个变量返回，以下代码所示：
// Note: this DOES work!
function getTonyStark(avengers){
const { ironMan: { realName } } = avengers;
return realName;
}
const avengers = {
ironMan: {
realName: 'Tony Stark'
}
};
const tonyStark = getTonyStark(avengers);
// tonyStark = 'Tony Stark'
// Output tonyStark:
tonyStark;
这类把赋值和返回分红两行代码的做法着实引人讨厌，代码貌寝，也显得没必要。但很不幸，JavaScript就是如许事变的—-你必需先把解构的值赋给一个变量，然后再把它返回，两步必需离开做。
然则，没有说我们只是说离开做，并没有说肯定要摆成两行代码，所以像下面如许写成一行，也是能到达预期结果的：
function getTonyStark(avengers){
return ({ ironMan: { realName } } = avengers) && realName;
}
const avengers = {
ironMan: {
realName: 'Tony Stark'
}
};
const tonyStark = getTonyStark(avengers);
// tonyStark = 'Tony Stark'
// Output tonyStark:
tonyStark;
由于JavaScript的 _short-circuit_ 逻辑操作符 (&& and ||) 会基于第一个操作数的值来返回第二个操作数的值，所以这类写法可以到达预期结果。这里，第一个操作数是解构赋值表达式，把值赋给 realName。而 realName 也就是第二个操作数，所以它的值终究被返回。
如许做不是最好的，然则能完成。在寻求代码简短的同时，肯定要注意代码的可读性。
总结
本文深切解说了 解构赋值 的重要准绳。虽然如许让你邃晓了解构是假如事变的，然则还不足以向你说明怎样真正应用这个壮大的观点。
因而，下一篇文章，我会排列一些高等的解构技能，真正地展现解构的魔力，这些体式格局你能够从未思考过。
拓展浏览
ES6解构篇2 – 高等技能
The next post in this series
本文的jsfiddle
网上关于解构的文章
假如你还想浏览更多，请看下面链接：
