定期回顾我写的JS代码，我发现解构运算无处不在。获取对象的属性和访问数组内容是都是很常用的操作。而解构运算使得这些操作变得非常简单明了。在这篇文章中，我将会讲解JS解构不同于常见用法的五种使用技巧。
1. 交换变量常见的交互两个变量值的方法都需要借助一个额外的变量，看一个简单的例子：
[JavaScript] 纯文本查看 复制代码 let a = 1;
let b = 2;
let temp;
temp = a;
a = b;
b = temp;
a; // => 2
b; // => 1
[JavaScript] 纯文本查看 复制代码 let a = 1;
let b = 2;
[a, b] = [b, a];
a; // => 2
b; // => 1
[JavaScript] 纯文本查看 复制代码 let zero = 2;
let one = 1;
let two = 0;
[zero, one, two] = [two, one, zero];
zero; //=> 0
one; //=> 1
two; //=> 2
2. 访问数组有一个数组，这个数组有可能是空的。有一种需求是访问任意位置数组元素，如果这个位置为空，则返回一个默认值。通常情况下有的人可能会使用数组的length属性做判断：
[JavaScript] 纯文本查看 复制代码 const colors = [];
let firstColor = "white";
if (colors.length > 0) {
firstColor = colors[0];
}
firstColor; //=> "white"
[JavaScript] 纯文本查看 复制代码 const colors = [];
const [firstColor = "white"] = colors;
firstColor; //=> "white"
const [firstColor = "white"] = colors;将colors数组的第一个元素赋值给了变量firstColor。如果这个数组的下标为0的位置上没有任何元素（注：为undefined时即认为为空），white将作为默认值赋值给firstColor。数组解构是非常灵活的，如果你只想访问数组的第二个元素，方法如下所示：
[JavaScript] 纯文本查看 复制代码 const colors = [];
const [, secondColor = "black"] = colors;
secondColor; //=> "black"
3. 不可变操作从我开始使用React，到后来的Redux，我被迫开始写一些遵循不可变原则的代码。刚开始的时候确实有点不适应，不过后来我就意识到了这种方式的好处：它使得处理单向数据流更加容易。不可变原则禁止修改对象。幸运的是，解构可以帮助你在遵循不可变原则的同时完成这些操作。将解构与展开运算符（rest operator）结合使用来移除数组的第一个元素：
[JavaScript] 纯文本查看 复制代码 const numbers = [1,2,3];
const [, ...fooNumbers] = numbers;
fooNumbers; //=> [2, 3]
numbers; //=> [1,2,3]
[JavaScript] 纯文本查看 复制代码 const big = {
foo: "value foo",
bar: "value bar",
}
const { foo, ...small } = big;
small; //=> { bar: "value bar" }
big; //=>{ foo: "value foo", bar: "value bar" }
上述方法将解构与对象展开运算符结合起来使用，创建了一个新的对象small，这个新对象包含big对象除了foo属性之外的所有属性。
4. 解构可迭代的值在前面几部分内容中，都是解构的数组。实际上解构运算是可以用于所有的可迭代对象的。许多原生的基础类型和对象都是可迭代的，例如数组，类数组，字符串，set集合和map集合。例如，你可以把字符串解构成单个字符：
[JavaScript] 纯文本查看 复制代码 const str = "cheese";
const [firstChar = ""] = str;
firstChar; //=> 'c'
当然解构不仅仅限于原生可迭代的那几种类型。解构可以被用于所有实现了迭代接口（iterable protocol）的对象。如下所示，movies包含一个movie对象列表。我们想要解构movies对象的时候，可以获取到电影的title这个字符串。实现这个操作首先需要自定义一个迭代器：
[JavaScript] 纯文本查看 复制代码
const movies = {
list: [
{ title: "Heat" },
{ title: "Interstellar" },
],
[Symbol.iterator]() {
let index = 0;
return {
next: () => {
if (index < this.list.length) {
const value = this.list[index++].title;
return { value, done: false };
}
return { done: true }
}
}
}
}
const [firstMovieTitle] = movies;
console.log(firstMovieTitle); //=> 'Heat'
movies对象通过定义Symbol.iterator方法实现了一个迭代器。这个迭代器可以迭代所有电影的title属性。我们在movies对象上遵循了迭代接口实现，从而实现了通过解构movies来获取到标题，比如我们获取第一个电影的标题：const [firstMovieTitle] = movies;。解构用法的上限就是没有上限。
5. 解构动态属性在我的经验中，解构一个对象的属性要远比解构一个数组的情况更多。解构对象看起来非常的简单：
[JavaScript] 纯文本查看 复制代码 const movie = { title: "Heat" };
const { title } = movie;
title; //=> Heat
[JavaScript] 纯文本查看 复制代码 function greet( obj, nameProp ) {
const { [nameProp]: name="Unknow" } = obj;
return `Hello, ${name}!`;
}
greet({ name: "Batman" }, "name"); //=> Hello, Batman!
greet( {}, "name" ); //=> Hello, Unknow!
6. 总结解构可以帮助你更方便快捷的访问对象属性和数组元素。除了基本用法之外，数组解构还可以方便的交换变量，访问数组元素，做一些遵循不可变原则的操作。JavaScript提供了更多的可能性，因为你可以通过扩展迭代器实现自定义的解构逻辑。
链接：https://juejin.im/post/5d673044f265da03d60f12f7
来源：掘金
| 
收藏
淘帖
踩
