js關鍵詞變色，數(shù)組打亂，數(shù)組去重的實現(xiàn)和封裝

plokmju88 發(fā)布于2019-08-20 17:21 / 609人閱讀

摘要：前言今天，把自己之前封裝過的一部分小功能操作分享出現(xiàn)，都是一些可以說是比較常用，實現(xiàn)起來比較簡單，代碼又比較少的一些功能或操作，比如關鍵詞變色，數(shù)組打亂，數(shù)組去重等。關鍵詞變色這個功能很常見，特別是在搜索引擎執(zhí)行搜索的時候。

1.前言

今天，把自己之前封裝過的一部分小功能操作分享出現(xiàn)，都是一些可以說是比較常用，實現(xiàn)起來比較簡單，代碼又比較少的一些功能或操作，比如關鍵詞變色，數(shù)組打亂，數(shù)組去重等。

2.關鍵詞變色

這個功能很常見，特別是在搜索引擎執(zhí)行搜索的時候。其它不多說了，直接上代碼





關鍵詞變色 
 

 
 
前端工程師新人在前端的道路上還有很多路要走，比如一些剛在學校讀出來的前端，最需的是真正的看一場真實的前端開發(fā)項目過程（個人覺得這個非常有必要），其次，前端的覆蓋面非常廣，要了解的知識也非常多，所以如果能得到過來人的前端工程師網(wǎng)的一些建議性的話，將是幫助很大的。以下摘自一個前端工程師過來人的一點感悟。

運行一下

就是要這個效果！
實現(xiàn)原理和過程：首先，點擊按鈕的時候獲取文本框的value，通過以空格分割，變成一個數(shù)組（arr=key.split(/s+/);），然后把數(shù)組傳到createExp()，創(chuàng)建一個正則的字符，比如上面就是傳["前端","過來"]，然后createExp()就會返回(前端|過來)，再到就是通過創(chuàng)建一個正則(前端|過來)/g，最后就是把#thediv的內容進行正則匹配，比如：所有‘前端’就會被替換成前端。
這里值得注意的一點，就是，進行正則匹配之前，一定要過濾掉內容的html標簽，避免影響下一次的運行，如果不過濾，就是這個bug

大家都看到了吧，我只輸入‘過來’，結果‘前端’也變色了，那是因為我輸入‘過來’的時候，之前就輸入過‘前端’運行了一次，下一次不清除就會有這個bug，清除了就沒事了！

2.打亂數(shù)組

打亂數(shù)組這個，也是比較常用吧，上代碼

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

