解构赋值 Destructuring Assignment
ES6中可以通过一定的模式将数组或对象中的值直接赋值给外部变量，称为解构
-
对象的解构赋值
// 在ES5中，当需要获取一个对象中的变量值的时候，不得不进行过如下操作
const person = {
name: 'zhang',
age: 18,
hobby: 'coding'
}
let name = person.name;
let age = person.age;
let hobby = perosn.hobby;
// do something
// 在ES6中能够对对象进行解构赋值
const {name, age, hobby} = person;
console.log(name, age, hobby); // zhang 18 coding
// 以上情况必须保证外部变量名与解构的对象中的变量名一致对象解构过程中，外部变量名也可以与对象内部变量名不同,但此时不可以使用对象的缩写形式
const person = {
name: 'zhang',
age: 18,
hobby: 'coding'
}
const {name, age, hobby} = person;
// 上面的解构表达式实际上是一种缩写形式
// 其完整的形式如下：
const {name: name, age: age, hobby: hobby} = person;
// 只是在ES6中对象内部的属性名省略了，因此必须保证外部的变量名与对象内部变量名一致
当外部变量名与对象内部变量名不同时，必须要写完整的形式
const person = {
name: 'zhang',
age: 18,
hobby: 'coding'
}
const {name: newName, age: newAge, hobby: newHobby} = person;
console.log(newName, newAge, newHobby); // log 'zhang 18 coding'
// 对象解构赋值是将对象中而定变量赋值给newName，而不是赋值给name对象解构的嵌套
const family = {
father: {
name: 'fname',
age: 50
},
mother: {
name: 'mname',
age: 48
},
me: {
name: 'zhang',
age: 18
}
}
const {name: myName, age: myAge} = family.me;
console.log(myName, myAge); // log 'zhang 18'
const {b} = a;
const {b: {c}} = a;
const {b: {c: {d}}} = a;
const {b: {c: {d: {e}}}} = a;
console.log(b); // {c:{d:{e:{str: 'this is a string'}}}}
console.log(c); // {d:{e:{str: 'this is a string'}}}
console.log(d); // {e:{str: 'this is a stirng'}}
console.log(e); // {str: 'this is a stinrg'}
// 当结构复杂的时候可能需要慢慢分析-
当出现结构失败的情况是，会给变量赋值undefined
const person = {
name: 'zhang',
age: 18,
hobby: 'coding'
}
const {hate} = person;
console.log(hate); // undefined
// 当结构的变量不存在时，会给变量赋上undefined -
ES6中允许为变量添加默认值，当变量的解构赋值失败 --> 为变量赋值为undefined时，可以给变量添加默认值
需要注意的是：只有当变量值严格等于(===)undefined时才会赋默认值，当变量值为空串，false或者null时，是不会为变量赋默认值的
const car = {
price: 500000,
brand: 'BMW'
}
const {price='30000', brand='Mini', color='red'} = car;
console.log(price, brand, color); // log '500000 BMW red'
// 当进行解构赋值时，color赋值失败，其值为undefined，但在结构过程中为color指定默认值，因此，color被赋值'red'
// 比较
let obj = {
prop1: undefined,
prop2: '',
prop3: null,
prop4: false
}
const {prop1 = '1', prop2 = '2', prop3 = '3', prop4 = '4', prop5 = '5'} = obj;
console.log(prop1, prop2, prop3, prop4, prop5);
// log '1 null false 5'
// 当然空串输出是看不见的，此时只有prop1和prop5被赋上默认值，可以说明，只有当变量的值严格等于undefined时，才会触发默认赋值的操作
-
数组的解构赋值 ES5中想要获取数组元素的值，就要通过数组的索引值
const numList = [100, 200];
const first = numList[0];
const last = numList[numList.length - 1];
console.log(first, last); // log "100 200"ES6中同样为数组提供了解构赋值
const numList = [100, 200];
const [first, second] = numList;
console.log(first, second); // log "100 200"数组解构赋值的语法与对象的解构赋值类似，对应位置上的值可以赋值给变量。 考虑到数组的本质上也是一个对象，于是做了个测试，使用对象的对象解构赋值的方式获取数组的元素
const numList = [1, 2, 3, 4];
const {"0": num1, "1": num2} = numList;
console.log(num1, num2); // log "1 2"
// 使用数组解构伪数组的时候发现函数报错了
const obj = {
"0": 1,
"1": 2,
"2": 3,
legnth: 3
}
let [num1, num2, num3] = obj;
console.log(num1, num2, num3); // obj is not iterable可以看出，数组解构的对象必须是可迭代的对象
当想要获取的数组元元素不连续时，则需要将中间元素的值空出来
const arr = [1, 2, 3, 4, 5];
const [num1, , num3, , num5];
console.log(num1, num3, num5); // 1 3 5