美文网首页ES6
ES6 - 解构赋值

ES6 - 解构赋值

作者: 饮杯梦回酒 | 来源:发表于2018-12-25 22:04 被阅读0次

    导读 :

    • 挑干的来说就是提供了一个整体赋值的格式 (用的最多的主要是数组解构 / 对象解构) , 直接上代码看的明明白白。

    例子:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
        <script type="text/javascript">
            // let a = 5;
            // let b = 12;
            // let c = 7;
            let [a, b, c] = [5, 12, 7];   // 左右两边格式要一样(参数个数), 直接替代上面的定义
            console.log(a, b, c);  // 打印结果: 5, 12, 7
    
    
            let d = 5, e = 12; // 交换2数位置
            [d, e] = [e, d];
            console.log(d, e);  // 打印结果: 12, 5
    
    
            function getPos() {
                // xxxxx        
                return {
                    left: 10,
                    top: 20
                }
            }
            let {left, top:t} = getPos();  // window定义过top,所以对top改名为t
            console.log(left, t);*/
    
    
            function getValue({a, b='默认'}) {
                console.log(a, b);
            }
            getValue({a:1, b:2});  // 打印结果: 1, 2
            getValue({a:1});  // 打印结果: 1, 默认
        </script>
    </body>
    </html>
    

    注意点:解构赋值中的元素是可以赋初值的!

    总结 :

    • 解构赋值主要是对数据格式的改变,使我们更容易记住。其主要运用场景有:
      1. 处理后台传来的JSON数据(通过代码片段中第一个案例的方法提取其中的值)
      2. 引入模块的指定方法时 : (相当于把require留出的接口值赋值给我们自定义的2个变量中)
        const { SourceMapConsumer, SourceNode } = require("source-map");

    相关文章

      网友评论

        本文标题:ES6 - 解构赋值

        本文链接:https://www.haomeiwen.com/subject/gybqlqtx.html