关于JS解构的5种有趣用法

前言

原文标题：5 Interesting Uses of JavaScript Destructuring

原文链接：dmitripavlutin.com/5-interesti…

定期回顾我写的JS代码，我发现解构运算无处不在。

获取对象的属性和访问数组内容是都是很常用的操作。而解构运算使得这些操作变得非常简单明了。

在这篇文章中，我将会讲解JS解构不同于常见用法的五种使用技巧。

1. 交换变量

常见的交互两个变量值的方法都需要借助一个额外的变量，看一个简单的例子：

let a = 1;let b = 2;let temp;temp = a;a = b;b = temp;a; // => 2b; // => 1

temp是一个临时变量，在例子中存储了变量a的值，b的值赋给了a，最后把temp的值赋给了b。
解构运算使得交换变量的值变得非常简单，不需要借助第三个临时变量：

let a = 1;let b = 2;[a, b] = [b, a];a; // => 2b; // => 1

[a, b] = [b, a]是一个解构运算。在等号的右侧，创建了一个数组[b, a]，对应的值为[2, 1]。数组的第一个值2被解构赋值给了a，第二项1被解构赋值给了b。

即使这种方式仍然创建了一个临时数组，但是解构赋值对于交换变量的值仍然是非常高效简单的方式。

这种方式并没有什么限制。你还可以同时交互更多的变量值，比如：

let zero = 2;let one = 1;let two = 0;[zero, one, two] = [two, one, zero];zero; //=> 0one; //=> 1two; //=> 2

你可以交换任意数量的变量值，只是两个变量值的交换的情况更加常见。

2. 访问数组

有一个数组，这个数组有可能是空的。有一种需求是访问任意位置数组元素，如果这个位置为空，则返回一个默认值。
通常情况下有的人可能会使用数组的length属性做判断：

const colors = [];let firstColor = "white";if (colors.length > 0) {  firstColor = colors[0];}firstColor;  //=> "white"

幸运的是，数组解构可以更快捷高效的实现相同的效果：

const colors = [];const [firstColor = "white"] = colors;firstColor;  //=> "white"

const [firstColor = "white"] = colors;将colors数组的第一个元素赋值给了变量firstColor。如果这个数组的下标为0的位置上没有任何元素（注：为undefined时即认为为空），white将作为默认值赋值给firstColor。
数组解构是非常灵活的，如果你只想访问数组的第二个元素，方法如下所示：

const colors = [];const [, secondColor = "black"] = colors;secondColor;  //=> "black"

在解构表达式的左边写一个逗号：意味着数组的第一个元素被忽略掉。colors数组下标为1的元素被解构赋值给了变量secondColor。