摘要：如有感興趣，請(qǐng)自行查閱相關(guān)文檔，進(jìn)一步的了解前端的性能優(yōu)化單行文本去重單行文本去重可兼容不支持接口的瀏覽器這里應(yīng)該很好明白是在干什么吧需要傳入一個(gè)初始空字符串參數(shù)，否則你將得到的是一個(gè)字符串被拆分后的數(shù)組。

之前偶然看到一篇使用正則實(shí)現(xiàn)字符去重及多行去重的文章。感覺(jué)寫(xiě)的有點(diǎn)糙，而且性能也不夠高，對(duì)新手的使用和理解都有一點(diǎn)難度。于是忍不住就搞了一個(gè)比較可愛(ài)的出來(lái)。而且不是一般的可愛(ài)，因?yàn)殡S著字符量的增長(zhǎng)，其性能甩出前者不知道多少條街。

這里的實(shí)現(xiàn)對(duì)知識(shí)點(diǎn)的要求非常的低，不論你是老司機(jī)還是菜鳥(niǎo)，基本上一眼就能看到其真諦；

超好用的Array.from()[不知道？]，當(dāng)然你可以可以用經(jīng)典的slice.call()來(lái)輕松搞定古董瀏覽器們；

Array口杯接口Array.prototype.reduce(Func[, initialValue]):Array|TypeLike[initialValue]，它被廣泛應(yīng)用于各種求值操作，這里就不細(xì)講了；

高顏值的String.prototype.match(string|RegExp):null|Array；

使用評(píng)率最高的Array.prototype.split(string|RegRxp):Array;

新的Array.prototype.includes(string):boolean，當(dāng)然，你也可以使用其他接口如：indexOf()、find()、some()等；

正則表達(dá)式

注意：本文不涉及對(duì)底層接口運(yùn)行原理的解析。如有感興趣，請(qǐng)自行查閱相關(guān)文檔，進(jìn)一步的了解前端的性能優(yōu)化；

//單行文本去重
function SingleLineDistinct (str) {
    // Array.prototype.slice.call(str|new String(str)) 可兼容不支持from接口的瀏覽器
    return Array.from(str).reduce(
        // 這里應(yīng)該很好明白是在干什么吧？
        (pre,cur) => (pre.match(cur) ? pre : pre + cur), 
        // 需要傳入一個(gè)初始空字符串參數(shù)，否則你將得到的是一個(gè)字符串被拆分后的數(shù)組。
        ""
    ); 
}

多行字符去重直接就是基于單行去重的簡(jiǎn)單封裝

function MultiLineCharDistinct (mlstr) {
    // 是不是超級(jí)簡(jiǎn)單？
    return mlstr.split("
").map(SingleLineDistinct).join("
")
}

這個(gè)也是非常的簡(jiǎn)單的，用一下數(shù)組判斷接口就行啦。

function MultiLineDistinct (str, spl = "
") {
    // 這里就不能給reduce傳入初始空字符串了，因?yàn)槟菢訒?huì)返回
    return str.split(spl).reduce(
        // 判斷一下，初始數(shù)組中有沒(méi)有與當(dāng)前行相同的字符串，沒(méi)有則push當(dāng)前行，并返回?cái)?shù)組；
        (pre,cur) => (!pre.includes(cur) && pre.push(cur),pre),
        []
    )
    // 進(jìn)行行拆分
    .join(spl); 
}

這里還是貼一下前面提到的運(yùn)用正則進(jìn)行單行去重的代碼吧:

function DistinctString(s){
    var a;
    while((a=s.replace(/(.)(.*?)1/,"$1$2"))!=s) s=a;
    return s;
}

接下來(lái)我們就來(lái)進(jìn)行兩個(gè)單行去重函數(shù)的性能進(jìn)行比較了：【高能預(yù)警！】

首先，我們給SingleLineDistinct()和DistinctString()函數(shù)添加執(zhí)行時(shí)間打印console.time()和console.timeEnd()[這里非本文重點(diǎn)，不做應(yīng)用闡述]，變成了這樣：

function DistinctString(s){
    console.time("dstring");
    var a;
    while((a=s.replace(/(.)(.*?)1/,"$1$2"))!=s) s=a;
    console.timeEnd("dstring");
    return s;
}

//單行文本去重
function SingleLineDistinct (str) {
    console.time("sldist");
    str = Array.from(str).reduce(
        (pre,cur) => (pre.match(cur) ? pre : pre + cur), 
        ""
    ); 
    console.timeEnd("sldist");
    return str;
}

我們定義一個(gè)let str = "lsdjfl...."的隨機(jī)重復(fù)字符變量，然后就該它們倆發(fā)揮了：

咦~~，彼此彼此嘛...

DistinctString：不好意思，失誤，再來(lái)！

DistinctString：SingleLineDistinct你等等我呀！

SingleLineDistinct：不好意思，你實(shí)在太慢了。

哈哈哈哈，怎么樣，是不是很有趣？希望你各位喜歡。如果你們有更好更快的方法，歡迎交流喲~

聲明：本文的內(nèi)容并不是對(duì)正則表達(dá)式的否定，正則的牛逼之處是無(wú)可替代的，請(qǐng)各位不要誤解。僅僅是想通過(guò)這樣一個(gè)栗子，告訴大家每一種方法都有它的長(zhǎng)處和短處。想要編寫(xiě)高性能、高質(zhì)量的代碼，那么你就必須要了解其運(yùn)行原理和底層技術(shù)，這樣才能讓你在編程時(shí)選擇更好的代碼組織模式，提高應(yīng)用的執(zhí)行效率。