解构的用法

Object的解构

假如我们有一个对象 obj

const obj = {
      name: "zhangsan",
      age: 20,
      gender: "male",
}

通常情况我们要获取到 obj 内的属性，需要分别定义变量通过 . 操作符获取

const name = obj.name,
      age = obj.age,
      gender = obj.gender

通过解构可以更加简洁的获取对象属性值，可以颠倒顺序，下面三组结果都是一样的

const { name, age, gender } = obj 
const { name, gender, age } = obj 
const { gender, name, age } = obj

如果希望换一种变量名字需要用到 : 操作符

const { name: myName, age: myAge, gender: myGender } = obj

还可以给变量附加默认值，如果 obj 没有 name 属性就使用默认值，这样即使 obj 内没有对应属性名也不会出错

const {name = "zs", age, gender} = obj

如果不使用解构

const name = obj.name // undefined

假如对象是多层嵌套

const obj = {
      name: "zhangsan",
      hobby: {
        a: "play",
        b: "eat"
      }
}

如果需要取到 obj 内部 hobby 对象的属性，同样也可以改名和赋默认值

const { hobby:{a: myPlay = "computer games"}, hobby:{b} } = obj

Array的解构

类似于对象，如果有一个数组

const array = ["zhangsan", "lisi", "wangwu"]

通过解构方法给三个变量赋值

const [ name1, name2, name3 ] = array

还可以把字符串拆分后赋值给变量

 const str = "zhangsan 20 male"
 const arr = str.split(" ")
 const [ name, age, gender ] = arr
 console.log({name, age, gender}); // name: "zhangsan", age: "20", gender: "male"

互换变量的值，还可以交换多个变量，原理一样

let a = 11;
let b = 22; // 分号不能省，否则会报错
[a, b] = [b, a];
console.log(a, b);