js循環(huán)中使用正則失效異常的踩坑實戰(zhàn)
更新時間：2023年05月08日 08:48:18 作者：天渺工作室
這篇文章主要給大家介紹了關于js循環(huán)中使用正則失效異常的踩坑實戰(zhàn),文中通過實例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
1、異常案例：
使用正則匹配111
const regular = /111/g; // 匹配111
// console.log(regular.test('111')); // true 匹配成功
// console.log(regular.test('111,111')); // true 匹配成功
const list = [
'111',
'111',
'111,111',
'111,111'
];
list.forEach((element, index) => {
// 異常寫法
console.log('log_________' + regular.test(element));
});
// 打印結果
// log_________true
// log_________false // 會存在正則匹配為false的異常
// log_________true
// log_________true發(fā)現了lastIndex 這個屬性。
2、原因分析
用正則表達式只要設置了全局匹配標志 /g ，test()方法 的執(zhí)行就會改變正則表達式 lastIndex 屬性。再循環(huán)中連續(xù)的執(zhí)行 test() 方法，后面的執(zhí)行將會從 lastIndex 數字處開始匹配字符串。
原來如此，看來test() 方法確實也不能隨便濫用。
確認驗證一下：
const regular = /111/g; // 匹配111
const list = [
'111',
'111',
'111,111',
'111,111'
];
list.forEach((element, index) => {
// 異常寫法
console.log('log_________' + regular.test(element));
// 打印lastIndex
console.info('logLastIndex___' + regular.lastIndex);
});
// 打印結果
// log_________true
// logLastIndex___3
// log_________false // 確實因為lastIndex為3導致的
// logLastIndex___0
// log_________true
// logLastIndex___3
// log_________true
// logLastIndex___73、解決方法1
上面我們發(fā)現正則test()方法有l(wèi)astIndex屬性，每次循環(huán)給恢復一下。
const regular = /111/g; // 匹配111
const list = [
'111',
'111',
'111,111',
'111,111'
];
list.forEach((element, index) => {
regular.lastIndex = 0;
console.log('log_________' + regular.test(element)); // 打印正常
});問題解決 OK了。
3、解決方法2
上面我們發(fā)現正則表達式設置了全局標志 /g 的問題,去掉/g全局匹配。（這個具體還得看自己的應用場景是否需要/g）
const regular = /111/; // 去掉/g全局匹配
const list = [
'111',
'111',
'111,111',
'111,111'
];
list.forEach((element, index) => {
console.log('log_________' + regular.test(element)); // 打印正常
});OK了。
3、解決方法3
js有基本數據類型和引用數據類型
ECMAScript包括兩個不同類型的值：基本數據類型和引用數據類型。\
基本數據類型：Number、String、Boolen、Undefined、Null、Symbol、Bigint。\
引用數據類型：也就是對象類型Object type，比如：對象（Object）、數組（Array）、函數（Function）、日期(Date)、正則表達式(RegExp)。
so正則表達式屬于引用數據類型，按傳統(tǒng)思維肯定是需要“深拷貝”的，需要new 一個新Object。
const regular = /111/g;
const list = [
'111',
'111',
'111,111',
'111,111'
];
list.forEach((element, index) => {
// 正確寫法 new RegExp的內存指向在循環(huán)過程中每次都單獨開辟一個新的“對象”，不會和前幾次的循環(huán)regular.test(xxx)改變結果而混淆
// console.log('log_________' + /111/g.test(element)); // 這樣寫當然也行
console.log('log_________' + new RegExp(regular).test(element)); // 打印OK了
});OK了。
總結
到此這篇關于js循環(huán)中使用正則失效異常的踩坑的文章就介紹到這了,更多相關js循環(huán)中正則失效異常內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要為大家分享了js窗口震動小程序,可設置抖動的頻率，范圍，和次數，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-11-11
本文給大家分享的是一段點擊自動添加inpu節(jié)點的代碼，非常的簡單實用，這里推薦給大家。2014-12-12
這篇文章主要介紹了JavaScript檢測上傳文件大小的方法,涉及javascript針對上傳文件的相關判定技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-07-07
這篇文章主要介紹了JavaScript實現淺拷貝與深拷貝的方法,結合實例形式總結分析了JavaScript淺拷貝與深拷貝的定義與使用方法,需要的朋友可以參考下2018-07-07
這篇文章主要介紹了JS設計模式之命令模式概念與用法,簡單描述了命令模式的原理、功能并結合javascript實例形式分析了命令模式相關定義與使用技巧,需要的朋友可以參考下2018-02-02
這篇文章主要介紹了如何基于viewport vm適配移動端頁面,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-11-11
這篇文章主要為大家詳細介紹了js實現簡單廣告小窗口，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章主要為大家詳細介紹了JavaScript面試的?？碱},即如何判斷兩個數組的內容是否相等,文中的示例方法講解詳細,需要的小伙伴可以參考一下2023-10-10
下面小編就為大家?guī)硪黄狫avaScript DOM節(jié)點操作方法總結。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-08
webpack 插件html-webpack-plugin的具體使用
本篇文章主要介紹了webpack 插件html-webpack-plugin的具體使用，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-04-04