js关键词变色，数组打乱，数组去重的实现和封装

plokmju88 发布于2019-08-20 17:21 / 586人阅读

摘要：前言今天，把自己之前封装过的一部分小功能操作分享出现，都是一些可以说是比较常用，实现起来比较简单，代码又比较少的一些功能或操作，比如关键词变色，数组打乱，数组去重等。关键词变色这个功能很常见，特别是在搜索引擎执行搜索的时候。

1.前言

今天，把自己之前封装过的一部分小功能操作分享出现，都是一些可以说是比较常用，实现起来比较简单，代码又比较少的一些功能或操作，比如关键词变色，数组打乱，数组去重等。

2.关键词变色

这个功能很常见，特别是在搜索引擎执行搜索的时候。其它不多说了，直接上代码





关键词变色 
 

 
 
前端工程师新人在前端的道路上还有很多路要走，比如一些刚在学校读出来的前端，最需的是真正的看一场真实的前端开发项目过程（个人觉得这个非常有必要），其次，前端的覆盖面非常广，要了解的知识也非常多，所以如果能得到过来人的前端工程师网的一些建议性的话，将是帮助很大的。以下摘自一个前端工程师过来人的一点感悟。

运行一下

就是要这个效果！
实现原理和过程：首先，点击按钮的时候获取文本框的value，通过以空格分割，变成一个数组（arr=key.split(/s+/);），然后把数组传到createExp()，创建一个正则的字符，比如上面就是传["前端","过来"]，然后createExp()就会返回(前端|过来)，再到就是通过创建一个正则(前端|过来)/g，最后就是把#thediv的内容进行正则匹配，比如：所有‘前端’就会被替换成前端。
这里值得注意的一点，就是，进行正则匹配之前，一定要过滤掉内容的html标签，避免影响下一次的运行，如果不过滤，就是这个bug

大家都看到了吧，我只输入‘过来’，结果‘前端’也变色了，那是因为我输入‘过来’的时候，之前就输入过‘前端’运行了一次，下一次不清除就会有这个bug，清除了就没事了！

2.打乱数组

打乱数组这个，也是比较常用吧，上代码

 function upsetOrder(arrOld,num){
        var result=[],_length=num||arrOld.length,arr;
        arr=Object.assign([],arrOld)
        for(var i=0,len=arr.length;i
运行一下

实现原理和过程：核心代码就是result.push(arr.splice(Math.floor(Math.random()*arr.length),1)[0]);，这个的原理就是每一次往result里面push一个元素，这个元素是从arr里面随便获取的。
这里值得注意的一点，arr=Object.assign([],arrOld)这行代码就是为了，打乱的结果不影响原来的数组。比如传进来时[1,2,3]，执行了原来的数组还是[1,2,3]。只是产生了一个新的打乱的数组而已。
3.数组去重
数组去重，相信大家遇到的就多了，无论是面试题还是项目需要，多少都会遇到过。去重的方法很多，我主要说两种方法。
第一种
function removeReapt(arrOld){
    var arr=[];
    for(var i=0,len=arrOld.length;i
运行一下

这个的实现原理和过程没什么好说的了，就是遍历原来的数组arrOld，判断arr有没有当前遍历到的数组元素，没有加添加进去。
第二种
第一种方法，表面上看是一层循环，但实际可以说是两层，至少在运行速度上是两层循环的速度。因为indexOf这个方法也是逐个比较的。所以我就再说第二种方法。
function removeReapt(arrOld){
    var arr= [];
    var json = {};
    for(var i = 0,len = arrOld.length; i < len; i++){
        if(!json[arrOld[i]]){
            arr.push(arrOld[i]);
            json[arrOld[i]] = 1;
        }
    }
    return arr;
}
运行一下

效果一下样！
实现原理和过程:遍历原数组。每次从原数组中取出一个元素，然后到对象中去访问这个属性，如果能访问到值，则说明重复,如果访问不到，就是arr还没有没有这元素，就添加进去，同时把这个元素作为json的一个属性，并赋值为1。这个方法，我个人觉得比较效率比第一种方法好，也不安按理解，推荐这个写法。
后续
关于js是实用或者常用的小功能操作，今天先到这里，以后再写其它的，希望能帮到大家！

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/83517.html

编写自己的代码库（javascript常用实例的实现与封装）

摘要：我自己封装这个，并不是我有造轮子的习惯，而是，都是一些常用，但是零散的小实例，网上基本没有插件。，因为零散的小实例，涉及到的有字符串，数组，对象等类型，就算找到插件，在项目引入的很有可能不止一个插件。都是简单的代码，封装也不难。 1.前言因为公司最近项目比较忙，没那么多空余的事件写文章了，所以这篇文章晚了几天发布。但是这也没什么关系，不过该来的，总是会来的。好了，其他的不多说的，大家...

plus2047 2019-08-20 18:06 评论0 收藏0
JS单行、多行文本字符去重和行去重

摘要：如有感兴趣，请自行查阅相关文档，进一步的了解前端的性能优化单行文本去重单行文本去重可兼容不支持接口的浏览器这里应该很好明白是在干什么吧需要传入一个初始空字符串参数，否则你将得到的是一个字符串被拆分后的数组。之前偶然看到一篇使用正则实现字符去重及多行去重的文章。感觉写的有点糙，而且性能也不够高，对新手的使用和理解都有一点难度。于是忍不住就搞了一个比较可爱的出来。而且不是一般的可爱，因为...

enrecul101 2019-08-23 13:56 评论0 收藏0
也谈面试必备问题之 JavaScript 数组去重

摘要：而数组元素去重是基于运算符的。而如果有迭代函数，则计算传入迭代函数后的值，对值去重，调用方法，而该方法的核心就是调用方法，和我们上面说的方法一异曲同工。 Why underscore （觉得这部分眼熟的可以直接跳到下一段了...）最近开始看 underscore.js 源码，并将 underscore.js 源码解读放在了我的 2016 计划中。阅读一些著名框架类库的源码，就好像...

Coly 2019-08-21 10:51 评论0 收藏0
js常见算法(一)：排序，数组去重，打乱数组，统计数组各个元素出现的次数，字符串各个字符的出现次数

摘要：排序，数组去重，打乱数组，统计数组各个元素出现的次数，字符串各个字符的出现次数，获取地址链接的各个参数以后会记录自己解决过和遇到过的算法相关的题，系列一就以常见的开篇吧。排序，数组去重，打乱数组，统计数组各个元素出现的次数，字符串各个字符的出现次数，获取地址链接的各个参数以后会记录自己解决过和遇到过的算法相关的题，系列一就以常见的开篇吧。排序本来想多列几个排序方法，但是其它都...

DTeam 2019-08-22 17:35 评论0 收藏0
数组去重--这几种方法够不?

摘要：数组去重是校招面试的必考知识点。以下就是笔者所实现的数组去重的几种简单的方式。结合实现这种方法的关键点就是判断是否相同的时候不要忽略对元素类型的判断。以上就是笔者所想到的几个数组去重的方式大家如果有更好的方法欢迎留言。数组去重,是校招面试的必考知识点。简单的说,数组去重就是将一个数组中的相同的元素删除,只保留其中的一个。这里的相同其实是一个陷阱,有好多同学只认为值相等即为相同,而忽略...

wendux 2019-08-21 15:01 评论0 收藏0