ECMAScript 2017 中的解构赋值和展开运算符详解
在 ECMAScript 2015 中,解构赋值作为一种方便的语法结构被引入,可以在一个单独的语句中从数组或对象中快速提取值并赋给变量。在 ECMAScript 2017 中,解构赋值得到了更加广泛的应用和语法,同时增加了展开运算符的支持,这篇文章将详细介绍解构赋值和展开运算符的用法和技巧。
一、解构赋值
- 数组的解构赋值
数组的解构赋值使用方括号 [],可以将数组中的元素赋值给多个变量。
例如,以下代码将数组 [1, 2, 3] 中的第一、第二、第三个元素分别赋值给变量 a、b、c:
--- --- -- -- - --- -- --- --------------- --- --------------- --- --------------- ---
如果数组中的元素多于变量,则多余的元素将被忽略。
例如,以下代码将数组 [1, 2, 3, 4, 5] 中的第一、第二个元素分别赋值给变量 a、b:
--- --- -- - --- -- -- -- --- --------------- --- --------------- ---
如果数组中的元素少于变量,则未匹配到的变量将被赋值为 undefined。
例如,以下代码将数组 [1, 2] 中的第一、第二个元素分别赋值给变量 a、b、c:
--- --- -- -- - --- --- --------------- --- --------------- --- --------------- -----------
解构赋值还可以用于嵌套数组的解构赋值,例如:
--- --- --- --- -- - --- --- --- --- --------------- --- --------------- --- --------------- --- --------------- ---
- 对象的解构赋值
对象的解构赋值使用花括号 {},可以将对象的属性赋值给多个变量。
例如,以下代码将对象 {name: "John", age: 30} 中的属性 name、age 分别赋值给变量 name、age:
--- ------ ---- - ------ ------- ---- ---- ------------------ ------ ----------------- ----
如果对象中的属性名与变量名不一致,则需要在变量名后面加上冒号 :,将变量名与属性名进行映射。
例如,以下代码将对象 {n: "John", a: 30} 中的属性 n、a 分别赋值给变量 name、age:
--- --- ----- -- ---- - --- ------- -- ---- ------------------ ------ ----------------- ----
如果对象中的属性缺少对应的变量名,则会被忽略。
例如,以下代码将对象 {name: "John"} 中的属性 name 赋值给变量 name,而变量 age 被赋值为 undefined:
--- ------ ---- - ------ -------- ------------------ ------ ----------------- -----------
解构赋值还可以用于嵌套对象的解构赋值,例如:
--- ------ --------- ------ - ------ ------- --------- ----- ----- ------------------ ------ ----------------- ----
二、展开运算符
展开运算符 (...) 可以将数组或对象展开成一系列的值,可以被用于函数调用、数组和对象的合并等场景。
- 数组的展开运算符
数组的展开运算符用于展开数组的元素,可以将一个数组展开为多个元素。
例如,以下代码将数组 [1, 2, 3] 和 [4, 5, 6] 中的元素展开并合并成一个新的数组:
--- ---- - --- -- --- --- ---- - --- -- --- --- --- - --------- --------- ----------------- ----- -- -- -- -- --
展开运算符还可以用于数组的拷贝,例如:
--- ---- - --- -- --- --- ---- - ---------- ------------------ ----- -- --
- 对象的展开运算符
对象的展开运算符用于展开对象的属性,可以将一个对象展开为多个属性。
例如,以下代码将对象 {name: "John", age: 30} 和 {gender: "male"} 中的属性展开并合并成一个新的对象:
--- ---- - ------ ------- ---- ---- --- ---- - -------- -------- --- --- - --------- --------- ----------------- -------- ------- ---- --- ------- -------
展开运算符还可以用于对象的拷贝,例如:
--- ---- - ------ ------- ---- ---- --- ---- - ---------- ------------------ -------- ------- ---- ---
三、高级用法
- 默认值
在解构赋值中,可以为变量设置默认值,如果解构赋值的源对象不存在对应的属性或者属性值为 undefined,则变量将被赋值为默认值。
例如,以下代码将变量 a 赋值为源对象 {a: 1} 中的属性 a,而变量 b 赋值为 undefined,变量 c 设置了默认值 3:
--- --- -- - - -- - --- --- --------------- --- --------------- ----------- --------------- ---
- 函数参数的解构赋值
在函数参数中,可以使用解构赋值的语法来实现更加简洁的参数传递。
例如,以下代码展示了一个函数 add,它使用解构赋值来接收一个包含 x 和 y 属性的对象作为参数:
-------- ------- --- - ------ - - -- - ------------------- -- -- ----- ---
- Mixed destructuring
数组解构赋值和对象解构赋值可以混用,称为 Mixed destructuring。
例如,以下代码展示了一个 Mixed destructuring 的例子:
--- ------ -------- ---- ---------- - ------ -------- ---- ------- --------------------- --------- --------------------- -----
四、总结
本文详细介绍了 ECMAScript 2017 中的解构赋值和展开运算符的语法和用法,同时也包含了一些高级用法和技巧。掌握好解构赋值和展开运算符的使用,可以提高我们的代码编写效率,并使代码更加简洁和易于维护。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/65014ca195b1f8cacdf0b4cb