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

4,153 阅读1分钟

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

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