什么是解构?

什么是解构?

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

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

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
相关推荐
咖啡教室1 小时前
前端开发日常工作每日记录笔记(2019至2024合集)
前端·javascript
咖啡教室1 小时前
前端开发中JavaScript、HTML、CSS常见避坑问题
前端·javascript·css
市民中心的蟋蟀4 小时前
第五章 使用Context和订阅来共享组件状态
前端·javascript·react.js
逆袭的小黄鸭4 小时前
JavaScript 闭包:强大特性背后的概念、应用与内存考量
前端·javascript·面试
Mintopia4 小时前
Node.js 中 fs.readFile API 的使用详解
前端·javascript·node.js
Face4 小时前
事件循环
前端·javascript
谦谦橘子4 小时前
服务端渲染原理解析
前端·javascript·react.js
Mintopia4 小时前
深入理解 Three.js 中的 PerspectiveCamera
前端·javascript·three.js
Dontla5 小时前
函数柯里化(Currying)介绍(一种将接受多个参数的函数转换为一系列接受单一参数的函数的技术)
前端·javascript
xixixin_5 小时前
为什么 js 对象中引用本地图片需要写 require 或 import
开发语言·前端·javascript