ES6基础-------解构赋值

目录

         解构赋值是一种把复杂的数据(数组或对象中的值)变为简单数据使用,把复杂的数据解构出来并赋值给变量单独使用,以下是一些使用解构赋值的示例:

  一、一般获取值

先对比正常数组是如何获得值,我们定义一个数组,再用下标取值的方法把其中每一个值拿出来使用:

二、数组类型解构赋值:

在数组解构赋值中,使用方括号([])将变量名包裹起来,来对应数组中的元素索引位置,超过数组中定义值的数量,会自动定义为undefine.

三、给解构变量赋初始值

由上可得在我们设置变量的时候赋上初始值,会出现以下效果:

        如果设置变量的数量在数组数量之内,则为数组中的值,如果超过数组的数量的值,也就是变量自动会输出 undefined 默认值的值,会将设置的变量默认值赋值给变量.即解构赋值可以设置默认值,但是只有当值为 undefined 时,默认值才生效

四、对象解构赋值

在对象解构赋值中,使用花括号({})将变量包裹起来,对应对象中的属性名称(属性名对象相应的值).

需要注意的是,当使用对象解构赋值时,变量名需要与对象属性名一一对应,否则无法正确解构并赋值.

五、复杂数据解构赋值(对象中包含数组)

复杂数据解构赋值是由对象中包含数组构成的,先按照对象的方法设置变量,再按照数组的方法声明变量得到值

六、字符串解构赋值

在字符串构赋值中,使用中括号([])将变量包裹起来,对应数组中的元素索引位置,字符串中的符号也算一个元素.

七、总结

        解构赋值是一种快捷、方便的语法,可以使代码更加简洁易懂。需要注意的是,在使用解构赋值时,需要了解传递的参数类型,并正确地使用方括号或花括号来包裹变量


         解构赋值是一种把复杂的数据(数组或对象中的值)变为简单数据使用,把复杂的数据解构出来并赋值给变量单独使用,以下是一些使用解构赋值的示例:

  一、一般获取值

先对比正常数组是如何获得值,我们定义一个数组,再用下标取值的方法把其中每一个值拿出来使用:

Eg:     

  const a=[1,2,3,4];

        console.log(a[0]); //1

      二、数组类型解构赋值:

在数组解构赋值中,使用方括号([])将变量名包裹起来,来对应数组中的元素索引位置,超过数组中定义值的数量,会自动定义为undefine.

先声明一个数组

        const b=[1,2,3,4];

将数组的值解构出来并赋值给变量

        const [f,e,c,d,g]=b; 

输出值

        console.log(f);//1

        console.log(e);//2

        console.log(c);//3

        console.log(d);//4

        console.log(g);//undefined

        三、给解构变量赋初始值

设置一个数组

        const b=[1,2,3,4];

给在数组定义数量之内的值(d)赋值,和给超过数组数量的值(g)赋值:

        const [f,e,c,d="默认值d",g="默认值g"]=b; 

输出值

        console.log(f);//1

        console.log(e);//2

        console.log(c);//3

        console.log(d);//4

        console.log(g);//默认值g

由上可得在我们设置变量的时候赋上初始值,会出现以下效果:

        如果设置变量的数量在数组数量之内,则为数组中的值,如果超过数组的数量的值,也就是变量自动会输出 undefined 默认值的值,会将设置的变量默认值赋值给变量.即解构赋值可以设置默认值,但是只有当值为 undefined 时,默认值才生效

        四、对象解构赋值

在对象解构赋值中,使用花括号({})将变量包裹起来,对应对象中的属性名称(属性名对象相应的值).

需要注意的是,当使用对象解构赋值时,变量名需要与对象属性名一一对应,否则无法正确解构并赋值.

先声明一个对象

 const a={

            name:"张三",

            age:20,

            sex:"男"

        }

获取对象其中一个值

        console.log(a.name);//张三

从对象中解构出值并赋给变量

        const {sex,age}=a;

输出值

        console.log(sex);//男

        console.log(age);//20

        五、复杂数据解构赋值(对象中包含数组)

复杂数据解构赋值是由对象中包含数组构成的,先按照对象的方法设置变量,再按照数组的方法声明变量得到值

声明一个对象

 const a={

            name:"张三",

            age:20,

            sex:"男",

            address:[1,2,3]

        }

 赋值给变量

        const {sex,age,address:[c,d,e]}=a;

输出值

        console.log(c);//1

        console.log(a.address);//1,2,3

        console.log(a.address[1]);//2

        六、字符串解构赋值

在字符串构赋值中,使用中括号([])将变量包裹起来,对应数组中的元素索引位置,字符串中的符号也算一个元素.

声明一个字符串

       let a="你好啊,世界";

从字符串中解构给变量,注意字符串中的符号也算一个字符

        let [b,c,d,e,f]=a;

输出值



        console.log(b);//你

        console.log(f);//世

        七、总结

        解构赋值是一种快捷、方便的语法,可以使代码更加简洁易懂。需要注意的是,在使用解构赋值时,需要了解传递的参数类型,并正确地使用方括号或花括号来包裹变量

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值