I came across an article that used regex to implement character and line de-duplication. Feel write a little rough, and the performance is not high enough, novice use and understanding are a little difficult. So I couldn’t help but make a cute one. And not generally cute, because as the character size grows, its performance does not know how many streets out of the former.

knowledge

The realization of the knowledge requirements here is very low, no matter you are an old driver or rookie, basically can see its true meaning at a glance;

  • The super handyArray.from()[Don’t know?Of course you can use the classic oneslice.call()To easily defeat antique browsers;
  • Array Cup interfaceArray.prototype.reduce(Func[, initialValue]):Array|TypeLike[initialValue], it is widely used in all kinds of evaluation operations, I won’t go into detail here;
  • Having a high level of appearanceString.prototype.match(string|RegExp):null|Array;
  • Use the one with the highest ratingArray.prototype.split(string|RegRxp):Array;
  • The newArray.prototype.includes(string):booleanOf course, you can also use other interfaces such as:indexOf(),find(),some()And so on;
  • Regular expression

Note: This article does not cover the parsing of how the underlying interface works. If you are interested, please refer to the relevant documentation to further understand the front-end performance optimization;

Single line text is deduplicated

// Delete single line textfunctionSingleLineDistinct (STR) {/ / Array. Prototype. Slice. Call (STR | new String (STR)) compatible browser does not support the from interfacereturnArray.from(STR).reduce(// it's easy to see what's going on here, right? (pre,cur) => (pre.match(cur) ? Pre: pre + cur), // You need to pass in an initial empty string argument, otherwise you'll get an array of broken strings.""
    ); 
}Copy the code

Multiple line characters are deduplicated

Multiple – line character recertification is a simple encapsulation based on single – line recertification

functionMultiLineCharDistinct (MLSTR) {// Is this super simple?return mlstr.split("\n").map(SingleLineDistinct).join("\n")}Copy the code

Multiple lines go heavy

This is also very simple, using the array to determine the interface on the line.

function MultiLineDistinct (str, spl = "\n") {// We can't pass reduce an initial empty string here, because that would returnreturnStr.split (SPL).reduce(// Determine if the initial array contains the same string as the current row, if not, push the current row and return the array; (pre,cur) => (! Pre. Push (cur) && pre. Push (cur),pre), []) // Join (SPL); }Copy the code

It’s time for a miracle

Here’s the code that uses the re to delete a single line:

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

Next, we will compare the performance of two single-line deduplication functions:

First, we added execution times to SingleLineDistinct() and DistinctString() functions printing console.time() and console.timeend (), which looks like this:

function DistinctString(s){
    console.time('dstring');
    var a;
    while((a=s.replace(/ (.). (. *?) \ 1 /."$1, $2"))! =s) s=a;console.timeEnd('dstring');
    return s;
}Copy the code
// Delete single line textfunction SingleLineDistinct (str) {
    console.time('sldist');
    str = Array.from(str).reduce(
        (pre,cur) => (pre.match(cur) ? pre : pre + cur), 
        ""
    ); 
    console.timeEnd('sldist');
    return str;
}Copy the code

Let STR = “LSDJFL….” Random repeat character variables, and then it’s time for both of them to play:



Ehh, it’s the same…



DistinctString: Sorry, mistake, repeat!



DistinctString: You wait for me!



SingleLineDistinct: Sorry, you are so slow.

Hahaha, how about that? Isn’t that fun? I hope you enjoy it. If you have a better and faster way, welcome to exchange yo ~

Note: This article is not a rejection of regular expressions. There is no substitute for regular expressions. I just want to tell everyone that each method has its advantages and disadvantages through such a chestnut. If you want to write high-performance, high-quality code, you must understand how it works and the underlying technology, so that you can choose better code organization patterns and improve the efficiency of your application.