在 ES6 中,destructuring 是一种方便的语法,它允许我们从对象或数组中提取值并赋值给变量。这种语法可以让我们更轻松地处理复杂的数据结构,避免冗长的代码。
对象的 destructuring
对象的 destructuring 能够从对象中提取值并把它们赋值给变量。例如:
----- ---- - - ----- ------ ---- -- -- ----- - ----- --- - - ----- ------------------ -- ------ ----------------- -- -----
在这个例子中,我们通过把 user 对象赋值给两个变量 name 和 age,从而取出了它们。
除了将整个对象赋值给新的变量,我们还可以选择性地从对象中提取属性并赋值给变量:
----- ---- - - ----- ------ ---- --- ------- ------ -- ----- - ----- ------ - - ----- ------------------ -- ------ -------------------- -- -------
对于没有在对象中定义的属性,我们可以使用默认值来避免出现 undefined:
----- ---- - - ----- ------ ---- -- -- ----- - ------ - ------ - - ----- -------------------- -- -------
此外,我们也可以组合多个对象的 destructuring:
----- ---- - - ----- ------ ---- -- -- ----- ------- - - ---------- -------- -- ----- - ---- - - ----- ----- - ---------- ----- - - -------- ------------------ -- ------ ------------------- -- ---------
变量名与对象属性名不同时,可以使用别名:
----- ---- - - ----- ------ ---- -- -- ----- - ----- -------- - - ----- ---------------------- -- ------
数组的 destructuring
数组的 destructuring 与对象类似,也可以从数组中提取值并赋值给变量:
----- ------- - --- -- --- ----- --- -- -- - -------- --------------- -- ---- --------------- -- ---- --------------- -- ----
同样地,我们也可以使用默认值和别名:
----- ------- - --- --- ----- --- -- - - -- - -------- --------------- -- ---- --------------- -- ---- --------------- -- ----
如果只需要数组中的部分值,可以使用 rest 运算符:
----- ------- - --- -- -- -- --- ----- --- -- -------- - -------- --------------- -- ---- --------------- -- ---- ------------------ -- ------ -- --
destructuring 的应用
destructuring 可以在 ES6 的各种语法中使用,包括函数参数和 for-of 循环,这里提供一些示例:
函数参数的 destructuring
函数参数可以使用 destructuring 来提取和使用对象或数组的值:
-------- ------------- ----- --- -- - ------------------ -------- ---- --------- - ----- ---- - - ----- ------ ---- -- -- ------------------ -- -------- ---- ---- --
如果函数需要传递多个对象参数,可以对每个对象使用 destructuring:
-------- --------------- ------ -- - ------ -- - -------------------- ---------------- ------ -------------------- ---------------- ------ - ----- ---- - - ------- --- -- --- ------- ------- ------ -------- -- ------------------- ------ -- --- -- ------- -- -- - -- ------- ---- ---- -----
for-of 循环的 destructuring
for-of 循环可以使用 destructuring 来提取数组中的值:
----- ----- - - - ----- ------ ---- -- -- - ----- -------- ---- -- - -- --- ------ - ----- --- - -- ------ - ------------------ -------- ---- --------- - -- --- -- ----- ---- ---- -- -- ----- ------ ---- --
在这个例子中,我们提取了每个用户对象的 name 和 age 属性。
总结
destructuring 是一种很方便的 ES6 语法,可以使代码更具有可读性和简洁性。我们可以通过 destructuring 从对象或数组中提取想要的值,并将它们赋给变量。在函数参数和 for-of 循环中,我们也可以使用 destructuring 来提取值。掌握这种语法可以让我们更好地编写代码。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/64980ad548841e989451c6ed