国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

JS基礎知識學習(三)

keke / 3318人閱讀

摘要:基礎知識字符串中常用的方法在中用單雙引號包裹起來的都是字符串字符串就是由到多個字符組成的特點一以數(shù)字作為索引,從零開始特點二有屬性,存儲的是當前字符串中字符的個數(shù)字符長度如果指定的索引不存在獲取的結果是真實項目中,我們經(jīng)常操作字符串,此時

js基礎知識 JavaScript 字符串中常用的方法
在JS中用單(雙)引號包裹起來的都是字符串
var str="welcome to my home,my name is candy!"
//=>字符串就是由0到多個字符組成的
//特點一:以數(shù)字作為索引,從零開始
//特點二:有l(wèi)ength屬性,存儲的是當前字符串中字符的個數(shù)(字符長度)
//str[100]->undefined 如果指定的索引不存在獲取的結果是undefined
真實項目中,我們經(jīng)常操作字符串,此時我們需要掌握常用的一些字符串操作方法

console.dir(String.prototype)

charAt &&charCodeAt

str.charAt(索引):返回指定索引位置的字符,和str[索引]的區(qū)別在于,當指定的索引不存在的時候,中括號的方式獲取的是undefined,而charAt獲取的是空字符串

str.charCodeAt(索引) :在charAt基礎上,把獲取的字符變?yōu)閡nicode編碼值(對應ASCII碼表)索引不存在的時候charCodeAt獲取的是NaN

48-57:0-9

65-90:A-Z

97-122:a-z

String.formCharCode(十進制的unicode值):把值按照ASCII碼表中的信息,轉(zhuǎn)換為原有的字符,和charCodeAt正好對應

substr && substring && slice

實現(xiàn)字符串截取的三個辦法

str.substr(n,m):從索引n開始,截取m個字符

str.sunstring(n,m):從索引n開始,截取到索引為m處(不包含m),把找到的部分截取

str.slice(n,m):和substring語法一樣,區(qū)別在于slice支持以負數(shù)做索引

當索引是負數(shù)的時候,瀏覽器在處理的時候,使用字符串的總長度加上負數(shù)索引,然后按照正數(shù)處理操作。

細節(jié)知識點:

1、如果只傳遞n(str.substr(n)/str.substring(n)/str.slice(n)/),相當于從索引n開始一直截取到字符串的末尾

2、如果傳遞的索引值超出最大限制,也是把能截取的部分截取掉即可

3、如果一個參數(shù)都不傳遞:相當于把整個字符串都截?。ㄗ址目寺。?/p>

toUpperCase && toLowerCase

str.toUpperCase :把字母全部大寫

str.toLowerCase :把字母全部小寫

indexOf && lastIndexOf

str.indexOf:獲取當前字符在字符串中第一次出現(xiàn)位置的索引

str.lastIndexof :獲取當前字符在字符串中最后一次出現(xiàn)位置的索引

如果當前字符在字符串中沒有出現(xiàn)過,結果是-1;我們根據(jù)這個規(guī)律可以驗證一下當前字符串中是否包含某個字符
if(str.indexOf("?")===-1){
    //沒有出現(xiàn)過
}
if(str.indexOf("?")>=0){
    //出現(xiàn)過
}

split

str.split:按照某一個字符把字符串拆分成數(shù)組中的某一項,和數(shù)組中的join方法是對應的

replace

str.replace :實現(xiàn)字符的替換

執(zhí)行一次replace只能替換一次,如果有好幾個都需要替換,在不使用正則的情況下我們需要執(zhí)行很多次replace;

有些需求即使執(zhí)行很多次replace也實現(xiàn)不了,此時需要使用正則處理,真實項目中replace一般都是和正則搭配使用的

trim && trimLeft && trimRight

str.trimLeft :去除字符串開始的空格

str.trimRight :去除字符串結尾的空格

str.trim :去除字符串首尾的空格

案例一:queryURLParameter
獲取地址欄中URL地址問號傳遞的參數(shù)值

"https://www.baidu.com/s?wd=javascript&rsv_spt=1&issp=1"

"https://www.baidu.com/s?wd=node&rsv_spt=1&issp=1"

目標:把問號傳遞的參數(shù)值分別的解析出來

obj={wd:"javascript",rsv_spt:1,issp:1}

var str="https://www.baidu.com/s?wd=javascript&rsv_spt=1&issp=1";
//=>obj={wd:"javascript",rsv_spt:1,issp:1}

