高性能JavaScript之字符串和正则

js中的字符串操作,是消耗一定性能的。
在这里插入图片描述
上图中提到了很多字符串操作的方法,现代浏览器中他们的效率差不多。
在这里插入图片描述
上图中展示了字符串拼接的步骤,这里特别注意要在内存中创建临时字符串,每加一次都产生一个临时字符串,这样占用内存就多了。
以上就是字符串的简单内容

下一步就是正则,不得不说正则是一个很复杂的东西,无论在哪种语言中。
先了解一下正则的执行过程
举一个例子:

/h(ello|appy) hippo/.test("hello there, happy hippo")

浏览器首先将正则表达式转化成原生代码程序,这个过程发生在浏览器每次遇到正则的时候,所以将正则赋值给一个变量是更好的打开方式。
上面的例子可以优化成 const reg = /h(ello|appy) hippo/ ; const str = "hello there, happy hippo"; reg.test(str)。接下来执行匹配的过程:

1.先从reg的第一个字符开始匹配,去字符串中查找h字符:第一个就是,这一点匹配上之后,要记录一个索引,用于后续匹配,
2.本次的匹配继续,reg的第二部分是(ello|appy),这是一个二选一的结构,在正则中称为决策点,显然hello匹配上了字符串,
3.然后就是reg的后续部分,是一个空格,在字符串中也匹配到了,接下来reg中的h和字符串中的t不匹配,所以第一次匹配失败了,我们将索引加一,继续从头匹配,也就是字符串中的第二位e 与正则的第一位h开始匹配,匹配失败索引再加一,这样重复下去。
4.直到后半段happy hippo匹配了正则,当然这里(ello|appy)决策点取的是 appy。

tip:在这里插入图片描述
正则中除了有决策点,还有量词
在这里插入图片描述
这个例子中(*)号就是个量词,还有其他的比如/a{2}/,指定a出现两次,还有(+)还有可有可无的(?),在正则匹配中,遇到量词也会特殊处理,具体处理方式就和正则的写法,以及引擎中正则解析方法有关。

猜你喜欢

转载自blog.csdn.net/weixin_40121676/article/details/109635842