對象解構與點操做訪問究竟誰快

隨着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次的循環中，卻出現了一個反彈。再來看下點操做的時間消耗

圖形大體上與解構操做差很少，可是隨着循環次數的增長，單次操做消耗的時間是減小的。那麼再來看下二者一塊兒的比較圖吧

相對來講點操做消耗的時間要少點，可是這麼點差異彷佛在實際使用中沒有什麼分別，由於基本上咱們不可能在瀏覽器上一次性處理百萬級的數據操做，而處理小數據的時候，書寫上對象解構要更簡便，所以咱們能夠大膽放心的在實際項目中使用對象解構來代替點操做訪問。