//=>方案一:
var questionIndex=str.indexOf("?");
str=str.substring(questionIndex+1);
console.log(str);//=>"wd=javascript&rsv_spt=1&issp=1"
var ary=str.split("&");
console.log(ary)//=>["wd=javascript","rsv_spt=1","issp=1"]
var obj={}
for(var i=0;i
function queryURLParameter(url){
    //=>url:傳遞的參數(shù)(我們當前要解析的url地址)
    var quesIndex=url.indexOf("?"),
        obj={}
    if(quesIndex===-1){//->url中沒有問號傳參
        return obj;
    }
    url=url.substr(quesIndex+1);
    var ary=url.split("&");
    for(var i=0;i
String.prototype.myQueryURLParameter=function
 myQueryURLParameter(){
        var obj={},
              reg=/([^=?&]+)=([^=?&]+)/g;
        this.replace(reg,function(){
            var arg=arguments;
            obj[arg[1]]=arg[2];
        })
        return obj;
    }
var str="https://www.baidu.com/s?wd=javascript&rsv_spt=1&issp=1";
console.log(str.myQueryURLParameter());
案例二(模擬驗證碼功能實現(xiàn))
真實項目中的驗證碼:

真實項目中的驗證碼一般都是后臺處理的,后臺返回給客戶端展示的是一個圖片(圖片中包含了驗證碼)

此案例使用前端js代碼模擬驗證碼實現(xiàn):




    
    Document
    


    
//1-code.js 此處完成頁面刷新 驗證碼更換

var codeBox=document.getElementById("codeBox");
//=>生成四位隨機驗證碼:取值范圍
var areaStr="0123456789qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM";
//=>areaStr.length:62(0-61)
var result="";
for(var i=0;i<4;i++){
    // =>隨機獲取0~61之間的整數(shù),作為接下來獲取字符的索引
    var ran=Math.round(Math.random()*61);
    //=>根據(jù)索引獲取一個隨機字符
    var char=areaStr.charAt(ran);
    //=>把每次循環(huán)獲取的字符放在最后的結果(result)中
    result+=char;
}
codeBox.innerHTML=result;
/***
2-code.js 
此處代碼迭代1-code.js 將上述代碼封裝成函數(shù)queryCode;
并給驗證碼顯示區(qū)添加點擊刷新的效果
***/
var codeBox=document.getElementById("codeBox");
//=>queryCode:獲取四位驗證碼
function queryCode(){
    var result="",
        areaStr="0123456789qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM";
    for(var i=0;i<4;i++){
        var ran=Math.round(Math.random()*61);
        result+=areaStr[ran];
    }
    codeBox.innerHTML=result;
}
//=>加載頁面時需要執(zhí)行一次這個方法:生成四位驗證碼
queryCode();
//=>點擊盒子重新生成驗證碼(此處不加小括號:這塊只是在把函數(shù)綁定給元素的點擊事件,方法還沒有執(zhí)行,點擊的時候才執(zhí)行)
codeBox.onclick=queryCode;
/***
3-code.js
此處代碼迭代2-code.js
完善隨機四位驗證碼重復情況(去重)
****/
var codeBox=document.getElementById("codeBox");
//=>queryCode:獲取四位驗證碼
function queryCode(){
    var result="",
        areaStr="0123456789qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM";
    for(var i=0;i<4;i++){
        var ran=Math.round(Math.random()*61),
            char=areaStr[ran];
            //=驗證一下新獲取的char字符是否已經(jīng)在result中存在了,如果存在了我們不存儲,重新獲取一遍,反之才累加到result中
            if(result.indexOf(char)>-1){
                i--;
                continue;
            }
        result+=char;
    }
    codeBox.innerHTML=result;
}

queryCode();
codeBox.onclick=queryCode;
/***
4-code.js
此處代碼迭代3-code.js
完善大小寫字母重復情況
***/
var codeBox=document.getElementById("codeBox");
//=>queryCode:獲取四位驗證碼
function queryCode(){
    var result="",
        areaStr="0123456789qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM";
    for(var i=0;i<4;i++){
        var ran=Math.round(Math.random()*61),
            char=areaStr[ran];
            //=>a和A也算重復,該如何處理?
            //result="Ab" "ab"
            //char="a"    "a"
            //result.toLowerCase().indexof(char.toLowerCase())===-1
            if(result.toLowerCase().indexOf(char.toLowerCase())>-1){
                i--;
                continue;
            }
        result+=char;
    }
    codeBox.innerHTML=result;
}
queryCode();
codeBox.onclick=queryCode;
/*
5-code.js
此方法為擴展方法,去重辦法是將每此隨機獲取的字符去掉
并根據(jù)隨機字符對應的unicode碼判斷是否為字母:
如果為大寫字母則將小寫字母一并去掉
如果為小寫字母則將大寫字母一并去掉
*/
var codeBox=document.getElementById("codeBox");
function queryCode(){
    var areaStr="0123456789qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM",
        result="";
    for(var i=0;i<4;i++){
        var ran=Math.round(Math.random()*(areaStr.length-1));
        var char=areaStr.charAt(ran);
        var charCode=areaStr.charCodeAt(ran);
        if(charCode>=65&&charCode<=90){
            areaStr=areaStr.replace(char.toLowerCase(),"");
        }else if(charCode>=97 &&charCode<=122){
            areaStr=areaStr.replace(char.toUpperCase(),"");
        }
        areaStr=areaStr.replace(char,"");
        result+=char;
    }
    codeBox.innerHTML=result;
}
queryCode();
codeBox.onclick=queryCode;

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

轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/95707.html

相關文章

  • ES6零基礎教學_解析彩票項目-學習筆記(一)

    摘要:彩票項目實戰(zhàn)學習記錄一完整走了一遍課程,覺得還不錯。支持正版人人有責零基礎教學解析彩票項目下面是項目課程的目錄路線一個項目分為三部分業(yè)務邏輯,自動構建系統(tǒng),模擬數(shù)據(jù)和真實數(shù)據(jù)接口處理。 彩票項目實戰(zhàn)學習記錄(一) 完整走了一遍課程,覺得還不錯。 總結: es6的知識點說得還算清楚,主要是為了了解和使用,不是深究,所以淺嘗即止即可,所以覺得還不錯。 完整還原了項目開發(fā)的代碼設計和開發(fā)過...

    blastz 評論0 收藏0
  • Javascript學習總結 - JS基礎系列

    摘要:案例每隔毫秒調(diào)用函數(shù)并顯示時間。當點擊按鈕時,停止時間代碼如下計時器每隔毫秒調(diào)用函數(shù),并將返回值賦值給計時器計時器,在載入后延遲指定時間后去執(zhí)行一次表達式僅執(zhí)行一次。該值標識要取消的延遲執(zhí)行代碼塊。 簡述 本系列將持續(xù)更新Javascript基礎部分的知識,誰都想掌握高端大氣的技術,但是我覺得沒有一個扎實的基礎,我認為一切高階技術對我來講都是過眼云煙,要成為一名及格的前端工程師,必須把...

    zlyBear 評論0 收藏0
  • 寫一本關于 React.js 的小書

    摘要:因為工作中一直在使用,也一直以來想總結一下自己關于的一些知識經(jīng)驗。于是把一些想法慢慢整理書寫下來,做成一本開源免費專業(yè)簡單的入門級別的小書,提供給社區(qū)。本書的后續(xù)可能會做成視頻版本,敬請期待。本作品采用署名禁止演繹國際許可協(xié)議進行許可 React.js 小書 本文作者:胡子大哈本文原文:React.js 小書 轉(zhuǎn)載請注明出處,保留原文鏈接以及作者信息 在線閱讀:http://huzi...

    Scorpion 評論0 收藏0
  • 前端資源系列(4)-前端學習資源分享&前端面試資源匯總

    摘要:特意對前端學習資源做一個匯總,方便自己學習查閱參考,和好友們共同進步。 特意對前端學習資源做一個匯總,方便自己學習查閱參考,和好友們共同進步。 本以為自己收藏的站點多,可以很快搞定,沒想到一入?yún)R總深似海。還有很多不足&遺漏的地方,歡迎補充。有錯誤的地方,還請斧正... 托管: welcome to git,歡迎交流,感謝star 有好友反應和斧正,會及時更新,平時業(yè)務工作時也會不定期更...

    princekin 評論0 收藏0
  • JS框架 - 收藏集 - 掘金

    摘要:現(xiàn)在回過頭總結,才又進一步的揭開了閉包的一層后臺管理系統(tǒng)解決方案前端掘金基于系列的后臺管理系統(tǒng)解決方案。什么是繼承大多數(shù)人使用繼承不外乎是為了獲得基于的單頁應用項目模板前端掘金小貼士本項目已升級至。 關于js、jq零碎知識點 - 掘金寫在前面: 本文都是我目前學到的一些比較零碎的知識點,也是相對偏一點的知識,這是第二篇。前后可能沒有太大的相關性,需要的朋友可以過來參考下,喜歡的可以點個...

    wenyiweb 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<