在前端开发中，我们常常需要从对象或者数组中获取需要的信息，ECMAScript 2021 中的解构赋值和 rest 参数为我们提供了新的方式来获取这些信息。本文将详细介绍解构赋值和 rest 参数的语法和使用方法，并提供示例代码方便学习和使用。
解构赋值
解构赋值是一种通过模式匹配方式获取对象或数组中的内部数据的语法。在ES6 中引入了解构赋值语法，这个特性极大地简化了我们的代码。
对象解构赋值
对象解构赋值允许我们从对象中提取属性并将它们存储为变量。对象解构赋值使用花括号 { } 并在其中列出属性名，然后使用等号 = 将其绑定到新的变量上。下面是一个简单的示例：
----- ---- - - ----- ----- ---- --- ------- --- -- ----- - ----- ---- ------ - - ----- ----------------- ---- -------- -- -- --- -- --
上述代码中，我们定义了一个名为 user 的对象，其中包含 name、age、gender 三个属性。然后，我们使用解构赋值语法，将 name、age、gender 对应地赋值给了新的变量 name、age、gender。最后，我们打印了这三个变量的值，输出结果为 小明 18 男。
值得注意的是，如果你希望将属性赋值到与原始变量名不同的变量，则需要在对象解构赋值语法中指定新的变量名。例如：
----- ---- - - ----- ----- ---- --- ------- --- -- ----- - ----- --------- ---- -------- ------- ---------- - - ----- --------------------- -------- ------------ -- -- --- -- --
在上述代码中，我们使用 name: userName 来将对象中的 name 属性赋值给 userName 变量，其他两个属性以相同方式赋值。
还可以使用嵌套解构赋值的语法来提取对象嵌套的属性。例如：
----- ---- - - ----- ----- ---- --- ------- ---- -------- - --------- ----- ----- ----- - -- ----- - ----- ---- ------- -------- - --------- ---- - - - ----- ----------------- ---- ------- --------- ------ -- -- --- -- - -- ----
在上述代码中，我们首先使用对象解构赋值语法将 user 对象中的属性赋值给相应的变量。然后，我们使用嵌套的解构赋值语法从 address 对象中提取 province 和 city 属性的值，并赋值给新的变量 province 和 city。
数组解构赋值
与对象解构赋值类似，数组解构赋值允许我们从数组中提取元素并将它们存储为变量。数组解构赋值使用方括号 [ ] 并在其中列出元素，然后使用等号 = 将其绑定到新的变量上。下面是一个简单的示例：
----- ------ - ------- -------- -------- ----- ------------ ------------ ----------- - ------- ----------------------- ------------ ------------ -- -- ---- ----- -----
在上述代码中，我们定义了一个名为 colors 的数组，其中包含三个颜色值。然后，我们使用解构赋值语法，将数组中的元素依次赋值给新的变量 firstColor、secondColor 和 thirdColor。最后，我们打印了这三个变量的值，输出结果为 red green blue。
如果你希望跳过数组中某些元素，则可以使用占位符 _。例如：
----- ------ - ------- -------- -------- ----- ------------ - ----------- - ------- ----------------------- ------------ -- -- ---- -----
在上述代码中，我们使用空的 , 来跳过了 colors 数组中的第二个元素。这里需要注意的是，数组解构赋值语法使用位置而不是变量名来确定赋值的顺序。
还可以使用嵌套解构赋值的语法来提取数组中嵌套的元素。例如：
----- ------ - ------- --------- --------- ----- ------------ ------------- ------------ - ------- ----------------------- ------------ ------------ -- -- ---- ----- -----
在上述代码中，我们首先使用数组解构赋值语法将 colors 数组中的元素赋值给相应的变量。然后，我们使用嵌套的解构赋值语法从包含两个颜色的数组中提取 secondColor 和 thirdColor。
rest 参数
rest 参数是一种将多个参数收集到一个数组中的语法。ES6 中引入了 rest 参数语法，这个特性为我们传递可变数量的参数提供了更加简洁的方式。
在 JavaScript 中，函数内部可以通过关键字 arguments 访问调用时传递给函数的所有参数。然而，arguments 是一个类数组对象，无法直接进行数组操作。因此，在以前的版本中，我们通常需要使用数组的 slice() 方法将参数列表转换为一个真正的数组：
-------- ----- - --- ---- - -------------------------------------- ------ ------------------ ----- -- ---- - ----- --- - ------------------ -- ---- -- -- -
在上述代码中，我们定义了一个 sum 函数，它接收任意个数的参数并将它们相加。在函数内部，我们使用 Array.prototype.slice.call(arguments) 将 arguments 对象转换为一个真正的数组，并对其进行求和操作。
使用 rest 参数语法，我们可以更加直接地将参数列表转换为一个数组。rest 参数语法使用省略号 ... 后跟一个参数名，它将把函数的所有剩余参数打包成一个数组。下面是一个简单的示例：
-------- ------------ - ------ ------------------ ----- -- ---- - ----- --- - ------------------ -- ---- -- -- - ------------------ -- -- -- ---- -- -- --
在上述示例中，我们定义了一个名为 sum 的函数，它使用 rest 参数语法将所有传递给函数的参数打包成一个数组 args。然后我们使用 reduce 方法对数组进行求和操作。
可以在函数中的其他参数之前使用 rest 参数，但没有必要。下面是一个使用了 rest 参数和其他参数的示例：
-------- ----------------- -------- - ------ --------------------- - ----------------------- ---- ---- ------ -- -- ------- ----------------------- ---- ---- ------ -- -- -------
在上述示例中，我们定义了一个名为 concat 的函数，它使用了两个参数：separator 和 rest 参数 args。join() 方法使用 separator 将数组 args 中的所有元素连接起来。
总结
本文详细介绍了 ECMAScript 2021 中的解构赋值和 rest 参数语法，并提供了示例代码帮助读者学习和应用这些语法。解构赋值和 rest 参数为代码编写和维护提供了更加优雅和简洁的方式。希望读者在日常开发中能够灵活使用这两个语法，提高编码效率和代码清晰度。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6472f486968c7c53b007e35c