js-解构

解构主要包含两部分，数组解构和对象解构

一.数组解构

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

1. 赋值运算符 = 左侧的 [] 用于批量声明变量，右侧数组的单元值将被赋值给左侧的变量。

2. 变量的顺序对应数组单元值的位置依次进行赋值操作。

    const arr = [100, 60, 80]
    // 数组解构 赋值
    // // const [max, min, avg] = arr
    const [max, min, avg] = [100, 60, 80]，//这个是一一对应的。
    // // const max = arr[0]
    // // const min = arr[1]
    // // const avg = arr[2]
    console.log(max) // 100
    console.log(avg) // 80

注意点：

1. 赋值运算符 = 左侧的 [] 用于批量声明变量，右侧数组的单元值将被赋值给左侧的变量

2. 变量的顺序对应数组单元值的位置依次进行赋值操作

3. 变量的数量大于单元值数量时，多余的变量将被赋值为 undefined

4. 变量的数量小于单元值数量时，可以通过 ... 获取剩余单元值，但只能置于最末位

5. 允许初始化变量的默认值，且只有单元值为 undefined 时默认值才会生效

二.对象解构

基本语法：

1. 赋值运算符 = 左侧的 {} 用于批量声明变量，右侧对象的属性值将被赋值给左侧的变量

2. 对象属性的值将被赋值给与属性名相同的变量，只会将对象里属性名相同的赋值

3. 注意解构的变量名不要和外面的变量名冲突否则报错

4.对象中找不到与变量名一致的属性时变量值为 undefined

 const user = {
    name: '小明',
    age: 18
  };
  // 批量声明变量 name age
  // 同时将数组单元值 小明  18 依次赋值给变量 name  age
  const {name, age} = user

  console.log(name) // 小明
  console.log(age) // 18

修改变量名：用冒号，冒号表示“什么值：赋值给谁”

 对象解构的变量名 可以重新改名  旧变量名: 新变量名
    const { uname: username, age } = { uname: 'pink老师', age: 18 }

    console.log(username)
    console.log(age)

三.其他

        1.对于数组对象，记住的是，外围包含的中括号，小括号是对应的，其余写法与上面一样，每一个大括号表示第一个数组的对象。

const pig = [
      {
        uname: '佩奇',
        age: 6
      }
    ]
    const [{ uname, age }] = pig//每一个大括号表示第一个数组的对象
    console.log(uname)
    console.log(age)

        2.多级对象

        对象里面的对象，要加冒号来表示要结构给谁

 const pig = {
      name: '小明',
      family: {
        mother: '小明妈妈',
        father: '小明爸爸',
        brother: '二明'
      },
      age: 6
    }
const { name, family: { mother, father, sister } } = obj