1.介绍:

在 JavaScript 中有两种常用的数据类型 Object 和 Array 。

Object：用于存储多个无序的数据

Array：用于存储多个有序的数据

这两种数据类型都是用来存储多个数据，但在有些函数中使用时并不是需要所有的数据。这个时候就需要我们使用某些 ‘手段’ 将我们需要的数据提取出来。

2.基本结构赋值:

在ES5中如果要实现提取数据需要先声明一个变量，然后给变量赋值。

<script> let obj = { name: "张三", age: 18, gender: "男", }; // ES5 - 提取对象数据 - 解构赋值 let name = obj.name; // name = "张三" let age = obj.age; // age = 18 let gender = obj.gender; // gender = "男" </script>

这样就显得特别麻烦,那有没有更简单的方式呢?

答案是肯定有的啦,这不es6就来了嘛!

<script> let obj = { name: "张三", age: 18, gender: "男", }; // ES6 - 提取对象数据 - 解构赋值 let {name, age, gender} = obj; // name = "张三" // age = 18 // gender = "男" </script>

3.总结:

其实在ES6中原理和ES5中是一样的,let声明 {} 里面的所有变量,并将等号右边的目标解构并赋值给左边声明的变量。

4.拓展:

数组的解构赋值方法,对象的结构赋值方法与数组基本相同

<script> // 1.可嵌套 let [a, [[b], c]] = [1, [[2], 3]]; // a = 1 // b = 2 // c = 3 </script>

<script> // 2.可忽略 let [a, , b] = [1, 2, 3]; // a = 1 // b = 3 </script>

<script> // 3.剩余运算符 let [a, ...b] = [1, 2, 3]; //a = 1 //b = [2, 3] </script>

<script> // 4.字符串等 - 在数组的解构中，解构的目标若为可遍历对象，皆可进行解构赋值。 let [a, ...b] = [1, 2, 3]; //a = 1 //b = [2, 3] </script>

<script> // 5.解构默认值 - 当解构模式有匹配结果，且匹配结果是 undefined 时，会触发默认值作为返回结果。 let [a = 2] = [undefined]; // a = 2 </script>

<script> // 6.不完全解构 let [a = 1, b] = []; // a = 1, b = undefined </script>