什么是解构?

什么是解构?

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

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

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
相关推荐
轻口味几秒前
命名空间与模块化概述
开发语言·前端·javascript
前端小小王36 分钟前
React Hooks
前端·javascript·react.js
迷途小码农零零发1 小时前
react中使用ResizeObserver来观察元素的size变化
前端·javascript·react.js
真滴book理喻4 小时前
Vue(四)
前端·javascript·vue.js
程序员_三木4 小时前
Three.js入门-Raycaster鼠标拾取详解与应用
开发语言·javascript·计算机外设·webgl·three.js
开心工作室_kaic6 小时前
springboot476基于vue篮球联盟管理系统(论文+源码)_kaic
前端·javascript·vue.js
川石教育6 小时前
Vue前端开发-缓存优化
前端·javascript·vue.js·缓存·前端框架·vue·数据缓存
搏博6 小时前
使用Vue创建前后端分离项目的过程(前端部分)
前端·javascript·vue.js
温轻舟6 小时前
前端开发 之 12个鼠标交互特效上【附完整源码】
开发语言·前端·javascript·css·html·交互·温轻舟
web135085886356 小时前
2024-05-18 前端模块化开发——ESModule模块化
开发语言·前端·javascript