js解构

什么是解构？

解构简而言之就是按照一定的规则，从数组或者对象中提取值，赋值给变量，使其能够轻松得到想要的值

接下来我们来举一些例子：

1.数组的解构：

//声明两个数组：
    let arr = ["李白", "韩信", "诸葛亮"];
    let arr1 = [["李白", "韩信"], "诸葛亮"];

这时我们想要拿到 数组中的 ：“李白”
原来的方式：

//一维数组arr：
    let Hore = arr[0];
       console.log(Hore);//"李白"
       
//二维数组arr：
    let Hore1 = arr[0][0];
       console.log(Hore1);//"李白"

使用解构：

 // 一维数组
       let [Hore,,,] = arr;
       console.log(Hore);//"李白"

// 二维数组
    let [[Hore1,],,] = arr1;
    console.log(Hore1);//"李白"

使用扩展运算符:

//一维数组
let [Hore, ...Hores] = arr;
    console.log(Hore, Hores);//"李白"   ["韩信", "诸葛亮"]
//二维数组
let [[Hore1,...Hores1],...Hores2]= arr1
    console.log(Hore1, Hores1, Hores2);//李白 ["韩信"] ["诸葛亮"]

但是扩展运算符只能使用在后面

解构的时候给变量设置默认值，数组的解构设置默认值会很少，对象会多一点

let arr2 = [];
    let [list = "默认值"] = arr2;
    console.log(list);//"默认值"

2.对象的解构：

对象的解构是没有顺序的，只需要在左右放上相同的key值，就能提取到

let person = {
        name: "wql",
        age: undefined
    }

    let { name1,age1 } = person;
    console.log(name1,age1);//"wql"  undefined

给解构的对象变量设置默认值:

let { age = 22 } = person;
    console.log(age);//22

为提取的变量取一个别名 n:

let { name: n } = person;
    console.log(n);//wql

复杂的对象解构:

let obj = {
        p: [
            'Hello',
            { str: "world！" }
        ]
    }

    let { p: [, { str }] } = obj;
    console.log(str)//world

3.字符串解构:

解构输出q

let str1 = "wql"; 4
    let [, s ,] = str1;
    console.log(s);//q

函数参数的解构:
数组作为参数 使用较少

 function add([a, b]) {
        return a + b;
    }

    let arr3 = [1, 2];
    console.log(add([1, 2]));//3

//对象作为参数

function sayName({name,age}){
        console.log(`我叫${name},我今年${age}岁了！`);
    }

    let person1 = {
        name:"小明",
        age:22
    }

    sayName(person1);//我叫小明,我今年22岁了！

4.其它用途：

交换数据:

例子 一：

   let x = 1;
   let y = 2;

   [x,y] = [y,x]
   console.log("x:"+x,"y:"+y);//x:2 y:1

例子二：

function controls(){
       function a(){
            console.log("a");
           
       }
       function b(){
        	console.log("b");
       }

       return{
           a:a,
           b:b
       }
   }

   let {a} = controls();
   a();//a

在此我希望大家看了我的这篇文章能够对你理解js解构有帮助！
这也是我写的第一篇博客，写的不好的地方请大家指正！