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);//世

        七、总结

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