解构赋值的基本用法和注意点

解构赋值的基本用法和注意点

• 对象解构基本用法及注意点

  let person = {
      name: '张三',
      age: 19,
  }
  // 变量名和属性名一致
  // let {name, age, hobby} = person;
  
  // 变量名和属性名不一致
  // 注意点1：对象的解构赋值，真正的变量名字是在后面
  let {age: age, hobby: hobby, name: name1} = person    // 注意点2：对象的解构和顺序没有关系
  console.log(name1, age, hobby);  // 张三 19 undefined
  
  
  let [a, c, b] = [1, 2, 3];   // 注意点3：数组的解构和顺序有关系
  console.log(a, b, c);  // 1 3 2
  

• 对象解构默认值

  默认值生效的条件：对象与之对应的属性值一定是undefined

  let person = {
      name: '张三',
      age: 19,
      // hobby: undefined   // 这样默认值也会生效
  }
  let {name, age, hobby = '码代码'} = person;
  console.log(name, age, hobby);  // 张三 19 码代码
  

• 对象解构赋值的特殊点

  let x;
  { x } = { x: 1}  // 会报错。javascript引擎会把放在行首的{}理解成代码块，从而引发语法错误
  // 如果要将一个已经声明的变量用于解构赋值，可以包含在()里面
  ({ x } = { x: 1});
  console.log(x)
  
  
  // 盲区（不会报错，但是写法不规范且不应该出现）
  // 允许等号左边的模式之中不放置任何的值
  ({} = [true, false]);
  ({} = '123');
  ({} = []);
  

• 对象解构赋值数组特殊处理

  数组的本质是对象，对数组进行对象属性的解构

  let arr = [1, 2, 3, 4];
  let { 0: first, [arr.length - 1]: last } = arr;
  console.log(first);  // 1
  console.log(last);   // 4
  

• 对象的嵌套赋值

  let person = {
      info: {
          basicInfo: {
              name: '张三',
              age: 20
          }
      }
  }
  let { info: { basicInfo } } = person;
  console.log(basicInfo.name)