js学习之ES6_模式匹配结构赋值

最新推荐文章于 2022-05-08 23:00:00 发布

晓秒四下

最新推荐文章于 2022-05-08 23:00:00 发布

阅读量212

点赞数

本文链接：https://blog.csdn.net/MENGCHIXIANZI/article/details/105399143

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <script type="text/javascript">
       
        // [case1]
        // var a = 10;
        // var b = 20;
        // var c = 30; 
        
        // => 简化 
        // var a = 10,b = 20, c = 30;

        // => 简化
        let [a,b,c] = [10,20,30];

        // 检测赋值 确实成功
        console.log(a,b,c);

        // [case2]
        // 结构赋值，赋值的时候保持结构一样就可以了
        let [a2,[b2,d2],c2] = [10,[20,40],30];

        // 检测赋值 确实成功
        console.log(a2,b2,c2,d2);

        // [case3]
        // 结构赋值，不仅仅可以数组，还可以json
        json = {'ajson':60,'bjson':50};
        // 注意啊 这个变量的key 值 必须和json里面的元素一模一样
        // 当key值不相同的时候，返回的是undefined
        let {ajson,bjson} = json;

        // 检测赋值 确实成功
        console.log(ajson,bjson);

        // [case4]
        // 结构赋值，不仅仅可以数组，还可以json
        json = {'ajson2':60,'bjson2':[50,70]};
        // 注意啊 这个变量的key 值 必须和json里面的元素一模一样
        // 当key值不相同的时候，返回的是undefined
        let {ajson2,bjson2} = json;

        // 检测赋值 确实成功
        console.log(ajson2,bjson2);

        // [case5]
        // 然后这个结构赋值有什么用呢
        // 函数传值的时候 可以简化代码
        function show(atemp = [1,2,3,4,5,6]){
            // var bt = atemp[0];
            // var ct = atemp[1];
            // var dt = atemp[2];
            // var et = atemp[3];
            // var ft = atemp[4];
            // var gt = atemp[5];

            // => 簡化
            let [bt,ct,dt,et,ft,gt] = atemp;

            console.log(bt,ct,dt,et,ft,gt);
        };

        // 检测赋值 确实成功
        show([2,3,4,5,6,7]);

        // [case6]
        // 比如假设从后台传过来，返回来值
        // 应用举例
        var dataA = {
            'ok' : 1,
            'data' : {
                'top':[1,2,3],
                'center':[4,5,6,7]
            },
            'msg':'请求成功'
        };

        let {ok,data,msg} = dataA;
        if(dataA.ok == 1){

            console.log(dataA.data.top,dataA.data.center,dataA.msg);
        }

        // 备用
        // [caseblank]
        // 检测赋值 确实成功
        // console.log(ajson,bjson);
    </script>
</body>
</html>