學寫提升性能的代碼之字符串處理-1

這是我參與8月更文挑戰的第11天，活動詳情查看： 8月更文挑戰

前言

凡涉及JavaScript操做的地方，幾乎均可看到字符串處理的影子，一個典型的前端應用一般包含了大量的合併、搜索、剪切、重排與遍歷等字符串操做。

同時爲了高效處理字符串，使用正則表達式也是必不可少的，但兩個匹配同一文本的正則表達式並不意味着它們具備相同的執行速度。本文就來記錄字符串處理與正則表達式編寫有關的性能優化問題。

字符串拼接

字符串拼接是前端開發中的常規操做，但在大規模數據的循環選代中進行字符等拼接時，可能稍有不慎就會形成嚴重的性能問題。首先咱們來回顧一下有哪些方法能進行字符串拼接。

// 使用"+"運算符
const str1 "a" + "b"
// 使用"+="運算符
const str2 = "a"
str2 += "b"
// 使用數組的join()方法
const str3 = ["a", "b"].join()
// 使用字符串的concat()方法
const str4 = "a"
str4.concat("b")
複製代碼

當咱們在處理單次或少許字符串拼接時，這些方法的運行速度都很快，根據本身偏好使用便可，但隨着須要迭代合併的字符串數量增長，他們之間性能的差別逐漸顯現，以下是一個字符串迭代拼接的處理過程：

let len = 1000
let str = ""
while(len--){
  str += "a" + "b"
}
複製代碼

單看循環內部的字符串拼接操做，其代碼運行過程可分爲四步：首先在內存中建立一個臨時的字符串變量，而後將拼接的字符串"ab"敲值給這個臨時變量，接着再把該臨時變量與str的當前值進行拼接，最後將結果賦值給str。可見因爲存在臨時變量的存取，其性能並不知足預期，若避免臨時變量存取直接向str變量上拼接，在大部分瀏覽器中，都能將這一操做步驟的執行速度提高20%左右。

//不生成中間臨時變量的字符串拼接 
str = str + "a" + "b"
複製代碼

比使用賦值表達式實現字符串拼接在性能上稍慢的方法，是數組對象的join(方法。join()方法接收一個字符串類型的參數，做爲拼接數組各元素之間的鏈接符，若是傳入的是一個空字符串，則全部元素僅簡單地拼接起來。除此以外，字符串對象還原生提供了一種拼接字符串的方法concat()，該方法不只可接受單個字符串，還可同時接受多個字符串及字符串數組，其使用起來較爲靈活，但其在性能方面依然比賦值表達式的方式要慢。