动词ing形式的5种用法_JavaScript分解的5种有趣用法

查看我的常规JavaScript代码，我看到到处都有解构分配。

读取对象属性和访问数组项是常见的操作。销毁分配使这些操作变得更加轻松和简洁。

在本文中，除了基本用法之外，我还将介绍JavaScript中5种有趣的解构用法。

1.交换变量

交换2个变量的通常方法需要一个附加的临时变量。让我们看一个简单的场景：

temp是一个临时变量，其中包含的值a。然后a为分配值b，并因此b为temp。

解构分配使变量交换变得简单，不需要任何临时变量：

[a, b] = [b, a]是一项破坏性任务。在右侧，创建一个数组[b, a]，即[2, 1]。此数组的第一项2分配给a，第二项1分配给b。

尽管仍创建临时数组，但使用解构分配交换变量更为简洁。

这不是极限。您可以同时交换两个以上的变量。让我们尝试一下：

您可以根据需要交换任意多个变量！虽然，交换2个变量是最常见的情况。

2.访问数组项

您有一系列可能为空的项目。您要访问数组的第一，第二或第n个项目，但是如果该项目不存在，请获取默认值。

通常，您将使用数组的length属性：

幸运的是，数组解构可以帮助您实现更短的相同方法：

const [firstColor = 'white'] = colors解构将firstColor变量的第一个元素分配给colors数组。如果阵列未在索引处具有任何元件0，该'white'缺省值被分配。

但是有更多的灵活性。如果只想访问第二个元素，那也是可能的：

注意结构左侧的逗号：这意味着第一个元素将被忽略。secondColor被分配1了colors数组中索引处的元素。

3.不变的操作

当我开始使用React以及后来的Redux时，我被迫编写尊重不变性的代码。尽管一开始遇到一些困难，但后来我看到了它的好处：单向数据流更容易处理。

不变性禁止更改对象。幸运的是，解构可以帮助您轻松地以不变的方式完成某些操作。

与... rest运算符结合使用的解构可从数组的开头删除元素：

解构将[, ...fooNumbers] = numbers创建一个新数组fooNumbers，其中包含numbers第一个数组中的项目。

numbers 数组不会发生突变，从而使操作保持不变。

您可以以不变的方式从对象中删除属性。让我们尝试foo从对象中删除属性big：

解构分配与对象剩余运算符一起创建了一个新对象small，其所有属性都来自big，只有而不包含foo。

4.销毁可迭代对象

在前面的部分中，将解构应用于数组。但是您可以破坏实现可迭代协议的任何对象。

许多本机原始类型和对象都是可迭代的：数组，字符串，类型化数组，集合和映射。

例如，您可以将字符串分解为字符：

您不限于本机类型。可以通过实现可迭代的协议来定制解构逻辑。

movies拥有电影对象列表。进行销毁时movies，最好将电影标题作为字符串。让我们实现一个自定义迭代器：

movies对象通过定义Symbol.iterator方法来实现可迭代协议。迭代器遍历电影的标题。

遵循可迭代的协议，可以将movies对象分解为标题，特别是通过阅读第一部电影的标题：const [firstMovieTitle] = movies。

当使用迭代器进行销毁时，天空是极限。

5.破坏动态特性

以我的经验，通过属性对对象进行解构比对数组进行解构更常见。

对象的销毁看起来非常简单：

const { title } = movie创建一个变量title并为其分配属性值movie.title。

当初读有关对象销毁的文章时，我对您不必静态地知道属性名称感到有些惊讶。您可以使用动态属性名称来破坏对象！

要查看动态解构如何工作，让我们编写一个greeting函数：

greet() 使用2个参数调用该函数：对象和属性名称。

在内部greet()，销毁任务const { [nameProp]: name = 'Unknown' } = obj使用方形制动器读取动态特性名称[nameProp]。该name变量接收动态属性值。

更好的是'Unknown'，如果该属性不存在，则可以指定默认值。

六，结论

如果要访问对象属性和数组项，则解构效果很好。

除了基本用法外，数组解构还可以方便地交换变量，访问数组项，执行一些不可变的操作。

JavaScript提供了更大的可能性，因为您可以使用迭代器定义自定义解构逻辑。

原著作者：德米特里·帕夫鲁汀

文章来源：国外

原著链接：

Dmitri Pavlutin Blog​dmitripavlutin.com

PS：原著文章内容为英文版本，建议使用360极速浏览器进行翻译阅读。