解构给默认值_使用JavaScript解构让代码更优雅

茫茫人海中与你相遇

相信未来的你不会很差

原作者&＃xff1a;Juan Cruz Martinez

原文链接&＃xff1a;Write Cleaner Code by Using Javascript Destructuring

译者&＃xff1a;zenblo

来源&＃xff1a;https://juejin.cn/post/6901081096260648974#heading-0

解构是我最喜欢的 Javascript 特性之一。简单地说&＃xff0c;解构可以将复杂结构(如数组或对象)分解为更简单的部分&＃xff0c;虽然还有很多内容&＃xff0c;但是相对简化了代码结构。

让我们通过一个例子来更好地了解&＃xff1a;

const article &＃61; { title: "My Article", rating: 5, author: { name: "Juan", twitter: "&＃64;bajcmartinez" }}// 现在把它打印出来console.log(&＃96;"${article.title}" by ${article.author.name} had ${article.rating} stars&＃96;)// 通过使用解构同样能完成const { title, rating, author: { name } } &＃61; articleconsole.log(&＃96;"${title}" by ${name} had ${rating} stars&＃96;)------------------------Output------------------------"My Article" by Juan had 5 stars"My Article" by Juan had 5 stars现在&＃xff0c;一部分人已经采用解构开发了一段时间&＃xff0c;或许是在构建 React 应用时候&＃xff0c;但是他们并不完全了解它。对其他人来说&＃xff0c;这可能是第一次用到解构。因此&＃xff0c;本文将从头到尾完成整个过程&＃xff0c;最终使得大家对解构的认知都能达到同一水平。

解构对象

在上面的例子中&＃xff0c;所有隐藏的内容都发生在下面这行代码&＃xff1a;

const { title, rating, author: { name } } &＃61; article

现在&＃xff0c;在表达式左侧使用这样的大括号似乎有点奇怪&＃xff0c;但这就是我们告诉 Javascript 正在分解对象的方式。

解构对象可以绑定到对象里的任一层级的任何属性上。让我们从一个更简单的示例开始&＃xff1a;

const me &＃61; { name: "Juan"}const { name } &＃61; me在上面的例子中&＃xff0c;我们声明了一个名为 name的变量&＃xff0c;该变量将从对象 me中获得相同名称的初始化属性&＃xff0c;因此当我们对 name求值时&＃xff0c;我们得到 Juan。太棒了&＃xff01;这个操作同样适用于任意层级的属性。回到我们的例子&＃xff1a;

const { title, rating, author: { name } } &＃61; article对于 title和 rating&＃xff0c;和我们之前的讲解一样。但是在 author这里&＃xff0c;事情有点不同。当我们遇到一个是对象或数组的属性时&＃xff0c;我们可以选择是创建一个变量author的引用对象 article.author&＃xff0c;或者进行深度解构并立即访问内部对象的属性。访问对象属性&＃xff1a;

const { author } &＃61; articleconsole.log(author.name)------------------------Output------------------------Juan执行深度或嵌套解构&＃xff1a;

const { author: { name } } &＃61; articleconsole.log(name)console.log(author)------------------------Output------------------------JuanUncaught ReferenceError: author is not defined上面的示例怎么回事&＃xff1f;如果解构了 author&＃xff0c;但是它为什么没有被定义&＃xff1f;其实挺简单的。当我们要求 Javascript 也对 author对象进行解构时&＃xff0c;绑定本身并没有被创建&＃xff0c;取而代之的是我们可以访问我们选择的所有author属性&＃xff0c;请记住这点。扩展运算符(...)&＃xff1a;

