随着 JavaScript 的应用范围越来越广，ES6/ES2015 新增了许多语言特性，其中解构和结构体是其中两个十分有用的功能。本文将介绍解构和结构体的相关知识，重点讲解它们的使用方法、优点和示例代码。
什么是解构？
解构是从数组或对象中提取值的方法，将数组或对象中的元素解构成单独的变量。例如，从一个数组中提取出第一个元素和第二个元素：
--- --- - --- -- --- --- --- -- - ---- --------------- -- - --------------- -- -
上述代码从数组 arr 中解构出来了第一个和第二个元素，将它们分别赋值给了变量 a 和 b。这个过程可以简写为：
--- --- - --- -- --- --- --- -- - -------- -------- --------------- -- - --------------- -- -
解构不仅可以用在数组中，还可以用在对象中。例如，从一个对象中提取出 name、age、gender 等属性：
--- --- - - ----- ------ ---- --- ------- ------ -- --- - ----- ---- ------ - - ---- ------------------ -- ----- ----------------- -- -- -------------------- -- ------
这个过程将对象 obj 中的属性解构出来，分别赋值给了变量 name、age、gender。
什么是结构体？
结构体是一种类 C 语言的数据类型，ES6/ES2015 中新增了类似的语言特性。结构体可以用一条语句定义出多个属性，与解构不同的是，结构体可以有默认值。例如：
--- ------ - - ----- ------ ---- --- ------- ------ -- --- - ----- --- - --- ------ - - ------- ----------------- -- --
上述代码中，我们给 age 指定了一个默认值 20，但在解构时因为 person 中已经有了 age 属性，所以 20 这个默认值并没有生效。
另外，解构也可以配合 ...（剩余运算符）使用，将数组或对象中剩余的元素解构到新的数组或对象中：
-- --------- --- --- - --- -- -- --- --- --- ----- - ---- --------------- -- - --------------- -- --- -- -- -- --------- --- --- - - ----- ------ ---- --- ------- ------- ------- --- -- --- - ----- ------- - - ---- ------------------ -- ----- ------------------ -- - ---- --- ------- ------- ------- --- -
结论
ES6/ES2015 中的解构和结构体为我们提供了更加方便快捷的方法获取数组和对象中的值，同时也支持默认值和剩余运算符。熟练掌握它们的使用，不仅可以提高代码的可读性和简洁性，还可以提高开发效率。
示例代码
-- ---- --- --- - --- -- --- --- --- -- - ---- --------------- -- - --------------- -- - -- ---- --- --- - - ----- ------ ---- --- ------- ------ -- --- - ----- ---- ------ - - ---- ------------------ -- ----- ----------------- -- -- -------------------- -- ------ -- --- --- ------ - - ----- ------ ---- --- ------- ------ -- --- - ----- --- - --- ------ - - ------- ----------------- -- -- -- ----- --- --- - --- -- -- --- --- --- ----- - ---- --------------- -- - --------------- -- --- -- -- --- --- - - ----- ------ ---- --- ------- ------- ------- --- -- --- - ----- ------- - - ---- ------------------ -- ----- ------------------ -- - ---- --- ------- ------- ------- --- -
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6737f3d6317fbffedf0d578f