解构赋值 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

解构赋值 Destructuring Assignment

可以看出，数组解构的对象必须是可迭代的对象

当想要获取的数组元元素不连续时，则需要将中间元素的值空出来

const arr = [1, 2, 3, 4, 5];

 const [num1, , num3, , num5];

 console.log(num1, num3, num5); // 1 3 5

秒客网

解构赋值 Destructuring Assignment

相关文章