JavaScript(30)——解构

数组解构

数组解构是将数组的单元值快速批量赋值给一系列变量的简洁语法

基本语法：

1. 赋值运算符=左侧的[]用于批量声明变量，右侧数组的单元值将被赋值给左侧变量
2. 变量的顺序对应数组单元值的位置依次进行赋值操作

    const arr = [1, 2, 3, 4, 5]
    const [a, b, c] = arr
    console.log(a);
    console.log(b);

 

---

还可以交换两个值：必须使用let,且声明时要带分号

    let a = 1
    let b = 2;
    [b, a] = [a, b];
    console.log(a);
    console.log(b);

---

可以按需导入赋值

const [a,  ,c,d] = [1,2,3,4]

对象解构 

对象解构是将对象属性和方法快速批量赋值给一系列变量的简洁语法

基本语法：

1. 赋值运算符=左侧的[]用于批量声明变量，右侧对象的单元值将被赋值给左侧变量
2. 对象属性的值将被赋给与属性名相同的变量
3. 解构的变量名不要和外面的变量冲突
4. 对象中找不到的变量名时为underfined

    const { name, age } = { name: '公子', age: 20 }
    console.log(name);
    console.log(age);

---

但是可以修改解构时的变量名，语法为

旧变量名 : 新变量名 

    const { name: uname, age } = { name: '公子', age: 20 }

解构数组对象

    const ok = [
      {
        name:'okk',
        age:8
      }
    ]
    const [{name,age}] = pig

多级对象解构

    const op = {
      name: '公子',
      family: {
        one: '女士',
        two: '队长'
      },
      age: 22
    }

    const { name, family: { one, two }, age } = op
    console.log(name);