資訊專欄INFORMATION COLUMN
摘要：最近在使用正則匹配的時(shí)候，我遇到一個(gè)非常有意思的現(xiàn)象，代碼如下所示這段代碼很好理解它的規(guī)則就是判斷字符串中是否含有，然后再循環(huán)地和數(shù)組中的字符串進(jìn)行匹配，打印出結(jié)果。
最近在使用正則匹配的時(shí)候，我遇到一個(gè)非常有意思的現(xiàn)象，代碼如下所示：
const reg = /.jpg/g;
const arr = [
"test1.jpg",
"test2.jpg",
"test3.jpg",
"test4.jpg",
"test5.jpg",
];
arr.map(item => console.log(reg.test(item)));
這段代碼很好理解：它的規(guī)則就是判斷字符串中是否含有.jpg，然后再循環(huán)地和數(shù)組中的字符串進(jìn)行匹配，打印出結(jié)果。
很顯然這非常之簡(jiǎn)單嘛，輸出的結(jié)果當(dāng)然是全為true啦~
然而，圖樣圖森破，它的結(jié)果是這樣的：
代碼的執(zhí)行結(jié)果非常神奇：它并沒(méi)有全部打印true，而是交替打印true和false值，這到底是為什么？
為了查清楚到底是怎么回事，我開(kāi)始上網(wǎng)搜索相關(guān)資料，經(jīng)過(guò)一番搜索后，發(fā)現(xiàn)正則并沒(méi)有我們想象的那么簡(jiǎn)單...
首先正則有一個(gè)屬性叫lastIndex，它表示正則下一次匹配時(shí)的起始位置。一般情況下我們是使用不到它的，但在正則中包含全局標(biāo)志g時(shí)，正則的test和exec方法就會(huì)使用到它，具體規(guī)則如下：
初始狀態(tài)下lastIndex的值為0
若成功匹配，lastIndex的值就被更新成被匹配字符串后面的第一個(gè)字符的index，或者可理解為被匹配字符串的最后一個(gè)字符index + 1，
若匹配失敗，lastIndex則被重置為0。
如果我們繼續(xù)使用原先的正則進(jìn)行下一輪匹配，它則會(huì)從字符串lastIndex的位置開(kāi)始進(jìn)行
為驗(yàn)證這個(gè)結(jié)論，我特意做了兩個(gè)實(shí)驗(yàn)：
第一個(gè)就是直接將正則的lastIndex打印出來(lái)：
const reg = /.jpg/g;
const arr = [
"test1.jpg",
"test2.jpg",
"test3.jpg",
"test4.jpg",
"test5.jpg",
];
arr.map(item => console.log(reg.test(item), reg.lastIndex));
第二個(gè)就對(duì)數(shù)組中的字符串稍作修改：
const reg = /.jpg/g;
const arr = [
"test1.jpg",
"longTest4.jpg",
"test3.jpg",
"longTest4.jpg",
"test5.jpg",
];
arr.map(item => console.log(reg.test(item), reg.lastIndex));
通過(guò)兩組實(shí)驗(yàn)的對(duì)比觀察，發(fā)現(xiàn)確實(shí)如此：
在第一個(gè)實(shí)驗(yàn)中，由于數(shù)組中字符串的長(zhǎng)度都是一致的，成功匹配后lastIndex的值直接更新為9，下次匹配的時(shí)候直接從第10個(gè)字符開(kāi)始（很明顯根本就沒(méi)第10個(gè)字符嘛），因此匹配失敗，lastIndex重置為0。以此類推，最終以9、0、9的形式交替打印。
而第二個(gè)實(shí)驗(yàn)由于我們?cè)黾恿瞬糠肿址拈L(zhǎng)度，因此對(duì)于第2、4個(gè)字符串而言，即使從第9個(gè)字符開(kāi)始匹配，依然能匹配到后邊的.jpg，故lastIndex繼續(xù)更新到13
通過(guò)這次小小的實(shí)驗(yàn)，我們發(fā)現(xiàn)使用正則的時(shí)候還是要多加小心，對(duì)于test和exec方法，最好還是不要隨意加上全局標(biāo)志g。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/97682.html
摘要：返回是一個(gè)只讀的布爾值，看這個(gè)正則表達(dá)式是否帶有修飾符。方法，它的參數(shù)是一個(gè)字符串，用對(duì)某個(gè)字符串進(jìn)行檢測(cè)，如果包含正則表達(dá)式的一個(gè)匹配結(jié)果，則返回，否則返回?？偨Y(jié)這次主要是說(shuō)說(shuō)，中正則表達(dá)式對(duì)象的個(gè)屬性，而最需要注意的就是屬性了。 說(shuō)明 這篇文章，主要和大家聊聊JavaScript中RegExp對(duì)象的屬性。 解釋 每個(gè)RegExp對(duì)象都包含5個(gè)屬性，source、global、ign...
摘要：返回是一個(gè)只讀的布爾值，看這個(gè)正則表達(dá)式是否帶有修飾符。方法，它的參數(shù)是一個(gè)字符串，用對(duì)某個(gè)字符串進(jìn)行檢測(cè)，如果包含正則表達(dá)式的一個(gè)匹配結(jié)果，則返回，否則返回?？偨Y(jié)這次主要是說(shuō)說(shuō)，中正則表達(dá)式對(duì)象的個(gè)屬性，而最需要注意的就是屬性了。 說(shuō)明 這篇文章，主要和大家聊聊JavaScript中RegExp對(duì)象的屬性。 解釋 每個(gè)RegExp對(duì)象都包含5個(gè)屬性，source、global、ign...
摘要：返回是一個(gè)只讀的布爾值，看這個(gè)正則表達(dá)式是否帶有修飾符。方法，它的參數(shù)是一個(gè)字符串，用對(duì)某個(gè)字符串進(jìn)行檢測(cè)，如果包含正則表達(dá)式的一個(gè)匹配結(jié)果，則返回，否則返回?？偨Y(jié)這次主要是說(shuō)說(shuō)，中正則表達(dá)式對(duì)象的個(gè)屬性，而最需要注意的就是屬性了。 說(shuō)明 這篇文章，主要和大家聊聊JavaScript中RegExp對(duì)象的屬性。 解釋 每個(gè)RegExp對(duì)象都包含5個(gè)屬性，source、global、ign...
摘要：等價(jià)于實(shí)例屬性正則對(duì)象的實(shí)例屬性分成兩類。返回一個(gè)布爾值，表示是否設(shè)置了修飾符。字符串對(duì)象的方法，返回第一個(gè)滿足條件的匹配結(jié)果在整個(gè)字符串中的位置。字符串對(duì)象的方法按照正則規(guī)則分割字符串，返回一個(gè)由分割后的各個(gè)部分組成的數(shù)組。 概述實(shí)例屬性實(shí)例方法RegExp.prototype.test()g RegExp.prototype.exec()g括號(hào)indexx input屬性字符串的實(shí)...
閱讀 1242·2021-11-15 18:00
閱讀 3052·2021-09-22 15:18
閱讀 2077·2021-09-04 16:45
閱讀 881·2019-08-30 15:55
閱讀 4107·2019-08-30 13:10
閱讀 1473·2019-08-30 11:06
閱讀 2093·2019-08-29 12:51
閱讀 2430·2019-08-26 13:55
