变量解构赋值

1. 什么是变量的解构赋值

ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。

解构赋值 本质就是赋值，把结构解散重构 然后赋值 其实是一种模式的匹配，关键要掌握一一对应关系。

解构赋值作用就是方便赋值。

//1.请把数组arr1中的值分别赋值给变量 a b c d
//ES5的方法
/* let arr1 = [1, 2, 3, 4];
        let a = arr1[0];
        let b = arr1[1];
        let c = arr1[2];
        let d = arr1[3];
        console.log(a, b, c, d) */

//解构赋值的方法
let [a, b, c, d] = [1, 2, 3, 4];
console.log(a, b, c, d)Copy to clipboardErrorCopied

2 数组的解构赋值

• 数组解构赋值可以从数组中提取值，按照对应位置，对变量赋值

  let arr = [1, 2]
  let [a, b] = arr;
  console.log(a, b)Copy to clipboardErrorCopied

• 解构失败返回undefined

  let [c, d] = [1];
  console.log(d);//undefinedCopy to clipboardErrorCopied

• 不完全解构也可以成功

  let [a] = [10, 20];
  console.log(a);Copy to clipboardErrorCopied

• 可以为解构赋值可以设置默认值

  let [e = 2, f = 20] = [10];
  console.log(e, f)//10 20Copy to clipboardErrorCopied

• 可以使用rest参数（当值比变量多的时候）

  let [g, h, ...rest] = [10, 11, 23, 22, 12, 3, 4, 5, 3];
  console.log(g, h, z)//10，11，[23, 22, 12, 3, 4, 5, 3]Copy to clipboardErrorCopied

• 多维数组只要解构关系一一对应也可以进行赋值

  let [a, [b, c, d], e] = [1, [2, 3, 4], 5]
  console.log(a, b, c, d, e);Copy to clipboardErrorCopied

• 练习

  // 练习1:交换两个变量
  let a = 1;
  let b = 2;
  [b, a] = [a, b];
  console.log(a, b)//2,1
  
  //练习2
  let [foo = hoo, hoo = 2] = [];
  console.log(foo, hoo)//Cannot access 'hoo' before initializationCopy to clipboardErrorCopied

3 对象的解构赋值

• 解构不仅可以用于数组，还可以用于对象.

• 对象的解构与数组有一个重要的不同。数组的元素是按次序排列的，变量的取值由它的位置决定；而对象的属性没有次序，变量必须与属性同名，才能取到正确的值

• 对应关系是根据key不需要考虑顺序

  //对象的解构赋值(对应关系是根据key)
  let { foo, hoo } = { foo: "hello", hoo: "word" };//key和value一样可以简写
  console.log(foo, hoo);
  
  //上边{foo,hoo}这样写法的来历
  //其实如果对象的key和value是一样的，可以简写
  let a = 1, b = 2;
  console.log({ a: a, b: b })
  console.log({ a, b })
  
  //找到foo对应的关系，然后把1赋值给c
  let { foo: c, hoo: d } = { foo: 1, hoo: 2 };
  console.log(foo, hoo);//报错
  console.log(c, d);//1,2Copy to clipboardErrorCopied

• 对象解构赋值可以设置默认值

  let { x, y = 10 } = { x: 1 };
  console.log(x, y)Copy to clipboardErrorCopied

• 对象和数组解构可以嵌套

  let obj = { a: 1, b: [2, 3, 4] }
  let { a, b: [b1, b2, b3] } = obj;
  console.log(a, b1, b2, b3)Copy to clipboardErrorCopied

• 练习

  //练习1：如果想要获取数组的第一个和最后一个值怎么办(使用解构赋值)
  let arr = [1, 2, 3];
  // 由于数组本质是特殊的对象，因此可以对数组进行对象属性的解构
  let { 0: first, [arr.length - 1]: last } = arr;
  
  //练习2:获取log方法
  let { log } = console;
  log(1);Copy to clipboardErrorCopied

4 解构赋值的应用

• 函数的多个返回值获取

  //1.接收函数的多个返回值
  function fn(){
      return [1,2,3,4];
  }
  let [a,b,c,d] = fn();
  console.log(a,b,c,d);
  
  function fn() {
      return { foo: "hello", hoo: "word" };
  }
  let { foo } = fn();
  console.log(foo);Copy to clipboardErrorCopied

• 函数传参数

  //2.函数传参数
  function fn1([x, y, z]) {
      console.log(x, y, z);
  }
  fn1([1, 2, 3]);
  
  function fn2({ x, y, z }) {
      console.log(x, y, z);
  }
  fn2({ y: 2, x: 1, z: 3 });Copy to clipboardErrorCopied

• json数据的提取

  //3.json数据的提取
  let json = {
      name: "lily",
      sex: "nv",
      age: 18
  }
  let { name, age, sex } = json;
  console.log(name, age, sex)