在 JavaScript 编程中，解构赋值是一种让你从数组或对象中提取值并将它们分配给变量的语法。在 ES6 中，这种语法被大大改进，让代码更加简洁和易于阅读。
本文将会详细讲解解构赋值在对象和数组中的使用方法，并提供一些实例来帮助你更好地理解。
解构赋值在对象中的使用方法
在对象中使用解构赋值只需要使用花括号 {} 将其包裹，并使用对象的属性名将需要的值赋给一个变量。
实例1：解构赋值一个对象中的属性
----- ------ - - ----- ------ ---- --- ----- ---- ----- -- ----- - ----- --- - - ------- ------------------ -- -- ----- ----------------- -- -- --
实例2：解构赋值一个对象中的属性并赋默认值
当对象中不存在某个属性或该属性的值为 undefined 时，可以使用 = 符号后面跟上默认值来解决。
----- ------ - - ----- ------ ---- -- -- ----- - ----- ---- ------ - ------ - - ------- -------------------- -- -- ------
实例3：解构赋值嵌套对象中的属性
也可以在嵌套的对象中使用解构赋值。
----- ------ - -
----- ------
---- ---
-------- -
----- ---- ------
------- ---- ---- -----
---- -------
-
--
----- - ----- ---- -------- - ----- ------ - - - -------
------------------ -- -- ---- -----
-------------------- -- -- ---- ---- ----解构赋值在数组中的使用方法
在数组中使用解构赋值只需要使用方括号 [] 将其包裹，并把需要的值赋给一个变量。
实例1：解构赋值数组中的元素
----- --- - --- -- --- ----- - ------ ------ - - ---- ------------------- -- -- - -------------------- -- -- -
实例2：解构赋值数组中的元素并跳过
在数组解构中可以使用逗号来跳过不需要的元素。
----- --- - --- -- --- ----- - - - ----- - - ---- ------------------- -- -- -
实例3：解构赋值数组中的元素并赋默认值
同样，在解构赋值中也可以给变量指定默认值，如果数组中不存在对应的值，就会使用该默认值。
----- --- - --- --- ----- - ------ ------- ----- - - - - ---- ------------------- -- -- -
实例4：使用 ... 操作符剩余的数组元素
使用 ... 操作符可以将剩余的元素赋给一个新的数组。
----- --- - --- -- -- --- ----- - ------ ------- ------- - - ---- ------------------- -- -- - ------------------ -- -- - -- - -
结论
ES6 中的解构赋值使得从数组或对象中提取值并将它们分配给变量变得更加简洁和易于阅读。当你在进行开发时，这种语法可以帮助你提高代码的可读性和可维护性。
虽然解构赋值在某些情况下可以带来很多好处，但请小心不要在代码中过度使用这种语法。如果一个地方看起来更简洁而且更容易理解，那么就使用解构赋值。否则，就不要让它成为你写代码的障碍。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/671c49369babaf620fb00b7e