JavaScript の 解构

解构

数组解构

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

语法：

  const arr = [1,2,3]
  const [a,b,c] = arr//这就是数组解构，相当于将数组中的元素依次赋值给了a,b,c
  const [x,y,z] = [4,5,6]//这样也行

常用于交换两个变量

  let a = 1
  let b = 2;//注意这里要加分号
  [a,b] = [b,a]

以数组开头的语句记得在上一句后面加上分号，因为编译器会默认将数组并到上一行去，需要加上分号将其隔开

变量与数组元素个数不相同的情况

  const arr = [1,2,3]
  const [a,b,c,d] = arr //a,b,c分别为1,2,3 d为undefined
  const [x,y] = arr //x,y分别为1,2
  const [z,...e] = arr //使用剩余参数，z为1，e为数组[2,3]
  const [h,i=0] = [1] //数组解构也有默认参数，h为1，i为0
  const [j, ,k] = [1,2,3] //可以进行忽略，j为1，k为3
  //总体与函数的参数传递相类似

多维数组解构

  const [a,b,[c,d]] = [1,2,[3,4]] //abcd依次为1234

对象解构

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

语法：

  const obj = {
    uname:"hahe",
    sex:"male"
  }
  const {uname,sex} = obj //要求变量的名称与属性的名称必须一样，此时将"hahe"赋值给变量uname，"male"赋值给变量sex

注意变量的名称与属性的名称必须一样

  const obj = {
    uname:"lala",
    age:23
  }
  const {uname:name,age} = obj //可以修改变量名，此时就是将"lala"赋值给了变量name，23赋值给变量age

多级对象解构

  const obj = {
    name:"mama",
    family:{
      son:"erzei"
      die:"nengdie"
    },
  age:43
  }
  const {name,family:{son,die},age} = obj

解构作为函数参数传递

  const obj = {
    cod:111
    time:222
    data:[{
      a:1,
      b:2,
      c:3
    }]
  }
  function fn ({data}) { //在函数传参的时候直接进行解构
    console.log(data)
  }
  fn(obj)