const article &＃61; { title: "My Article", rating: 5, author: { name: "Juan", twitter: "&＃64;bajcmartinez"const { title, ...others } &＃61; articleconsole.log(title)console.log(others)------------------------Output------------------------My Article> {rating: 5, author: {name: "Juan", twitter: "&＃64;bajcmartinez" }}

此外&＃xff0c;我们可以使用扩展运算符 ... 创建一个包含所有未被解构属性的对象。

如果你有兴趣了解更多关于扩展运算符的知识&＃xff0c;请查看我的文章。

重命名属性

解构的一个重要特性是&＃xff1a;能够为我们提取的属性选择不同的变量名。让我们看看下面的例子&＃xff1a;

const me &＃61; { name: "Juan" }const { name: myName } &＃61; meconsole.log(myName)------------------------Output------------------------Juan通过在一个属性上使用 :我们可以为它提供一个新的名称(在我们的例子中是 newName)。然后我们可以在代码中访问这个变量。需要注意的是&＃xff0c;原始属性 name的变量并没有被定义。

缺少属性

那么&＃xff0c;如果我们试图解构一个没有在对象中定义的属性&＃xff0c;会发生什么呢&＃xff1f;

const { missing } &＃61; {}console.log(missing)------------------------Output------------------------undefined在这种情况下&＃xff0c;变量的值是 undefined。

默认值

扩展缺失的属性&＃xff0c;当属性不存在时&＃xff0c;可以指定一个默认值。让我们来看一些例子&＃xff1a;

const { missing &＃61; "missing default" } &＃61; {}const { someUndefined &＃61; "undefined default" } &＃61; { someUndefined: undefined }const { someNull &＃61; "null default" } &＃61; { someNull: null }const { someString &＃61; "undefined default" } &＃61; { someString: "some string here" }console.log(missing)console.log(someUndefined)console.log(someNull)------------------------Output------------------------missing defaultundefined defaultnullsome string here这些都是解构对象赋值的例子&＃xff0c;默认值仅在属性 undefined分配。例如&＃xff0c;如果属性的值为 null或 string&＃xff0c;则不会分配默认值&＃xff0c;但属性的实际值会被分配。

解构数组和可迭代对象

我们已经看到了一些解构对象的例子&＃xff0c;但是同样的例子也适用于数组或可迭代对象。让我们从一个例子开始&＃xff1a;

const arr &＃61; [1, 2, 3]const [a, b] &＃61; arrconsole.log(a)console.log(b)------------------------Output------------------------12当我们需要解构一个数组时&＃xff0c;我们需要使用 []而不是 {}&＃xff0c;我们可以用不同的变量映射数组的每个位置。但是也有一些不错的方法&＃xff1a;

跳过元素

通过使用 , 运算符&＃xff0c;我们可以跳过可迭代数据项中的一些元素&＃xff0c;如下所示&＃xff1a;

const arr &＃61; [1, 2, 3]const [a,, b] &＃61; arrconsole.log(a)console.log(b)------------------------Output------------------------13请注意&＃xff0c;在 ,之间留一个空格会跳过元素。这是小细节&＃xff0c;但对结果有很大影响。你还能做什么&＃xff1f;你也可以使用扩展运算符 ...进行如下操作&＃xff1a;

const arr &＃61; [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]const [a,, b, ...z] &＃61; arrconsole.log(a)console.log(b)console.log(z)------------------------Output------------------------13(7) [4, 5, 6, 7, 8, 9, 10]在这种情况下&＃xff0c;z将获得 b之后的所有值成为数组。或者你有一个更具体的需求&＃xff0c;你想在数组中的特定位置解构。没问题&＃xff0c;Javascript 依然可以做到&＃xff1a;

const arr &＃61; [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]const { 4: fourth, 9: ninth } &＃61; arrconsole.log(fourth)console.log(ninth)------------------------Output------------------------510如果我们把一个数组当作一个对象来解构&＃xff0c;我们可以把索引作为属性&＃xff0c;来访问数组中的任何位置的值。

缺少属性

与对象的情况一样&＃xff0c;也可以为数组中未定义的元素设置默认值。让我们看一些例子&＃xff1a;

const [missing &＃61; &＃39;default missing&＃39;] &＃61; []const [a, b, c &＃61; "missing c", ...others] &＃61; [1, 2]console.log(missing)console.log(a)console.log(b)console.log(c)console.log(others)------------------------Output------------------------default missing12missing c[]当解构数组时&＃xff0c;也可以为 undefined属性设置默认值。但是&＃xff0c;当我们使用扩展运算符...时&＃xff0c;则不能为变量设置默认值。在使用 ...解构 undefined时&＃xff0c;它将返回一个空数组&＃xff1a;

交换变量

这是一个有趣的解构示例。在一个表达式中可以交换两个变量&＃xff1a;

let a &＃61; 1let b &＃61; 5[a, b] &＃61; [b, a]console.log(a)console.log(b)------------------------Output------------------------51

使用计算属性进行解构

直到现在&＃xff0c;任何时候我们想要解构一个对象的属性或者一个可迭代的元素&＃xff0c;我们都使用静态键。如果我们想要动态键(比如存储在变量中的键)&＃xff0c;我们需要使用计算属性&＃xff1a;

const me &＃61; { name: "Juan" }let dynamicVar &＃61; &＃39;name&＃39;let { [dynamicVar]: myName } &＃61; meconsole.log(myName)------------------------Output------------------------Juan通过在 []中使用变量&＃xff0c;我们可以在赋值之前计算它的值。因此&＃xff0c;尽管必须为该新变量提供名称&＃xff0c;但可以进行动态解构。

解构函数参数

解构变量可以在我们声明变量的任何地方使用(例如&＃xff0c;通过使用 let、const 或 var)&＃xff0c;也可以解构函数参数。这是一个简单的示例&＃xff1a;

const me &＃61; { name: "Juan" }function printName({ name }) { console.log(name)}printName(me)------------------------Output------------------------Juan

非常简单。此外&＃xff0c;我们之前讨论过的所有规则都适用。

结论

在开始使用解构时可能会不舒服&＃xff0c;但一旦你习惯了&＃xff0c;就再也回不去了。它真的可以让你的代码更简洁&＃xff0c;这是一个需要了解的概念。

我们在虚拟的空间与你相遇&＃xff0c;期待可以碰撞出不一样的火花