es6解構賦值 [a,b] = [b,a]的幾個問題

相比於傳統方法須要一個額外變量來進行值交換，使用解構進行值交換十分方便。可是我想到幾個問題：

一、解構賦值有沒有節省空間呢？

// 傳統

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值大小的空間。

二、解構賦值有沒有更快呢？

話很少講，直接上代碼：

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，這一過程較爲費時。

三、一個有趣（撓頭）的發現

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」