es6解构赋值 [a,b] = [b,a]的几个问题
全栈前端精选
共 2135字，需浏览 5分钟
·
2021-08-16 12:14
相比于传统方法需要一个额外变量来进行值交换，使用解构进行值交换十分方便。但是我想到几个问题：
1、解构赋值有没有节省空间呢？
// 传统
let c = b;
b = a;
a = c;
// 解构
[a, b] = [b, a];
首先思考如下操作：
let a = 1, b = 2;
[a, b] = [b=a, a=3];//1 3
可以分析出解构赋值的过程应当为
以从左到右的顺序计算右侧数组的值，得到数组 以从左到右的顺序，将右侧数组的值赋给左侧
可以看到解构复制的过程中会有一个包含两个元素的临时数组，并没有比传统方法节省空间，甚至空间会比传统方法更多一个 int 值大小的空间。
2、解构赋值有没有更快呢？
话不多讲，直接上代码：
const times = 3000000000;
let a = 1, b = 2;
let time1 = new Date().getTime();
while (i++ < times) {
[a, b] = [b, a];
let c = b;
b = a;
a = c;
let d = b;
b = a;
a = d;
}
console.log(new Date().getTime() - time1); // 4300左右
time1 = new Date().getTime();
while (i-- >= 0) {
[a, b] = [b, a];
[a, b] = [b, a];
let c = b;
b = a;
a = c;
}
console.log(new Date().getTime() - time1); // 6400左右
可以看到，解构交换值的速度更慢。按照常理猜测一下，可能是解构赋值需要申请临时数组，然后遍历数组对等号左侧的变量进行赋值，在此期间还需要检测数组元素是否为 undefined，这一过程较为费时。
3、一个有趣（挠头）的发现
while (i++ < times) {
[a, b] = [b, a];
[a, b] = [b, a];
let c = b;
b = a;
a = c;
}
while (i++ < times) {
[a, b] = [b, a];
[a, b] = [b, a];
}
肉眼观察，上面的循环内操作更多，应当耗时更多，结果却是在公司 mbp 上运行，前者耗时显著更少，在个人 windows 电脑上运行，二者耗时几乎一致。经过分析只知道可能与 JIT 有关，却不知道具体原因。希望有大佬可以为萌新解惑呀～
这是一条招聘广告
字节跳动电商业务岗位多多！
HC多多！你想投递的我们都有，快来找我内推吧！
投递链接：https://job.toutiao.com/s/ewyX4Dg
邮箱：buchuan.sd@bytedance.com
评论