怎么实现数组和对象的解构赋值?【详细演示】

解构表示对数据结构进行分解，赋值是指将某一数值赋给变量的过程。在ES6中，允许按照对应的方式，从数组或对象中提取值，然后将提取出来的值赋给变量。解构赋值的优点是它可以让编写的代码简洁易读，语义更加清晰，并且可以方便地从数组或对象中提取值。下面将分别讲解数组和对象的解构赋值。

1.数组的解构赋值

数组的解构赋值就是将数组中的值提取出来，然后赋值给另外的变量。

下面是数组解构赋值的基本形式，即变量的数量和数组中值的数量相一致，示例代码如下：

<script>
  let [a, b, c] = [1, 2, 3];
  console.log(a)；//输出结果：1
  console.log(b)；//输出结果：2
  console.log (c)://输出结果：3
</script>

上述代码中，第2行代码中等号的右边是数组，数组中有3个值，分别是1、2、3。等号左边的中括号不是数组，它代表解构，而中括号中写的是变量的名字，分别为a、b、c。等号左边中括号里的变量与等号右边数组中的值实际上是一一对应的关系，即变量a的值是1.变量b的值是2，变量e的值是3。等号左边中括号前面的let关键字表示中括号内的变量是使用let关键字声明的。

如果变量的数量和数组中值的数量不一致，那么变量的值就等于undefined，也就是解构不成功，示例代码如下。

<script>
  let [a, b, c, d] = [1, 2, 3];
  console.log(a)；//输出结果：1
  console.log (b)；//输出结果：2
  console.log (c)；//输出结果：3
  console.log(d)；//输出结果：undefined
</script>

上述代码中，第2行代码等号左边的中括号内的变量d在右边数组中没有与之对应的值，因此这个变量的值就为undefined。

2.对象的解构赋值

对象解构上许使用变量的名字匹配对象的属性，如果匹配成功就将对象中属性的值赋给变量。下面演示对象解构赋值的基本形式。等号左边的大括号中写的是变量的名字，等号右边要写具体被解构的对象，示例代码如下。

<script>
  let. person ={ name: 'zhangsan', age: 20 };
  let { niane, age } = person;    //解构赋值
  console.log (name);             //输出结果：zhangsan
  console.log(age);               //输出结果：20
</script>

上述代码中，第2行代码使用let关键字声明了一个person变量，其值为一个对象，在person对象中，有name和age两个属性。其中，name属性的值为zhangsan,age属性的值为20。第3行代码中，等号右边是person对象，等号左边的大括号表示对象解构，在大括号中有name变量和age变量。等号左边的name变量匹配 person对象中的name属性，age变量匹配person对象中的age属性，所以name变量的值为zhangsan，age变量的值为20。
 

由此可见，对象解构实际上是属性匹配，变量的名字匹配对象中属性的名字。如果匹配成功，就将对象中属性的值赋给变量。

上述示例是象解构的一种形式，下面将使用另外一种形式去实现对象的解构赋值。这种形式支持变量的名字和对象中属性的名字不一样的情况，等号左边的大括号代表对象解构，它的语法与对象类似，通过大括号中的属性匹配对象中的属性，示例代码如下。

<acript>
  let person={name:‘zhangsan',age:20,sex:'男'}；
  let ( name: nyName ) - person;    //输出结果：zhangsan
  console.log(nyName);
</script>

上述代码中，第2行代码使用let关键字声明了一个person变量，其值为一个对象，在person对象中，有name、age和sex共3个属性。其中，name属性的值为zhangsan，age属性的值为20，sex属性的值为男。第3行代码中，等号右边是person对象；在等号左侧的大括号中，冒号左侧的属性名仅用于属性匹配(如name)，冒号右侧是变量名(如 myName)。如果属性匹配成功，则将对象属性对应的值赋给冒号左侧的变量。例如，将第3行代码冒号左侧大括号中的name属性和person对象中的name属性进行匹配，匹配成功后将person对象中name属性的值zhangsan赋给myName变量。