第三讲 变量的解构赋值

第三讲 变量的解构赋值

第三讲 变量的解构赋值

本章是ES6的新的知识点，值得学习哦^.^

.1 为什么使用解构赋值

​ 体验之前的代码变量方式

代码语言：javascript代码运行次数：0运行复制

//1.旧社会如何使用变量;
        //赋值方式
        // let a=250;
        // let b=666;
        // let c=888;
        // cole.log(a,b,c);
        //提升一下,变量比较多，数组;
        let arr=[251,667,889];
        cole.log(arr[0],arr[1],arr[2]);
        //不想输入arr，a,b,c
        let a=arr[0],b=arr[1],c=arr[2];
        cole.log(a,b,c);
        //就可以使用我们今天要讲的技术点，解构赋值;

.2 数组的解构赋值

解构赋值的概念： ​ 按照一定的模式，从数组和对象中提取值，对变量进行赋值。

代码语言：javascript代码运行次数：0运行复制

        let [a,b,c]=[252,668,890];
        cole.log(a,b,c);

注意事项：

• 左右结构必须一致
• 右边必须有值
• 声明和赋值必须在一起（在一起）

代码语言：javascript代码运行次数：0运行复制

//解构赋值的两种情况
//解构不成功
let [mytt]=[];
cole.log(mytt);  //undefined
//不完全解构
let [x,y,z]=[22,,44,55,66];
cole.log(x,y,z);

. 字符串的解构赋值

代码语言：javascript代码运行次数：0运行复制

//1.常量
        ct [x,y,z]="HOP";
        cole.log(x,y,z);
        //字符串当成了一个字符数组，进行解构赋值;

.4 对象的解构赋值

参考代码：

代码语言：javascript代码运行次数：0运行复制

 //对象:json
        //{}格式;
        ct cai={
            name:"蔡徐坤",
            age:'18',
            gender:'未知',
            hobby:function () {
                cole.log('我爱打篮球');
            }
        };
        //假设
        let name="张老师";
        //对这个cai对象进行解构赋值;
        //name:n(别名),严格一点也叫属性,对象的内部机制，先到同名属性，然后再赋值给对应的变量.
        let  {name:n,age,gender,hobby}=cai;
        //输出
        cole.log(n,age,gender,hobby);
        //调用方法
        hobby();

.5 复杂的解构赋值

补充知识点

默认值

代码语言：javascript代码运行次数：0运行复制

//1.补充
        //y=10,就是数组解构赋值的时候，一个默认值;
        // let [x,y=10]=[22];  //左2，右1
        // cole.log(x,y);
        // //对象也可以使用默认值
        // let {host='tea',port}={port:8088};
        // cole.log(host,port);

复杂的解构赋值:可以将我们讲解的数组、字符串、对象综合起来，进行解构赋值,必须遵循解构赋值的三个特征;

代码语言：javascript代码运行次数：0运行复制

 let [one,two,three]=[[2,,4],{name:'蔡徐坤',age:18},'hello'];
        cole.log(one);
        cole.log(two);
        cole.log(three);
        cole.log("-------------")
        //对立面进行具体的赋值
        let [[a,b,c],{name,age},three2]=[[2,,4],{name:'蔡徐坤',age:18},'hello'];
        cole.log(a,b,c);
        cole.log(name,age);
        cole.log(three2);

.5 用途

代码语言：javascript代码运行次数：0运行复制

//1.交换变量的值
        let [a,b]=[250,666];
        //交换a b的值
        [a,b]=[b,a];
        cole.log(a,b);
        //简洁、易读性强、语义格式清晰;
        //2.从函数返回值,一般都是单个值；如果要返回多个值的时候，必须将值放在数组、集合、对象中;
        //有了解构赋值之后，看一下
        function getArr() {
            return [4,9,16];
        }
        let [x,y,z]=getArr();
        cole.log(x,y,z);
        //同样返回一个对象也一样;
        function getHost() {
            return {
                hostname:'ZTE',
                port:8088
            }
        };
        let {hostname,port}=getHost();
        cole.log(hostname,port);
        //.可以导入模块的指定方法
       // import {add,edit} from 'comm.js';

本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。 原始发表：202-09-08，如有侵权请联系 cloudcommunity@tencent 删除前往查看字符串cole变量对象数组