[JavaScript] JavaScript 解构赋值的 5 个有趣用法！

`48656c6c6f2045766572796f6e65`

查看我的普通 JavaScript 代码，我发现到处都是解构赋值。

读取对象属性和访问数组元素是常见的操作。解构赋值使这些操作变得更加简单简洁。

在这篇文章中，我将介绍 JavaScript 中解构赋值的 5 个有趣用法，超越其基本用法。

1）交换变量

通常交换两个变量需要一个额外的临时变量。我们来看一个简单的例子：

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

temp = a;
a = b;
b = temp;

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

temp是一个临时变量，它保存的值a。然后a被赋予值b，因此b也被赋予值temp。

解构赋值使得变量交换变得简单，无需使用临时变量：

let a = 1;
let b = 2;

[a, b] = [b, a];

a; // => 2
b; // => 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; // => 0
one;  // => 1
two;  // => 2

你可以随意交换任意数量的变量！不过，最常见的情况是交换两个变量。

2) 访问数组项

你有一个数组，其中的元素可能为空。你想访问数组中的第一个、第二个或第n个元素，但如果该元素不存在，则获取默认值。

通常情况下，你会使用数组的长度属性：

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'] = colorsfirstColor解构操作会将数组的第一个元素赋值给变量colors。如果数组在该索引处没有元素0，则'white'赋值为默认值。

注意解构左侧的逗号：它表示忽略第一个元素。数组中secondColor索引为的元素被赋值给。1colors

3）不可变操作

当我开始使用 React，后来又使用 Redux 时，我不得不编写符合不可变性原则的代码。虽然一开始遇到了一些困难，但后来我发现了它的好处：处理单向数据流更容易。

不可变性禁止对对象进行修改。幸运的是，解构赋值可以帮助你轻松地以不可变的方式实现某些操作。

解构操作与...剩余元素运算符结合使用，会从数组的开头移除元素：

const numbers = [1, 2, 3];

const [, ...fooNumbers] = numbers;

fooNumbers; // => [2, 3]
numbers; // => [1, 2, 3]

解构操作[, ...fooNumbers] = numbers会创建一个新数组，其中包含除第一个元素之外的fooNumbers所有元素。numbers

numbers数组不会被修改，保持操作的不可变性。

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

const big = {
 foo: 'value Foo',
 bar: 'value Bar'
};

const { foo, ...small } = big;

small; // => { bar: 'value Bar' }
big; // => { foo: 'value Foo', bar: 'value Bar' }

解构赋值与对象剩余运算符结合使用，会创建一个新的小对象，该小对象具有来自的所有属性big，只是没有foo。

4）解构可迭代对象

前面的章节中，解构操作应用于数组。但你可以解构任何实现了可迭代协议的对象。

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

const str = 'cheese';

const [firstChar = ''] = str;

firstChar; // => 'c'

你不仅限于使用原生类型。通过实现可迭代协议，可以自定义解构逻辑。

movies包含一个电影对象列表。在解构时movies，最好能获取电影标题字符串。让我们实现一个自定义迭代器：

const movies = {
  list: [
    { title: 'Skyfall' }, 
    { 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); // => 'Skyfall'

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

遵循可迭代协议可以将movies对象解构为标题，具体来说，就是读取第一部电影的标题：const [firstMovieTitle] = movies。

使用迭代器进行解构赋值，可能性无限。

5）解构动态特性

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

对象的解构看起来很简单：

const movie = { title: 'Skyfall' };

const { title } = movie;

title; // => 'Skyfall'

const { title } = movie创建一个变量title，并将属性的值赋给它movie.title。

第一次读到对象解构的时候，我有点惊讶，原来你不需要事先知道属性名。你可以解构一个属性名是动态的的对象！

为了了解动态解构的工作原理，我们来编写一个问候函数：

function greet(obj, nameProp) {
 const { [nameProp]: name = 'Unknown' } = obj;
 return `Hello, ${name}!`;
}

greet({ name: 'Ben' }, 'name'); // => 'Hello, Ben!'
greet({ }, 'name'); // => 'Hello, Unknown!'