JavaScript学习 — 解构赋值

---

前言

        解构赋值语法是一种 Javascript 表达式。通过解构赋值, 可以将属性/值从对象/数组中取出,赋值给其他变量。

为什么使用解构赋值

JavaScript 中最常用到的两种数据结构是 Object 和 Array。

对象允许我们创建一个按键存储数据项的实体。
数组允许我们将数据项收集到有序列表中。

        不过，当我们将这些数据传递给一个函数时，可能不需要作为一个整体的对象/数组传递，可能需要单独的部分。解构赋值是一种特殊的语法，它允许我们将数组或对象“解包”成一堆变量，因为有时这样更方便。解构也特别适用于含有大量参数、默认值等的复杂函数。便于操作。

实例应用

<script>
    // 从数组中解构 为数组中的每个值声明一个变量。可以定义更少的变量，而不是数组中的索引（即，如果你只想解处理前几个值），跳过某些索引或将所有剩余的值放到新数组中。
    const Onepiece = ['路飞', '索隆', '山治', '乌索普', '娜美']
    let [a, b, c, d, e] = Onepiece;
    console.log(a);
    console.log(b);
    console.log(c);
    console.log(d);
    console.log(e);
    console.log('++++++++++++++++++++++++++++++++++++');
    // 从对象中解构 对象解构与数组解构非常相似，主要区别是可以按名称引用对象中的每个key，从而创建一个有相同名称的变量。
    const person = {
        name: '一护',
        age: 20,
        work: () => {
            console.log('月牙天冲');
        }
    }
    // 注意参数名称必须与对象属性 方法名称一致 
    let { name, age, work } = person;
    console.log(name);
    console.log(age);
    work();
    console.log('++++++++++++++++++++++++++++++++++++');
    // 方法初始值 说到底就是数组 / 对象的解构赋值，只是写到函数参数的位置而已
    let server_url = {
        protocol: 'https://',
        domain: '192.168.0.106',
        port: 2022,
        context: ''
    }
    function getServer01(server_url) {
        if (server_url.context == '') {
            return server_url.protocol + server_url.domain + ':' + server_url.port;
        } else {
            return server_url.protocol + server_url.domain + ':' + server_url.port + "/" + server_url.context;
        }
    }
    console.log(getServer01(server_url));
    console.log('++++++++++++++++++++++++++++++++++++');
    function getServer02(protocol, domain, port, context) {
        if (context == '') {
            return protocol + domain + ':' + port;
        } else {
            return protocol + domain + ':' + port + "/" + context;
        }
    }
    let { protocol, domain, port, context } = server_url;
    console.log(getServer02(protocol, domain, port, context));
    console.log('++++++++++++++++++++++++++++++++++++');
    let server = {
        protocol: 'https://',
        domain: '192.168.0.106',
    }
    function getServer02({ protocol, domain, port = '80', context = '' }) {
        if (context == '') {
            return protocol + domain + ':' + port;
        } else {
            return protocol + domain + ':' + port + "/" + context;
        }
    }
    console.log(getServer02(server));
</script>

详情请参考【JavaScript】解构赋值