什么是解构?

什么是解构?

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

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

1.数组的解构:

javascript 复制代码
//声明两个数组:
    let arr = ["李白", "韩信", "诸葛亮"];
    let arr1 = [["李白", "韩信"], "诸葛亮"];

这时我们想要拿到 数组中的 :"李白" 原来的方式:

javascript 复制代码
//一维数组arr:
    let Hore = arr[0];
       console.log(Hore);//"李白"
       
//二维数组arr:
    let Hore1 = arr[0][0];
       console.log(Hore1);//"李白"

使用解构:

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

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

使用扩展运算符:

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

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

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

javascript 复制代码
let arr2 = [];
    let [list = "默认值"] = arr2;
    console.log(list);//"默认值"

2.对象的解构:

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

javascript 复制代码
let person = {
        name: "wql",
        age: undefined
    }

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

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

javascript 复制代码
let { age = 22 } = person;
    console.log(age);//22

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

javascript 复制代码
let { name: n } = person;
    console.log(n);//wql

复杂的对象解构:

javascript 复制代码
let obj = {
        p: [
            'Hello',
            { str: "world!" }
        ]
    }

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

3.字符串解构:

解构输出q

javascript 复制代码
let str1 = "wql"; 4
    let [, s ,] = str1;
    console.log(s);//q

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

javascript 复制代码
 function add([a, b]) {
        return a + b;
    }

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

//对象作为参数

javascript 复制代码
function sayName({name,age}){
        console.log(`我叫${name},我今年${age}岁了!`);
    }

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

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

4.其它用途:

交换数据:

例子 一:

javascript 复制代码
   let x = 1;
   let y = 2;

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

例子二:

javascript 复制代码
function controls(){
       function a(){
            console.log("a");
           
       }
       function b(){
        	console.log("b");
       }

       return{
           a:a,
           b:b
       }
   }

   let {a} = controls();
   a();//a
相关推荐
Java~~几秒前
山东大学软件学院项目实训-基于大模型的模拟面试系统-网页图片显示问题
javascript·vue.js
程序员爱钓鱼25 分钟前
从零开始开发一个简易的五子棋游戏:使用 HTML、CSS 和 JavaScript 实现双人对战
前端·javascript·游戏开发
林太白27 分钟前
NestJS企业级登录注册如何做
前端·javascript·后端
JQShan40 分钟前
React Native小课堂:箭头函数 vs 普通函数,为什么你的this总迷路?
javascript·react native·ios
至尊童40 分钟前
5个Web开发中的使用技巧
javascript·html
前端大白话1 小时前
前端人必看!10个Vue3救命技巧,专治性能差、代码乱
前端·javascript·vue.js
江城开朗的豌豆1 小时前
JavaScript篇:JavaScript中的深浅拷贝:原理、实现与应用
前端·javascript·面试
爱看书的小沐1 小时前
【小沐学Web3D】three.js 加载三维模型(Svelte.js)
javascript·vue.js·webgl·three.js·opengl·web3d·svelte.js
江城开朗的豌豆1 小时前
JavaScript篇:深入解析URL结构:前端开发者必备的网址知识
前端·javascript·面试
10年前端老司机2 小时前
微信小程序wxs
前端·javascript·微信小程序