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

2018-12-08 admin

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

知识点

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

  • 超好用的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...."的随机重复字符变量,然后就该它们俩发挥了:

clipboard.png 咦~~,彼此彼此嘛…

clipboard.png DistinctString:不好意思,失误,再来!

clipboard.png DistinctString:SingleLineDistinct你等等我呀!

clipboard.png SingleLineDistinct:不好意思,你实在太慢了。

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

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

原文链接:https://segmentfault.com/a/1190000017301448

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-47568.html

文章标题:JS单行、多行文本字符去重和行去重

相关文章
JavaScript实现PC手机端和嵌入式滑动拼图验证码三种效果
PC和手机端网站滑动拼图验证码效果源码,同时包涵了弹出式Demo,使用ajax形式提交二次验证码所需的验证结果值,嵌入式Demo,使用表单形式提交二次验证所需的验证结果值,移动端手动实现弹出式Demo三种效果 首先要确认前端使用页面,比如...
2017-03-17
国内外html5游戏引擎排行
一个好的HTML5游戏引擎,能够大大简化游戏的开发实现。 排名列表: Construct 2 ImpactJS EaselJS pixi.js Phaser GameMaker Three.js PlayCanvas Turbulenz ...
2015-11-12
React.js编程思想
JavaScript框架层出不穷,在很多程序员看来,React.js是创建大型、快速的Web应用的最好方式。这一款由Facebook出品的JS框架,无论是在Facebook还是在Instagram中,它的表现都非常出色。 使用React.j...
2015-11-12
Vue获取DOM元素样式和样式更改示例
在 vue 中用 document 获取 dom 节点进行节点样式更改的时候有可能会出现 ‘style’ is not definde的错误,这时候可以在 mounted 里用 $refs 来获取样式,并进行更改: <template...
2017-03-13
从2014年的发展来展望JS的未来将会如何
<font face="寰�杞�闆呴粦, Arial, sans-serif ">2014骞达紝杞�浠惰�屼笟鍙戝睍杩呴€燂紝鍚勭�嶈��瑷€灞傚嚭涓嶇┓锛屼互婊¤冻鐢ㄦ埛涓嶆柇鍙樺寲鐨勯渶姹傘€傝繖浜涜��...
2015-11-12
Vue.js组件tab实现选项卡切换
本文实例为大家分享了vue插件tab选项卡的具体代码,供大家参考,具体内容如下 效果图: 代码如下: <!DOCTYPE html> <html lang="en"> <head> ...
2017-03-13
JavaScript教程:JS中的原型
Keith Peters 几年前发表的一篇博文,关于学习没有“new”的世界,其中解释了使用原型继承代替构造函数。两者都是纯粹的原型编码。 标准方法(The Standard Way) 一直以来,我们学习的在 JavaScript 里创建对...
2015-11-12
three.js实现围绕某物体旋转
话不多说,请看代码: 可以拖动右上角观察变化 <!DOCTYPE html> <html lang="en" style="width: 100%; height:100%;"&gt...
2017-02-17
NodeJS参考手册pdf版
下载地址:Nodejs参考手册PDF版下载 ...
2015-11-12
Node.js学习(1)----HTTP服务器与客户端
Node.js 标准库提供了 http 模块,其中封装了一个高效的 HTTP 服务器和一个简易的HTTP 客户端。http.Server 是一个基于事件的 HTTP 服务器,它的核心由 Node.js 下层 C++部分实现,而接口由 Jav...
2015-11-12
回到顶部