本人已参与「新人创作礼」活动，一起开启掘金创作之路。

前言

大家好，我是掘金新用户小钻风头领，今天是我正式更文的第四天；

四、解构表达式

4.1、说明

​ ES6中允许按照一定模式从数组和对象中提取值，然后对变量进行赋值，这被称为解构。

4.2、数组解构

​ 数组解构允许我们按照一一对应的关系从数组中提取值，并且将值一一赋值给对应的变量。

4.2.1、之前写法

<script type="text/javascript">

    let arrs = [1,2,3];

	let x = arrs[0];
	let y = arrs[1];
	let z = arrs[2];

    console.info(x);
	console.info(y);
	console.info(z);

</script>
/*
	之前写法中，如果要获取数组中每个元素的值分别赋值给变量，只能通过下标的方式.
*/

4.2.2、案例1

<script type="text/javascript">

    let arrs = [1,2,3];

    let [x,y,z] = arrs;	// x，y，z将与arrs中的每个位置对应来取值。

    console.info(x,y,z);

</script>
// let [x,y,z] = arrs 注意：等号左边的[]不是数组，表示的解构，表示的从等号右边的数组中提取值。

4.2.3、案例2

<script type="text/javascript">

   let [ [num1,num2,num3] , num , value ] = [ [1,2,3] , 34 , 'HelloWorld' ];

   console.info(num1,num2,num3,num,value);
</script>

4.3、对象解构

​ 对象解构允许我们使用变量的名字匹配对象的属性，匹配成功，则会将对象属性的值赋值给变量。

4.3.1、之前写法

<script type="text/javascript">

   let person = {
       name: "Hello",
       age: 12,
       address: ["河南","山东"]
   };

   console.info(person.name);
   console.info(person.age);
   console.info(person.address);

</script>
/*
	之前写法中，如果要获取对象中的属性，需要通过【对象名.属性】的方式实现	
*/

4.3.2、案例1

<script type="text/javascript">

   let person = {
       name: "Hello",
       age: 12,
       address: ["河南","山东"]
   };

   let {name,age,address} = person;	// {}中的name、age和address需要和person中的属性一致

   console.info(name);
   console.info(age);
   console.info(address);

</script>

4.3.3、案例2

<script type="text/javascript">

   let person = {
       name: "Hello",
       age: 12,
       address: ["河南","山东"]
   };

   // 当然也可以不一致,如果想要用其它变量接收，需要额外指定别名，需要用【：】指定
   // name是person中的属性名，冒号后面的myName是解构后要赋值给的变量。
   let {name:myName,age:myAge,address} = person;	

   console.info(myName);
   console.info(myAge);
   console.info(address);

</script>