在 ECMAScript 2018 中，对象解构赋值和对象展开操作符是两个非常有用的语法。它们可以帮助我们更方便地处理对象，提高代码的可读性和可维护性。本文将介绍对象解构赋值和对象展开操作符的使用技巧，并提供一些示例代码，希望能对前端开发者有所帮助。
对象解构赋值
对象解构赋值是一种从对象中提取属性值并赋值给变量的语法。它可以让我们更方便地获取对象中的属性值，避免了反复使用点运算符或中括号运算符的繁琐操作。下面是一个简单的示例：
-- -------------------- ---- ------- ----- ------ - - ----- -------- ---- --- ------- -------- -- ----- - ----- ---- ------ - - ------- ------------------ -- ------- ----------------- -- -- -------------------- -- --------
上面的代码中，我们使用了对象解构赋值从 person 对象中提取了 name、age 和 gender 三个属性的值，并分别赋值给了变量。这样，我们就可以直接使用这些变量，而不需要使用点运算符或中括号运算符来获取对象中的属性值了。
对象解构赋值还支持默认值。如果对象中没有对应的属性值，那么变量将被赋予默认值。下面是一个示例：
-- -------------------- ---- ------- ----- ------ - - ----- -------- ---- -- -- ----- - ----- ---- ------ - -------- - - ------- ------------------ -- ------- ----------------- -- -- -------------------- -- --------
上面的代码中，我们在解构赋值中为 gender 变量设置了默认值 'female'。由于 person 对象中没有 gender 属性，所以 gender 变量被赋予了默认值。
对象解构赋值还可以嵌套使用。下面是一个示例：
-- -------------------- ---- -------
----- ------ - -
----- --------
---- ---
------- ---------
-------- -
----- -----------
------- --------
-
--
----- - ----- ---- ------- -------- - ----- ------ - - - -------
------------------ -- -------
----------------- -- --
-------------------- -- --------
------------------ -- ----------
-------------------- -- --------上面的代码中，我们使用了对象解构赋值从 person 对象中提取了 address 属性的值，并将其解构为 city 和 street 两个变量。这样，我们就可以方便地获取嵌套在对象中的属性值了。
对象展开操作符
对象展开操作符是一种将一个或多个对象的属性合并到一个新对象中的语法。它可以让我们更方便地创建新对象，避免了手动复制对象属性的繁琐操作。下面是一个简单的示例：
-- -------------------- ---- ------- ----- ------ - - ----- -------- ---- -- -- ----- --------- - - ---------- ------- -------- -- ----------------------- -- - ----- -------- ---- --- ------- -------- -
上面的代码中，我们使用了对象展开操作符将原有的 person 对象的属性展开到一个新对象中，并在新对象中添加了一个 gender 属性。这样，我们就可以方便地创建一个新对象了。
对象展开操作符还可以与对象解构赋值一起使用。下面是一个示例：
-- -------------------- ---- -------
----- ------ - -
----- --------
---- ---
------- ---------
-------- -
----- -----------
------- --------
-
--
----- - ----- ---- ------- - - -------
------------------ -- -------
----------------- -- --
------------------ -- - ------- --------- -------- - ----- ----------- ------- -------- - -上面的代码中，我们使用了对象解构赋值从 person 对象中提取了 name 和 age 两个属性的值，并使用对象展开操作符将剩余的属性合并到了一个新对象中。这样，我们就可以方便地获取对象中的某些属性，并将剩余的属性合并到一个新对象中了。
总结
本文介绍了 ECMAScript 2018 中的对象解构赋值和对象展开操作符的使用技巧。对象解构赋值可以帮助我们更方便地获取对象中的属性值，避免了繁琐的操作；对象展开操作符可以帮助我们更方便地创建新对象，避免了手动复制对象属性的繁琐操作。它们是非常有用的语法，可以提高代码的可读性和可维护性。希望本文对前端开发者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65fd4498d10417a22289c561