ECMAScript变量的解构赋值

张哥编程

发布于 2024-12-07 16:42:55

28400

代码可运行

文章被收录于专栏：云计算linux云计算linux

运行总次数：0

代码可运行

第三讲变量的解构赋值

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

3.1 为什么使用解构赋值

体验之前的代码变量方式

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

3.2 数组的解构赋值

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

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

注意事项：

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

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

3.3 字符串的解构赋值

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

3.4 对象的解构赋值

参考代码：

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

3.5 复杂的解构赋值

补充知识点

默认值

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

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

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

3.5 用途

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

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2024-10-27，如有侵权请联系 cloudcommunity@tencent.com 删除

数组