亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專(zhuān)欄INFORMATION COLUMN

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

plokmju88 / 652人閱讀

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

1.前言

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

2.關(guān)鍵詞變色

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





關(guān)鍵詞變色 
 

 
 

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

運(yùn)行一下


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


大家都看到了吧，我只輸入‘過(guò)來(lái)’，結(jié)果‘前端’也變色了，那是因?yàn)槲逸斎搿^(guò)來(lái)’的時(shí)候，之前就輸入過(guò)‘前端’運(yùn)行了一次，下一次不清除就會(huì)有這個(gè)bug，清除了就沒(méi)事了！

2.打亂數(shù)組

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

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

運(yùn)行一下




實(shí)現(xiàn)原理和過(guò)程：核心代碼就是result.push(arr.splice(Math.floor(Math.random()*arr.length),1)[0]);，這個(gè)的原理就是每一次往result里面push一個(gè)元素，這個(gè)元素是從arr里面隨便獲取的。
這里值得注意的一點(diǎn)，arr=Object.assign([],arrOld)這行代碼就是為了，打亂的結(jié)果不影響原來(lái)的數(shù)組。比如傳進(jìn)來(lái)時(shí)[1,2,3]，執(zhí)行了原來(lái)的數(shù)組還是[1,2,3]。只是產(chǎn)生了一個(gè)新的打亂的數(shù)組而已。

3.數(shù)組去重

數(shù)組去重，相信大家遇到的就多了，無(wú)論是面試題還是項(xiàng)目需要，多少都會(huì)遇到過(guò)。去重的方法很多，我主要說(shuō)兩種方法。

第一種

function removeReapt(arrOld){
    var arr=[];
    for(var i=0,len=arrOld.length;i

運(yùn)行一下




這個(gè)的實(shí)現(xiàn)原理和過(guò)程沒(méi)什么好說(shuō)的了，就是遍歷原來(lái)的數(shù)組arrOld，判斷arr有沒(méi)有當(dāng)前遍歷到的數(shù)組元素，沒(méi)有加添加進(jìn)去。

第二種

第一種方法，表面上看是一層循環(huán)，但實(shí)際可以說(shuō)是兩層，至少在運(yùn)行速度上是兩層循環(huán)的速度。因?yàn)?b>indexOf這個(gè)方法也是逐個(gè)比較的。所以我就再說(shuō)第二種方法。


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;
}


運(yùn)行一下



效果一下樣！


實(shí)現(xiàn)原理和過(guò)程:遍歷原數(shù)組。每次從原數(shù)組中取出一個(gè)元素，然后到對(duì)象中去訪問(wèn)這個(gè)屬性，如果能訪問(wèn)到值，則說(shuō)明重復(fù),如果訪問(wèn)不到，就是arr還沒(méi)有沒(méi)有這元素，就添加進(jìn)去，同時(shí)把這個(gè)元素作為json的一個(gè)屬性，并賦值為1。這個(gè)方法，我個(gè)人覺(jué)得比較效率比第一種方法好，也不安按理解，推薦這個(gè)寫(xiě)法。

后續(xù)

關(guān)于js是實(shí)用或者常用的小功能操作，今天先到這里，以后再寫(xiě)其它的，希望能幫到大家！

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/83517.html

相關(guān)文章

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

    摘要：我自己封裝這個(gè)，并不是我有造輪子的習(xí)慣，而是，都是一些常用，但是零散的小實(shí)例，網(wǎng)上基本沒(méi)有插件。，因?yàn)榱闵⒌男?shí)例，涉及到的有字符串，數(shù)組，對(duì)象等類(lèi)型，就算找到插件，在項(xiàng)目引入的很有可能不止一個(gè)插件。都是簡(jiǎn)單的代碼，封裝也不難。 1.前言 因?yàn)楣咀罱?xiàng)目比較忙，沒(méi)那么多空余的事件寫(xiě)文章了，所以這篇文章晚了幾天發(fā)布。但是這也沒(méi)什么關(guān)系，不過(guò)該來(lái)的，總是會(huì)來(lái)的。好了，其他的不多說(shuō)的，大家...

    plus2047 評(píng)論0 收藏0

  • JS單行、多行文本字符去重和行去重

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

    enrecul101 評(píng)論0 收藏0

  • 也談面試必備問(wèn)題之 JavaScript 數(shù)組去重

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

    Coly 評(píng)論0 收藏0

  • js常見(jiàn)算法(一)：排序，數(shù)組去重，打亂數(shù)組，統(tǒng)計(jì)數(shù)組各個(gè)元素出現(xiàn)的次數(shù)， 字符串各個(gè)字符的出現(xiàn)次數(shù)

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

    DTeam 評(píng)論0 收藏0

  • 數(shù)組去重--這幾種方法夠不?

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

    wendux 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<