JS单行、多行文本字符去重和行去重

栏目: JavaScript · 发布时间: 7年前

内容简介:之前偶然看到一篇这里的实现对知识点的要求非常的低,不论你是老司机还是菜鸟,基本上一眼就能看到其真谛;注意:本文不涉及对底层接口运行原理的解析。如有感兴趣,请自行查阅相关文档,进一步的了解前端的性能优化;

之前偶然看到一篇 使用正则实现字符去重及多行去重 的文章。感觉写的有点糙,而且性能也不够高,对新手的使用和理解都有一点难度。于是忍不住就搞了一个比较可爱的出来。而且不是一般的可爱,因为随着字符量的增长,其性能甩出前者不知道多少条街。

知识点

这里的实现对知识点的要求非常的低,不论你是老司机还是菜鸟,基本上一眼就能看到其真谛;

  • 超好用的 Array.from() [不知道?],当然你可以可以用经典的 slice.call() 来轻松搞定古董浏览器们;
  • Array口杯接口 Array.prototype.reduce(Func[, initialValue]):Array|TypeLike[initialValue] ,它被广泛应用于各种求值操作,这里就不细讲了;
  • 高颜值的 String.prototype.match(string|RegExp):null|Array
  • 使用评率最高的 Array.prototype.split(string|RegRxp):Array ;
  • 新的 Array.prototype.includes(string):boolean ,当然,你也可以使用其他接口如: indexOf()find()some() 等;
  • 正则表达式

注意:本文不涉及对底层接口运行原理的解析。如有感兴趣,请自行查阅相关文档,进一步的了解前端的性能优化;

单行文本去重

//单行文本去重
function SingleLineDistinct (str) {
    // Array.prototype.slice.call(str|new String(str)) 可兼容不支持from接口的浏览器
    return Array.from(str).reduce(
        // 这里应该很好明白是在干什么吧?
        (pre,cur) => (pre.match(cur) ? pre : pre + cur), 
        // 需要传入一个初始空字符串参数,否则你将得到的是一个字符串被拆分后的数组。
        ""
    ); 
}复制代码

多行字符去重

多行字符去重直接就是基于单行去重的简单封装

function MultiLineCharDistinct (mlstr) {
    // 是不是超级简单?
    return mlstr.split("\n").map(SingleLineDistinct).join("\n")
}复制代码

多行行去重

这个也是非常的简单的,用一下数组判断接口就行啦。

function MultiLineDistinct (str, spl = "\n") {
    // 这里就不能给reduce传入初始空字符串了,因为那样会返回
    return str.split(spl).reduce(
        // 判断一下,初始数组中有没有与当前行相同的字符串,没有则push当前行,并返回数组;
        (pre,cur) => (!pre.includes(cur) && pre.push(cur),pre),
        []
    )
    // 进行行拆分
    .join(spl); 
}复制代码

见证奇迹的时刻到了

这里还是贴一下前面提到的运用正则进行单行去重的代码吧:

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

接下来我们就来进行两个单行去重函数的性能进行比较了:【高能预警!】

首先,我们给 SingleLineDistinct()DistinctString() 函数添加执行时间打印 console.time()console.timeEnd() [这里非本文重点,不做应用阐述],变成了这样:

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;
}复制代码

我们定义一个 let str = "lsdjfl...." 的随机重复字符变量,然后就该它们俩发挥了:

JS单行、多行文本字符去重和行去重 咦~~,彼此彼此嘛...

JS单行、多行文本字符去重和行去重 DistinctString:不好意思,失误,再来!

JS单行、多行文本字符去重和行去重 DistinctString:SingleLineDistinct你等等我呀!

JS单行、多行文本字符去重和行去重 SingleLineDistinct:不好意思,你实在太慢了。

哈哈哈哈,怎么样,是不是很有趣?希望你各位喜欢。如果你们有更好更快的方法,欢迎交流哟~

声明:本文的内容并不是对正则表达式的否定,正则的牛逼之处是无可替代的,请各位不要误解。仅仅是想通过这样一个栗子,告诉大家每一种方法都有它的长处和短处。想要编写高性能、高质量的代码,那么你就必须要了解其运行原理和底层技术,这样才能让你在编程时选择更好的代码组织模式,提高应用的执行效率。


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Web Development Recipes

Web Development Recipes

Brian P. Hogan、Chris Warren、Mike Weber、Chris Johnson、Aaron Godin / Pragmatic Bookshelf / 2012-1-22 / USD 35.00

You'll see a full spectrum of cutting-edge web development techniques, from UI and eye candy recipes to solutions for data analysis, testing, and web hosting. Make buttons and content stand out with s......一起来看看 《Web Development Recipes》 这本书的介绍吧!

在线进制转换器
在线进制转换器

各进制数互转换器

HTML 编码/解码
HTML 编码/解码

HTML 编码/解码

MD5 加密
MD5 加密

MD5 加密工具