详解【数组解构】与【对象解构】

一、解构是什么？

所谓解构，就是按照一定模式，从数组和对象中提取值，对变量进行赋值。 解构不仅可以使代码更简洁，还可以使你更清楚地看到你正在使用哪些属性或值。

值得注意的是，解构创建的是新的变量引用，与原始数组或对象中的值相连接，但不与原始数组或对象本身连接（除非这些值是对象或数组）。

二、数组解构

数组解构赋值有一个非常独特的用例，能轻易地互换两个变量的值。

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

数组解构允许我们从数组中提取值并将它们赋给变量。

   const  arr= [1,23,43,4,5,4,768]
    // 数组解构
    const [a,b,c] = arr
    console.log(a); // 1
    console.log(b); // 23
    console.log(c); // 43
    

	function getValue(){
       return[100,60]
    }
 	const  [max,min] = getValue()
 	console.log(max);  // 100
 	console.log(min);  // 60

如果你只想提取里面某一个变量，那么你就可以省略之前的变量名。例如只想要第三个变量;

	const  arr= [1,23,43,4,5,4,768]
   // 数组解构
    const [ , ,c] = arr
    console.log(c); // 43   

使用过程中会遇到一些特殊情况，变量多，单元值少或者变量少，单元值多。

• 变量多，单元值少 这种情况下控制台就会返回一个undefined值。

   const [a,b,c,d,e] = ['小米','苹果','华为','格力']
    console.log(a);
    console.log(c);
    console.log(b);
    console.log(d);
    console.log(e); //undefined

• 变量少，单元值多 此时就可以用 … 语法来将剩余的项目赋值给一个指定的变量。

const [x,y,...c] = ['小米','苹果','华为','格力']
console.log(x);
console.log(y);
console.log(c);  // ['华为', '格力']

多维数组解构

• 在整个解构模式中插入另一个数组模式，解构操作就会下行到嵌套的数组中

 	   const  arr  = [1,23,43,[14,23,14,4,2]]
       const [w,e,,[a,d,f,g,m]] = arr
       console.log(w); // 1
       console.log(a); // 14

除了基本的数组解构外，我们还可以使用默认值来处理缺失的元素。

// 定义一个数组
const numbers = [1, 2, 3];
// 使用数组解构将数组中的值赋给变量，并设置默认值
const [a, b, c, d = 4] = numbers;
console.log(a); // 输出: 1
console.log(b); // 输出: 2
console.log(c); // 输出: 3
console.log(d); // 输出: 4

• 我们定义了一个名为numbers的数组，其中只有三个元素。然而，在解构赋值时，我们为变量d设置了默认值为4。当数组中没有第四个元素时，变量d将取默认值。

三、对象解构

let/const{属性名}=被解构的对象

   const  obj={
        uname:"小明",
        age:18,
        address:{
          add:"identity",
          phone:12372
        }
      }
      const {uname,age} = obj 
      console.log(uname); // 小明
      console.log(age);  // 18

默认值

• 当你使用解构赋值语句时，如果所指定的本地变量在对象中没有找到同名属性，那么该变量会被赋值为 undefined

   const pig = {name:'佩奇',age: 6}
      // 1.
      const {name,age, address} = pig
      console.log(name);
      console.log(age);
      console.log(address); //undefined

• 你可以选择性地定义一个默认值，以便在指定属性不存在时使用该值。若要这么做，需要在属性名后面添加一个等号并指定默认值

 const pig = {name:'佩奇',age: 6}
      // 1.
      const {name,age, address = "天津"} = pig
      console.log(name);
      console.log(age);
      console.log(address); // 天津

在此例中，变量 address 被指定了一个默认值 “天津” ，只有在 pig 的对应属性缺失、或对应的属性值为 undefined 的情况下，该默认值才会被使用。

重新指定变量名

  const pig = {name:'佩奇',age: 6}
  // 1.
  const {name:uname,age} = pig
  console.log(uname); // 佩奇

• 也可以给变量别名添加默认值，依然是在本地变量名称后添加等号与默认值

  const pig = {name:'佩奇',age: 6}
  // 1.
  const {name:uname,age,address = "地球村"} = pig
  console.log(uname,age,address); // 佩奇 6 地球村

四、多级解构

对象与数组解构能被用在一起，以创建更复杂的解构表达式。在对象与数组混合而成的结构中，这么做便能准确提取其中你想要的信息片段。

• 数组中有数组

const numbers = [1, 2, 3, 4, [5, 6, 7]];
// 解构出numbers的第一项n1和第五项中的第二项n2
const [n1, , , , [, n2]] = numbers;
console.log(n1, n2); // 1 6

• 数组中有对象

const numbers = [1,2,3,4, 5, {name: "abc" }];
// 解构出numbers中的第一项n1和第六项中的name
const [n1, , , , , { name }] = numbers;
console.log(n1, name); // 1 abc

• 对象中有数组和对象的解构类似写法

   const pig= {
        name:'佩奇',
        family:{
          mother:'猪妈',
          father:'猪爸',
          brother:'乔治'
        },
        age:10
      }
      const {name,family:{mother,father,brother},age}= pig
      console.log(name);  // 佩奇
      console.log(brother); // 乔治
      console.log(mother); // 猪妈
      console.log(age);  // 10