ES6（三）：变量的解构赋值
版权声明：本文为博主原创文章，未经博主允许不得转载。
解构赋值语法是一个Javascript表达式，这使得可以将值从数组或属性从对象提取到不同的变量中，文中主要讲数组的解构赋值、对象的解构赋值、字符串的解构赋值、数值和布尔值的解构赋值以及函数参数的解构赋值
数组的解构赋值
基本用法
ES6以前我们如果要定义三个变量的话需要这样做：
code
var a = 1,
b = 2,
c = 3;
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3使用解构赋值的话就好比“模式匹配”一般：
code
let [a, b, c] = [1, 2, 3];
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3只要等号两边的模式一样，就可以成功解构赋值：
code
let [
[a, [b]], c
] = [
[1, [2]], 3
];
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3如果两边的模式相同，但是右边少值的话就会解构不成功，导致左边的变量值为undefined：
cdoe
let [
[a, [b]], c
] = [
[1, []], 3
];
console.log(a); // 1
console.log(b); // undefined
console.log(c); // 3如果两边模式相同，但是左边少变量的话，依然可以将已有的变量赋值成功：
cdoe
let [
[a, [b]],
] = [
[1, [2]], 3
];
console.log(a); // 1
console.log(b); // 2
console.log(c); // ReferenceError: c is not defined等号的右边如果不是可遍历的机构则会报错：
cdoe
let [a] = 1;
console.log(a); // TypeError: 1 is not iterable
let [a] = false;
console.log(a); // TypeError: false is not iterable
let [a] = NaN;
console.log(a); // TypeError: NaN is not iterable
let [a] = undefined;
console.log(a); // TypeError: undefined is not iterable
let [a] = null;
console.log(a); // TypeError: null is not iterable
let [a] = {};
console.log(a); // TypeError: {} is not iterable指定默认值
在解构赋值中允许指定默认值。当一个位置没有值的时候，页就是当模式相同，但是右边没有值的时候可以指定默认值：
code
let [
[a, [b = 4]], c
] = [
[1, []], 3
];
console.log(a); // 1
console.log(b); // 4
console.log(c); // 3注意：
ES6内部使用严格相等运算符（===）判断一个位置是否有值。所以只有当一个数组成员严格等于undefined，默认值才会生效。
对象的解构赋值
变量的解构赋值和数组的解构赋值不太一样：
数组的解构赋值：元素是按次序排列的，变量的取值由变量所处的位置决定 对象的解构赋值：对象的属性没有次序，因此变量必须和属性同名才能取到 正确的值
*code
let { foo, bar } = { bar: '我是bar', foo: '我是foo' }
console.log(foo); // 我是foo
console.log(bar); // 我是bar从代码中可以看出来对象解构赋值的时候是和顺序无关的，而属性名字就显得尤为重要。
变量名与属性名不一致时如何解构赋值
code
let { bar: foo } = { bar: '我是bar' }
console.log(foo); // 我是bar
console.log(bar); // ReferenceError: bar is not defined以上代码的作用是把右边的bar解构赋值给foo，因为属性名不一样，所以需要用这种方式进行。
数组是特殊的对象
由于数组是特殊的对象，所以数组也支持对象属性的解构赋值：
code
let arr = [1, 2, 3];
let { 0: first, 1: second, 2: last } = arr;
console.log(first); // 1
console.log(second); // 2
console.log(last); // 3字符串的解构赋值
字符串在进行解构赋值的时候其实是被转化成为了一个类数组的对象。
code
let [a, b, c, d, e, f] = 'string';
console.log(a); // s
console.log(b); // t
console.log(c); // r
console.log(d); // i
console.log(e); // n
console.log(f); // g因为字符串具有length这个属性，因此我们还可以对该属性进行解构赋值：
code
let { length: len } = 'string';
console.log(len); // 6数值和布尔值的解构赋值
数值和布尔值也能进行解构赋值，此时他们都被转化为了对象。
code
let { toString: tos1 } = 456;
let { toString: tos2 } = false;
console.log(tos1 === Number.prototype.toString); // true
console.log(tos2 === Boolean.prototype.toString); // true函数参数的解构赋值
函数的参数也可以进行解构赋值，这是一个解构赋值运用比较多的场景，其实就是对之前所讲的数组、对象、布尔值、数值解构赋值的一种实际使用：
code
function add([a, b]) {
return a + b;
}
console.log(add([2, 3])); // 5这样做会让传参更加便捷，因为在传参的时候我们可以加入默认值，避免了a = ea || 0;这种类似的语句出现。解构赋值还是很好用的，熟悉之后会让我们的js语句更加合理，更加易于维护。
腾讯云开发者
