5个JavaScript 解构的有趣用法

原文：Dmitri Pavlutin
翻译：疯狂的技术宅

原文：https://dmitripavlutin.com/5-...

未经允许严禁转载

如果你查看我的常规 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 个项目，但是如果该项目不存在，请获取默认值。

通常你会用到数组的 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 处没有任何元素，则将分配默认值 white 。

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

const colors = [];

const [, secondColor = 'black'] = colors;

secondColor; // => 'black'

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

3.不变的操作

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

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

结合使用 ... rest 操作符可以从数组的开头删除元素：

const numbers = [1, 2, 3];

const [, ...fooNumbers] = numbers;

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

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

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

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

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

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

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

解构与 object rest operator 结合使用可创建一个具有 big 所有属性的新对象 small ，唯独不包含 foo。

4. 解构可迭代对象

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

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

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

const str = 'cheese';

const [firstChar = ''] = str;

firstChar; // => 'c'

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

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

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 方法来实现可迭代的协议。迭代器遍历电影的标题。

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

在使用迭代器进行解构时，只有天空才是对你的限制。

5. 解构动态属性

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

对象的解构看起来非常简单：

const movie = { title: 'Heat' };

const { title } = movie;

title; // => 'Heat'

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

当初读到有关对象解构的文章时，我惊讶于不必静态地知道属性名称。你可以用动态属性名称来解构对象！

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

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

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

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

在 greet() 内部，解构赋值 const {[nameProp]:name ='Unknown'} = obj 使用方括号 [nameProp] 读取动态属性名称。变量 name 接收动态属性值。

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

六. 结论

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

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

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

你知道还有哪些关于解构有趣的应用？在下面写评论！

本文首发微信公众号：前端先锋

欢迎扫描二维码关注公众号，每天都给你推送新鲜的前端技术文章

欢迎继续阅读本专栏其它高赞文章：

更多文章...

5个JavaScript 解构的有趣用法

1. 交换变量

2. 访问数组项

3.不变的操作

4. 解构可迭代对象

5. 解构动态属性

六. 结论

本文首发微信公众号：前端先锋

欢迎扫描二维码关注公众号，每天都给你推送新鲜的前端技术文章

欢迎继续阅读本专栏其它高赞文章：

疯狂的技术宅

引用和评论

为什么浮点数运算会产生误差

腾讯新闻中心首页改版啦

前端如何入门 Go 语言

前站 - 前端导航，搜索社区，阅读文章，提升技术

前端开发工具

100个React最佳实践小技巧

开发插件集合