物件解構與點操作訪問究竟誰快

隨著ES6標準的正式實行，我們又多了一種訪問Object屬性的方法，那就是物件解構，舉個栗子?

const obj = {a:1, b:'hello world'};

// 從前我們是這樣訪問的
const a = obj.a
const b = obj.b

// 現在我們可以這樣訪問
const {a,b} = obj;
複製程式碼

可以看到，物件解構在程式碼的數量上減少了許多，那麼問題來了，從前我們在進行點操作訪問物件屬性的時候，處於效能考慮，會將頻繁訪問的屬性先用一個變數儲存起來，特別是深度越深的屬性，點操作需要的時間也會愈多，因此快取屬性是一個比較好的方法；那麼現在與物件解構相比，究竟那種操作會更消耗時間呢？

我寫了一個簡單的指令碼

用於比較物件解構和點操作訪問的消耗時間，測試環境是Safari 11.1.2，取樣資料是隨機採取，剔除顯而易見的跳躍資料。

下圖是解構操作消耗時間圖，縱座標是對數排列

我分別測試了迴圈10次，100次，1000次，10000次，1000000次，10000000次的物件訪問，可以發現隨著迴圈次數增加，消耗時間是指數增長的，然後我又計算7種迴圈模式下，每次迴圈消耗的時間，可以看到，隨著迴圈的數量增加，每次消耗的時間反而在減少，但是，在最後的10e7次的迴圈中，卻出現了一個反彈。再來看下點操作的時間消耗

圖形大致上與解構操作差不多，但是隨著迴圈次數的增加，單次操作消耗的時間是減少的。那麼再來看下兩者一起的比較圖吧

相對來說點操作消耗的時間要少點，但是這麼點差別似乎在實際使用中沒有什麼分別，因為基本上我們不可能在瀏覽器上一次性處理百萬級的資料操作，而處理小資料的時候，書寫上物件解構要更簡便，因此我們可以大膽放心的在實際專案中使用物件解構來代替點操作訪問。