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

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

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

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

知识点

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

  • 超好用的 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:不好意思,你实在太慢了。

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

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


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

查看所有标签

猜你喜欢:

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

数据之美

数据之美

邱南森 (Nathan Yau) / 张伸 / 中国人民大学出版社 / 2014-2-1 / CNY 89.00

这是一本教我们如何制作完美可视化图表,挖掘大数据背后意义的书。作者认为,可视化是一种媒介,向我们揭示了数据背后的故事。他循序渐进、深入浅出地道出了数据可视化的步骤和思想。本书让我们知道了如何理解数据可视化,如何探索数据的模式和寻找数据间的关联,如何选择适合自己的数据和目的的可视化方式,有哪些我们可以利用的可视化工具以及这些工具各有怎样的利弊。 作者给我们提供了丰富的可视化信息以及查看、探索数......一起来看看 《数据之美》 这本书的介绍吧!

CSS 压缩/解压工具
CSS 压缩/解压工具

在线压缩/解压 CSS 代码

Markdown 在线编辑器
Markdown 在线编辑器

Markdown 在线编辑器

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具