ES6 中的解构是一种非常方便的语法，可以让我们从一个对象或数组中快速提取出需要的部分，并将其赋值给一个变量。在前端开发中，解构常常用于处理数据。
虽然解构功能强大，但在使用的时候也容易犯错误。本文将探讨如何正确地使用解构，避免常见的错误。
对象解构
对象解构允许我们从一个对象中提取出若干个属性，并将其赋值给新的变量。例如：
-- -------------------- ---- ------- ----- ---- - - ----- ------ ---- --- ---- ------- - ----- - ----- --- - - ---- ----------------- -- ----- ---------------- -- --
在这个例子中，我们从 user 对象中提取出 name 和 age 属性，分别赋值给了名为 name 和 age 的新变量。我们可以随意指定新变量的名称，但必须与对象中的属性名一致。
避免 undefined
当我们从一个对象中提取出不存在的属性时，会得到 undefined：
-- -------------------- ---- ------- ----- ---- - - ----- ------ ---- --- ---- ------- - ----- - ------ - - ---- ------------------- -- ---------
这可能会导致一些意外的结果。为了避免这种情况，我们可以使用默认值：
const { height = 180 } = user
console.log(height) // 180这样，在 height 属性不存在时，我们会得到默认值 180。
嵌套解构
如果我们需要提取出一个对象中嵌套的属性，可以使用嵌套解构：
-- -------------------- ---- -------
----- ---- - -
----- ------
---- ---
---- -------
-------- -
----- -----------
--------- ---------
--
-
----- - -------- - ---- - - - ----
----------------- -- ----------在这个例子中，我们使用 address: { city } 将 user 对象中的 address.city 属性提取出来。这样，就能方便地访问嵌套的属性。
其他用途
除了提取对象的属性，对象解构还有其他用途。例如，交换两个变量的值：
let a = 1 let b = 2 [a, b] = [b, a] console.log(a, b) // 2, 1
在这个例子中，我们使用解构将变量 a 和 b 的值互换了。
数组解构
数组解构允许我们从一个数组中提取出若干个元素，并将其赋值给新的变量。例如：
const arr = [1, 2, 3] const [a, b] = arr console.log(a, b) // 1, 2
在这个例子中，我们从数组 arr 中提取出前两个元素，并将其赋值给了新变量 a 和 b。
忽略元素
如果我们只需要提取数组中的部分元素，可以使用逗号来忽略其他元素：
const arr = [1, 2, 3, 4, 5] const [a, b, , , c] = arr console.log(a, b, c) // 1, 2, 5
在这个例子中，我们将数组 arr 中的第一个、第二个和最后一个元素提取出来，忽略了剩下的元素。
默认值
与对象解构类似，数组解构也允许设置默认值：
const arr = [1, 2] const [a, b, c = 3] = arr console.log(a, b, c) // 1, 2, 3
在这个例子中，我们将数组 arr 中的前两个元素提取出来，将第三个元素的默认值设置为 3。
其他用途
数组解构同样有其他用途。例如，从一个函数的返回值中提取多个值：
function getUser() {
return ['Tom', 20]
}
const [name, age] = getUser()
console.log(name, age) // "Tom", 20在这个例子中，我们从 getUser 函数的返回值中提取出了 name 和 age 两个值，方便地进行操作。
注意事项
虽然解构是一种方便的语法，但在使用的时候需要注意一些问题，以避免出现错误。
赋值语句
解构只是语法糖，实际上是一种赋值语句。因此，解构的右侧必须是一个真正的值，否则会报错：
const { a } = null // TypeError: Cannot destructure property 'a' of 'null' as it is null.在这个例子中，我们使用解构从 null 对象中提取了属性 a，导致程序抛出异常。为了避免这种错误，我们需要确保解构的右侧是一个真实存在的对象或数组。
命名冲突
如果我们在解构中定义的新变量与作用域已有的变量名称相同，就会出现命名冲突的情况：
const a = 1
const { a } = { a: 2 } // SyntaxError: Identifier 'a' has already been declared在这个例子中，我们将 a 变量赋值为 1，然后又在解构中定义了同名变量 a，导致程序抛出错误。
为了避免这种问题，我们需要确保解构中定义的变量名称不会与作用域中的已有变量名称冲突。
总结
ES6 中的解构是一种方便的语法，可以让我们轻松读取对象和数组中的值。在使用的时候需要注意避免常见的错误，如忽略不存在的属性、设置默认值等，以提高代码的可读性和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/654ee06c7d4982a6eb7f276a