美文网首页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