
读取对象属性和访问数组项是常见的操作。销毁分配使这些操作变得更加轻松和简洁。在本文中,除了基本用法之外,我还将介绍JavaScript中5种有趣的解构用法。
1. 交换变量
通常交换两个变量的方法需要一个额外的临时变量,来看看例子:
let a = 1; let b = 2; let temp; temp = a; a = b; b = temp; a; // => 2 b; // => 1
temp是一个临时变量,它先保存a的值。然后把b的值赋值给a,接着将temp值赋给 b。
如果使用解构的方式会更简单,不需要什么鬼的 temp 变量。
立即学习“Java免费学习笔记(深入)”;
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。
虽然这种方式也创建了临时数组,但这种方式给看起来至少更简洁,使用解构咱们还可以交换2个以上的变量。
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'
注意解构左侧的逗号:它表示忽略第一个元素,secondColor使用colors数组中索引为1的元素进行赋值。
3.不可变操作
当我开始使用React和Redux时,被迫编写了一些遵守不可变性的代码。虽然一开始有些困难,但后来我看到了它的好处:更容易处理单向数据流。
不变性要求不能改变原始对象。幸运的是,解构可以以不可变的方式轻松实现某些操作。
const numbers = [1, 2, 3]; const [, ...fooNumbers] = numbers; fooNumbers; // => [2, 3] numbers; // => [1, 2, 3]
解构 [, ... fooNumbers] = numbers创建一个新的数组fooNumbers,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' }4.解构 iterables
在前面几个例子中,对数组使用了解构,但是咱们可以对任何实现可迭代协议( iterable protocol)的对象进行解构。
jQuery图片内容展开/收缩选项卡,点击图片会出现对应的文字解说。兼容主流浏览器,php中文网推荐下载! 使用方法: 1、head区域引用以下文件
相关专题
本专题系统讲解 Java 虚拟机(JVM)的核心工作原理与性能调优方法,包括 JVM 内存结构、对象创建与回收流程、垃圾回收器(Serial、CMS、G1、ZGC)对比分析、常见内存泄漏与性能瓶颈排查,以及 JVM 参数调优与监控工具(jstat、jmap、jvisualvm)的实战使用。通过真实案例,帮助学习者掌握 Java 应用在生产环境中的性能分析与优化能力。
28
2026.01.20
本专题系统讲解 PHP 在实时通信与长连接场景中的应用实践,涵盖 WebSocket 协议原理、服务端连接管理、消息推送机制、心跳检测、断线重连以及与前端的实时交互实现。通过聊天系统、实时通知等案例,帮助开发者掌握 使用 PHP 构建实时通信与推送服务的完整开发流程,适用于即时消息与高互动性应用场景。
23
2026.01.19
热门下载
相关下载
精品课程







