ES6 | 前端必备技能：变量的数据解构赋值

倾盖

发布于 2022-08-16 14:23:50

1970

发布于 2022-08-16 14:23:50

文章被收录于专栏：RivenCabin

本文参考地址：变量的解构赋值 - ECMAScript 6入门 (ruanyifeng.com)

我的代码实践：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ES6解构赋值</title>
</head>
<body>

<script>
    /*
    * 数组的解构赋值
    * */
    let [a, b, c] = [1, 2, 3]
    console.log("a:" + a);//a=1
    console.log("b:" + b);//b=2
    console.log("c:" + c);//c=3

    let arr = [4, 5, 6]
    let [d, e, f] = arr
    console.log("d:" + d);//d=4
    console.log("e:" + e);//e=5
    console.log("f:" + f);//f=6

    let [, , g] = [7, 8, 9]
    console.log("g:" + g)//g=9

    let [h, ...y] = [10, 11, 12, 13]
    console.log("y:" + y)//h=10,y=11,12,13

    let [aaa, bbb] = [14]
    console.log("aaa:" + aaa)//aaa=14
    console.log("bbb:" + bbb)//bbb=undefined

    let [ccc, ddd = 16] = [15]
    let [eee = 17, fff = 18] = [null, undefined]
    console.log("ccc:" + ccc)//ccc=15
    console.log("ddd:" + ddd)//ddd=16
    console.log("eee:" + eee)//eee=null
    console.log("fff:" + fff)//fff=18

    function fn() {
        console.log("fn")
    }

    let [i = fn()] = []//输出fn

    let [j, k = j] = [19]
    console.log("j:" + j)//j=19
    console.log("k:" + k)//k=19

    let [l = 20, m = l] = [21, 22]
    console.log("l:" + l)//l=21
    console.log("m:" + m)//m=22

    /*
    * 对象的解构赋值
    * */
    let {o1, o2} = {o2: "1", o1: "2"}
    console.log("o1:" + o1);//o1=2
    console.log("o2:" + o2);//o2=1

    let {o3, o4} = {o4: "4"}
    console.log("o3:" + o3)//o3=undefined
    console.log("o4:" + o4)//o4=4

    let {o5: o6} = {o5: "5"}
    console.log("o6:" + o6)//o6=5,o5 is not defined

    // let obj = {
    //     oo: [
    //         "hello",
    //         {jj: "world"}
    //     ]
    // }
    // let {oo: [hh, {jj}]} = obj
    // console.log("hh:" + hh);  //hh:hello
    // console.log("jj:" + jj);  //jj:world
    // console.log("oo:" + oo);  //oo is not defined

    // let {oo, oo: [hh, {jj}]} = obj;
    // console.log("hh:" + hh);//hh:hello
    // console.log("jj:" + jj);//jj:world
    // console.log("oo:" + oo);//oo=hello,[object Object]

    let obj = {
        ob: {
            st: {
                first: 1,
                last: "hello"
            }
        }
    }
    let {ob, ob: {st}, ob: {st: {first, last}}} = obj
    //第一个ob是变量
    //第二个ob和第三个ob是匹配模式
    //第一个st是变量
    //第二个st是匹配模式
    console.log("ob:" + ob)
    console.log("st:" + st)
    console.log("first:" + first)
    console.log("last:" + last)

    /*
    * 数据结构的用途
    * */
    //1.交换变量的值
    let x = 1;
    let z = 2;
    [x, z] = [z, x];
    console.log("x:", x);
    console.log("z:", z);

    //2.从函数返回多个值
    //函数只能返回一个值，如果要返回多个值，只能将它们放在数组或对象里返回。有了解构赋值，取出这些值就非常方便。
    //返回一个数组
    function f1() {
        return [11, 22, 33]
    }

    let [v1, v2, v3] = f1();
    console.log("v1", v1)
    console.log("v2", v2)
    console.log("v3", v3)

    //返回一个对象
    function f2() {
        return {
            e1: "hello",
            e2: "world"
        }
    }

    let {e1, e2} = f2()
    console.log("el:", e1)
    console.log("e2:", e2)

    //3.函数参数的定义
    //解构赋值可以方便地将一组参数与变量名对应起来。

    //参数是一组有次序的值(数组）
    function f3([c1, c2, c3]) {
        return c1 + c2 + c3
    }

    let result = f3([3, 6, 9]);
    console.log("result:", result)

    //参数是一组无次序的值（对象）
    function f4({c4, c5, c6}) {
        return c4 + c5 + c6
    }

    let result2 = f4({c4: 10, c5: 20, c6: 30})
    console.log("result2:", result2)

    //4.提取 JSON 数据
    let jsonData = {
        id: 1,
        name: '张三',
        age: 19,
        hobby: ["唱", "跳", "rap"]
    }
    let{id,name,age,hobby:aiHao}=jsonData;
    console.log(id)
    console.log(name)
    console.log(age)
    console.log(aiHao)

    //5.函数参数的默认值
    function f5({f1=10,f2=true,f3="你好"}={}) {
        console.log("f1:",f1)
        console.log("f2:",f2)
        console.log("f3:",f3)
    }
    f5();
    f5({f1:20,f2:false,f3:"世界"});

    //6.遍历map结构
    //任何部署了 Iterator 接口的对象，都可以用for...of循环遍历。
    //Map 结构原生支持 Iterator 接口，配合变量的解构赋值，获取键名和键值就非常方便。
    let map = new Map();
    map.set('k1',"值1")
    map.set('k2',"值2")
    map.set('k3',"值3")
    for (let [key, value] of map) {
        console.log(key + "==" + value);
    }
    //只取key
    for (let [key] of map) {
        console.log(key)
    }
    //只取value
    for (let [, value] of map) {
        console.log(value);
    }

    //7.输入模块的指定方法
    // 输入模块的指定方法
    const { SourceMapConsumer, SourceNode } = require("source-map");
</script>
</body>
</html>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

com