如果你查看我的常规 JavaScript 代码,会看到到处都有解构。
读取对象属性和访问数组项是常见的操作。结构使这些操作变得更加轻松和简洁。
在本文中,除了基本用法之外,我还将会介绍在 JavaScript 中 5 种有趣的解构用法。
1、交换变量
let a = 1;
let b = 2;
let temp;
temp = a;
a = b;
b = temp;
a; // => 2
b; // => 1
解构分配使变量交换变得简单,不需要任何临时变量:
let a = 1;
let b = 2;
[a, b] = [b, a];
a; // => 2
b; // => 1
这不是极限。你可以同时交换两个以上的变量。让我们尝试一下:
let zero = 2;
let one = 1;
let two = 0;
[zero, one, two] = [two, one, zero];
zero; // => 0
one; // => 1
two; // => 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 colors = [];
const [, secondColor = 'black'] = colors;
secondColor; // => 'black'
3、不变的操作
当我开始用 React 以及后来的 Redux 时,被迫编写尊重不变性的代码。尽管一开始遇到了一些困难,但后来我看到了它的好处:单向数据流更容易处理。
不变性禁止更改对象。幸运的是,解构可以帮你轻松地以不变的方式完成某些操作。
结合使用 ... rest 操作符可以从数组的开头删除元素:
const numbers = [1, 2, 3];
const [, ...fooNumbers] = numbers;
fooNumbers; // => [2, 3]
numbers; // => [1, 2, 3]
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' }
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 对象结构为标题,特别是通过读取第一部电影的标题:const [firstMovieTitle] = movies。
在使用迭代器进行解构时,只有天空才是对你的限制。
5、解构动态属性
const movie = { title: 'Heat' };
const { title } = movie;
title; // => 'Heat'
要了解动态解构的工作原理,我们编写一个函数:
function greet(obj, nameProp) {
const { [nameProp]: name = 'Unknown' } = obj;
return `Hello, ${name}!`;
}
greet({ name: 'Batman' }, 'name'); // => 'Hello, Batman!'
greet({ }, 'name'); // => 'Hello, Unknown!'
更妙的是如果该属性不存在,则可以指定默认值 'Unknown'。
六、结论
如果要访问对象属性和数组项,则解构效果很好。
除了基本用法外,数组解构还可以方便地交换变量、访问数组项、执行一些不可变的操作。
JavaScript 提供了更大的可能性,因为你可以用迭代器自定义解构逻辑。
你知道还有哪些关于解构有趣的应用?在下面写评论!