有時我是真不敢用“解構賦值”和“拓展運算符”啊!
前言
大家好,我是林三心,用最通俗易懂的話講最難的知識點是我的座右銘,基礎是進階的前提是我的初心~
解構賦值
解構賦值 我相信大家都不陌生,這是一個方便大家開發的語法,你可以使用 解構賦值 從 數組、對象 中解構出對應 索引、屬性 所對應的值,比如下方對于數組進行的解構,可以使用 [] 進行解構。
圖片
但是你們真的知道為什么這種寫法能完成解構的嗎?想要了解為什么,我們可以看看 V8 的源碼,可以看出,為了通過這種寫法能完成解構,v8 底層其實做了很多事情。
圖片
其實數組的解構,也可以使用 {} 進行解構。
圖片
而相比于使用 [] 的解構,明顯 V8 在為使用 {} 做解構時,做的工作就少了很多。
性能測試
為了證實上述的觀點,我準備了以下的代碼例子,可以看到 [] 耗時是 {} 的三倍以上。
圖片
建議
所以建議大家,在進行大數量的循環里,想要對數組進行解構的話,最好是通過 {} 去解構,這樣減少一點性能損耗。
拓展運算符
拓展運算符 大家也不陌生,也是一個使用起來很方便的語法,主要用在 數組、對象 上,基本語法如下:
圖片
但是很多人不知道,如果你的數組數據量很大的時候,使用 拓展運算符 會直接崩掉!
圖片
圖片
通過 Babel 編譯后可知,push 方法最終會編譯成 apply
圖片
在查閱了MDN后終于知道了原因,如果按上面方式調用apply,有超出JavaScript引擎參數長度上限的風險。一個方法傳入過多參數(比如一萬個)時的后果在不同JavaScript引擎中表現不同
圖片
建議
在數據可能量比較大的時候,不應該使用拓展運算符,而是因為使用循環
圖片
或者使用 concat
圖片