es6解构赋值 [a,b] = [b,a]的几个问题

相比于传统方法需要一个额外变量来进行值交换，使用解构进行值交换十分方便。但是我想到几个问题：

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

可以分析出解构赋值的过程应当为

1. 以从左到右的顺序计算右侧数组的值，得到数组
2. 以从左到右的顺序，将右侧数组的值赋给左侧

可以看到解构复制的过程中会有一个包含两个元素的临时数组，并没有比传统方法节省空间，甚至空间会比传统方法更多一个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有关，却不知道具体原因。希望有大佬可以为萌新解惑呀～

欢迎关注「 字节前端 ByteFE 」

简历投递联系邮箱「tech@bytedance.com」