解构赋值是 ES6 新增的一种语法，用于从数组或对象中提取值，并赋给变量。它是编写 JavaScript 代码时非常有用的一种方式，可以帮助我们更方便地访问对象和数组中的数据。
在本文中，我们将介绍 ES6 解构赋值的一些基本用法、高级用法和一些实际示例，以帮助您更轻松地学习和掌握这种新语法。
基础用法
数组解构赋值
数组解构赋值是从数组中提取值，并将它们赋给变量名。语法是将方括号[]使用于变量声明/定义的左侧。
以下是一个简单的数组解构赋值的示例：
----- --- -- -- - --- -- -- -------------- -- - -------------- -- - -------------- -- -
在这个例子中，我们要求将数组[1, 2, 3]中的值分别赋给a，b和c。当我们运行代码时，我们会发现a的值是1，b的值是2，c的值是3。
如果我们只对数组的某些元素感兴趣，可以使用“逗号”跳过不需要的元素：
----- --- - -- - --- -- -- -------------- -- - -------------- -- -
在这个例子中，我们使用“逗号”跳过了数组中的第二个元素2，只赋值了数组中的第一个和第三个元素。
如果数组中的元素较多，但我们仅需要其中的一部分，可以使用“剩余参数”（...rest）将剩余的元素赋给一个单独的变量：
----- --- -- -------- - --- -- -- -- -- -------------- -- - -------------- -- - ----------------- -- --- -- --
在这个例子中，我们不仅将数组中的前两个元素赋值给a和b，还将数组中的其余元素存储在rest 变量中。
我们也可以使用解构赋值来交换变量的值，而无需使用临时变量：
--- - - -- - - - --- -- - --- -- -------------- -- - -------------- -- -
在这个例子中，我们交换了变量a和b的值，而无需使用第三个变量。
对象解构赋值
对象解构赋值是从对象中提取值，并将它们赋给变量名。语法是花括号{}使用于变量声明/定义的左侧。
以下是一个简单的对象解构赋值的示例：
----- - ----- --- - - - ----- ------- ---- -- - ----------------- -- ---- ---------------- -- --
在这个例子中，我们要求将对象{ name: 'John', age: 28 }中的属性名分别赋值给name和age变量。当我们运行代码时，我们会发现name的值是"John"，age的值是28。
如果对象中的属性名不同于我们想要的变量名，可以使用“重命名”属性：
----- - ----- --------- --- - - - ----- ------- ---- -- - --------------------- -- ---- ---------------- -- --
在这个例子中，我们将{ name: 'John', age: 28 }中的name属性重命名为fullName变量，而age属性直接赋给age变量。
与数组一样，如果我们不需要对象中的某些值，我们可以使用“逗号”跳过不需要的属性：
----- - ----- --- - - - ----- ------- ---- --- -------- ----------- --------- - ----------------- -- ---- ---------------- -- --
在这个例子中，我们跳过对象中的hobbies属性而只使用name和age属性。
高级用法
嵌套解构
我们可以对嵌套的数据结构（例如，对象包含数组，数组包含对象）使用解构赋值。我们只需要保留表达式左侧与右侧的嵌套结构相同即可。
以下是一个示例，演示如何从嵌套的对象中提取值：
----- ------- - -
----- -------
---- ---
------- -
----- ---
-------- --
-
-
----- - ----- ------- - ----- ------- - - - -------
----------------- -- ----
----------------- -- --
-------------------- -- --在这个例子中，我们要求将嵌套对象student中的name属性赋值给name变量，将math和english属性设置为scores对象中的子属性。
我们也可以对嵌套的数组使用解构赋值，例如：
----- -------- - - - ----- ------- ---- -- -- - ----- ------- ---- -- - - ----- -- ----- -------- -- - ----- -------- -- - -------- --------------------- -- ---- --------------------- -- ----
在这个例子中，我们要求将数组students中的第一个元素的name属性赋值给johnName变量，将第二个元素的name属性赋值给kateName变量。
默认值
解构赋值还可以有默认值。当解构的属性不存在时，将使用默认值。
以下是一个示例，演示如何使用默认值：
----- - ----- ---- ------ - --------- - - - ----- ------- ---- -- - ----------------- -- ---- ---------------- -- -- ------------------- -- -------
在这个例子中，我们使用默认值'unknown'为对象中不存在的属性gender指定值。
函数参数解构
我们还可以使用解构赋值将函数的参数分解为多个变量。
以下是一个示例，演示如何在函数参数中使用解构赋值：
-------- ------- ----- --- -- - ------------------- -- ---- -- -------- - -- ------ ----- ------ - ----- ------ - - ----- ------- ---- -- - -------------
在这个例子中，我们定义了一个函数greet，它接受一个对象作为参数。我们将其解构为对象中的name和age属性，并在函数体中使用它们。
示例
将一个字符串（日期格式）解构为年、月、日
----- ---------- - ------------ ----- ------ ------ ---- - --------------------- ----------------- -- ---- ------------------ -- -- ---------------- -- --
在这个示例中，我们使用字符串的split()方法将字符串分解为年、月和日。我们使用解构赋值将这些值分别赋给year、month和day变量。
交换两个变量的值
--- - - -- - - - --- -- - --- -- -------------- -- - -------------- -- -
在这个示例中，我们使用数组解构赋值交换变量a和b的值。
从对象中提取的多个属性
----- ------ - - ----- ------- ---- --- ------- ------- ----------- --------- --------- - ----- - ----- ---- ------ - - ------ ----------------- -- ---- ---------------- -- -- ------------------- -- ----
在这个示例中，我们使用对象解构赋值将对象person的name、age和gender属性存储在单独的变量中。
总结
解构赋值是 ES6 新增的一种语法，用于从数组或对象中提取值，并将它们赋给变量。本文介绍了解构赋值的基本用法、高级用法和一些实用示例。
我们希望这篇文章对你学习和掌握 ES6 解构赋值有所帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6498f2da48841e98945e1492