JavaScript----解构赋值

目录

一：介绍

二：解构赋值实例

三：解构模型 

四：解构赋值具体代码

---

一：介绍

1.从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。

2.解构赋值是对赋值运算符的扩展。

3.他是一种针对数组或者对象进行模式匹配，然后对其中的变量进行赋值。

二：解构赋值实例

1.数组中解构赋值。

2.从对象中解构赋值。

3.从方法中解构赋值

三：解构模型 

在解构中，有下面两部分参与：

• 解构的源：解构赋值表达式的右边部分
• 解构的目标，解构赋值表达式的左边部分。

四：解构赋值具体代码

<script>
    //1.从数组中解构
    const F4 = ['小沈阳','刘能','赵四','小宋']
    //let shen =F4[0];
    //let liu =F4[1];
    //let zhao =F4[2];
    //let song =F4[3];
    let [shen,liu,zhao,song]=F4;
    console.log(shen);
    console.log(liu);
    console.log(zhao);
    console.log(song);

    //2.从对象中解构
    const person ={
        name:'陈浩楠',
        age:20,
        eat: function(){
            console.log('吃吃吃');
        }
    }

    console.log(person.name);
    console.log(person.age);
    person.eat();
    let {name,age,eat}=person;
    console.log(name);
    console.log(age);
    person.eat();

    //3. 方法初始值
    let server_url={
        protocol:'http://',
        domain:'192.168.1.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.context;
        }
    }
    console.log(getServer01(server_url));
    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: 'http://',
        domain: '192.168.1.106',
    };
    function getServer03({protocol,domain,port=80,context=''}) {
        if (context == '') {
            return protocol + domain + ":" + port;
        } else {
            return protocol + domain + ":" + port + "/" + context;
        } 
    }
    console.log(getServer03(server));
</script>