實現(xiàn)原理和過程：核心代碼就是result.push(arr.splice(Math.floor(Math.random()*arr.length),1)[0]);，這個的原理就是每一次往result里面push一個元素，這個元素是從arr里面隨便獲取的。
這里值得注意的一點，arr=Object.assign([],arrOld)這行代碼就是為了，打亂的結果不影響原來的數(shù)組。比如傳進來時[1,2,3]，執(zhí)行了原來的數(shù)組還是[1,2,3]。只是產生了一個新的打亂的數(shù)組而已。
3.數(shù)組去重
數(shù)組去重，相信大家遇到的就多了，無論是面試題還是項目需要，多少都會遇到過。去重的方法很多，我主要說兩種方法。
第一種
function removeReapt(arrOld){
    var arr=[];
    for(var i=0,len=arrOld.length;i
運行一下

這個的實現(xiàn)原理和過程沒什么好說的了，就是遍歷原來的數(shù)組arrOld，判斷arr有沒有當前遍歷到的數(shù)組元素，沒有加添加進去。
第二種
第一種方法，表面上看是一層循環(huán)，但實際可以說是兩層，至少在運行速度上是兩層循環(huán)的速度。因為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;
}
運行一下

效果一下樣！
實現(xiàn)原理和過程:遍歷原數(shù)組。每次從原數(shù)組中取出一個元素，然后到對象中去訪問這個屬性，如果能訪問到值，則說明重復,如果訪問不到，就是arr還沒有沒有這元素，就添加進去，同時把這個元素作為json的一個屬性，并賦值為1。這個方法，我個人覺得比較效率比第一種方法好，也不安按理解，推薦這個寫法。
后續(xù)
關于js是實用或者常用的小功能操作，今天先到這里，以后再寫其它的，希望能幫到大家！

GPU云服務器云服務器 php關聯(lián)數(shù)組打亂 java怎么打亂數(shù)組數(shù)組去重數(shù)組去重

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/83517.html

編寫自己的代碼庫（javascript常用實例的實現(xiàn)與封裝）

摘要：我自己封裝這個，并不是我有造輪子的習慣，而是，都是一些常用，但是零散的小實例，網(wǎng)上基本沒有插件。，因為零散的小實例，涉及到的有字符串，數(shù)組，對象等類型，就算找到插件，在項目引入的很有可能不止一個插件。都是簡單的代碼，封裝也不難。 1.前言因為公司最近項目比較忙，沒那么多空余的事件寫文章了，所以這篇文章晚了幾天發(fā)布。但是這也沒什么關系，不過該來的，總是會來的。好了，其他的不多說的，大家...

plus2047 2019-08-20 18:06 評論0 收藏0
JS單行、多行文本字符去重和行去重

摘要：如有感興趣，請自行查閱相關文檔，進一步的了解前端的性能優(yōu)化單行文本去重單行文本去重可兼容不支持接口的瀏覽器這里應該很好明白是在干什么吧需要傳入一個初始空字符串參數(shù)，否則你將得到的是一個字符串被拆分后的數(shù)組。之前偶然看到一篇使用正則實現(xiàn)字符去重及多行去重的文章。感覺寫的有點糙，而且性能也不夠高，對新手的使用和理解都有一點難度。于是忍不住就搞了一個比較可愛的出來。而且不是一般的可愛，因為...

enrecul101 2019-08-23 13:56 評論0 收藏0
也談面試必備問題之 JavaScript 數(shù)組去重

摘要：而數(shù)組元素去重是基于運算符的。而如果有迭代函數(shù)，則計算傳入迭代函數(shù)后的值，對值去重，調用方法，而該方法的核心就是調用方法，和我們上面說的方法一異曲同工。 Why underscore （覺得這部分眼熟的可以直接跳到下一段了...）最近開始看 underscore.js 源碼，并將 underscore.js 源碼解讀放在了我的 2016 計劃中。閱讀一些著名框架類庫的源碼，就好像...

Coly 2019-08-21 10:51 評論0 收藏0
js常見算法(一)：排序，數(shù)組去重，打亂數(shù)組，統(tǒng)計數(shù)組各個元素出現(xiàn)的次數(shù)，字符串各個字符的出現(xiàn)次數(shù)

摘要：排序，數(shù)組去重，打亂數(shù)組，統(tǒng)計數(shù)組各個元素出現(xiàn)的次數(shù)，字符串各個字符的出現(xiàn)次數(shù)，獲取地址鏈接的各個參數(shù)以后會記錄自己解決過和遇到過的算法相關的題，系列一就以常見的開篇吧。排序，數(shù)組去重，打亂數(shù)組，統(tǒng)計數(shù)組各個元素出現(xiàn)的次數(shù)，字符串各個字符的出現(xiàn)次數(shù)，獲取地址鏈接的各個參數(shù) 以后會記錄自己解決過和遇到過的算法相關的題，系列一就以常見的開篇吧。排序本來想多列幾個排序方法，但是其它都...

DTeam 2019-08-22 17:35 評論0 收藏0
數(shù)組去重--這幾種方法夠不?

摘要：數(shù)組去重是校招面試的必考知識點。以下就是筆者所實現(xiàn)的數(shù)組去重的幾種簡單的方式。結合實現(xiàn)這種方法的關鍵點就是判斷是否相同的時候不要忽略對元素類型的判斷。以上就是筆者所想到的幾個數(shù)組去重的方式大家如果有更好的方法歡迎留言。數(shù)組去重,是校招面試的必考知識點。簡單的說,數(shù)組去重就是將一個數(shù)組中的相同的元素刪除,只保留其中的一個。這里的相同其實是一個陷阱,有好多同學只認為值相等即為相同,而忽略...

wendux 2019-08-21 15:01 評論0 收藏0