学写提升性能的代码之字符串处理-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%左右。markdown

//不生成中间临时变量的字符串拼接 
str = str + "a" + "b"
复制代码

比使用赋值表达式实现字符串拼接在性能上稍慢的方法，是数组对象的join(方法。join()方法接收一个字符串类型的参数，做为拼接数组各元素之间的链接符，若是传入的是一个空字符串，则全部元素仅简单地拼接起来。除此以外，字符串对象还原生提供了一种拼接字符串的方法concat()，该方法不只可接受单个字符串，还可同时接受多个字符串及字符串数组，其使用起来较为灵活，但其在性能方面依然比赋值表达式的方式要慢。app