JS基礎知識學習（三）

時間 2019-12-05

原文原文鏈接

js基礎知識

JavaScript

字符串中經常使用的方法

在JS中用單（雙）引號包裹起來的都是字符串

var str="welcome to my home,my name is candy!"
//=>字符串就是由0到多個字符組成的
//特色一：以數字做爲索引，從零開始
//特色二：有length屬性，存儲的是當前字符串中字符的個數（字符長度）
//str[100]->undefined 若是指定的索引不存在獲取的結果是undefined

真實項目中，咱們常常操做字符串，此時咱們須要掌握經常使用的一些字符串操做方法
console.dir(String.prototype)javascript

charAt &&charCodeAthtml

str.charAt(索引)：返回指定索引位置的字符，和str[索引]的區別在於，當指定的索引不存在的時候，中括號的方式獲取的是undefined，而charAt獲取的是空字符串
str.charCodeAt(索引) :在charAt基礎上，把獲取的字符變爲unicode編碼值（對應ASCII碼錶）索引不存在的時候charCodeAt獲取的是NaN前端

48-57：0-9java

65-90：A-Znode

97-122：a-zweb

String.formCharCode(十進制的unicode值)：把值按照ASCII碼錶中的信息，轉換爲原有的字符，和charCodeAt正好對應數組

substr && substring && slice瀏覽器

實現字符串截取的三個辦法
str.substr(n,m)：從索引n開始，截取m個字符dom

str.sunstring(n,m)：從索引n開始，截取到索引爲m處（不包含m）,把找到的部分截取函數

str.slice(n,m)：和substring語法同樣，區別在於slice支持以負數作索引

當索引是負數的時候，瀏覽器在處理的時候，使用字符串的總長度加上負數索引，而後按照正數處理操做。
細節知識點：

一、若是隻傳遞n(str.substr(n)/str.substring(n)/str.slice(n)/),至關於從索引n開始一直截取到字符串的末尾

二、若是傳遞的索引值超出最大限制，也是把能截取的部分截取掉便可

三、若是一個參數都不傳遞：至關於把整個字符串都截取（字符串的克隆）

toUpperCase && toLowerCase

str.toUpperCase :把字母所有大寫
str.toLowerCase :把字母所有小寫

indexOf && lastIndexOf

str.indexOf：獲取當前字符在字符串中第一次出現位置的索引
str.lastIndexof ：獲取當前字符在字符串中最後一次出現位置的索引

若是當前字符在字符串中沒有出現過，結果是-1；咱們根據這個規律能夠驗證一下當前字符串中是否包含某個字符

if(str.indexOf("?")===-1){
    //沒有出現過
}
if(str.indexOf("?")>=0){
    //出現過
}

split

str.split：按照某一個字符把字符串拆分紅數組中的某一項，和數組中的join方法是對應的

replace

str.replace ：實現字符的替換
執行一次replace只能替換一次，若是有好幾個都須要替換，在不使用正則的狀況下咱們須要執行不少次replace；

有些需求即便執行不少次replace也實現不了，此時須要使用正則處理，真實項目中replace通常都是和正則搭配使用的

trim && trimLeft && trimRight

str.trimLeft ：去除字符串開始的空格
str.trimRight ：去除字符串結尾的空格

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

案例一：queryURLParameter

獲取地址欄中URL地址問號傳遞的參數值
"https://www.baidu.com/s?wd=javascript&rsv_spt=1&issp=1"

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

目標：把問號傳遞的參數值分別的解析出來

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<ary.length;i++){
    var cur=ary[i];
    var curAry=cur.split("=");
    key=curAry[0];
    value=curAry[1];
    obj[key]=value;
}
console.log(obj);

function queryURLParameter(url){
    //=>url:傳遞的參數（咱們當前要解析的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<ary.length;i++){
        var curAry=ary[i].split("=");
        obj[curAry[0]]=curAry[1];
    }
    return obj;
}
console.log(queryURLParameter("https://www.baidu.com/s?wd=javascript&rsv_spt=1&issp=1"))

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());

案例二（模擬驗證碼功能實現）

真實項目中的驗證碼：
真實項目中的驗證碼通常都是後臺處理的，後臺返回給客戶端展現的是一個圖片（圖片中包含了驗證碼）

此案例使用前端js代碼模擬驗證碼實現：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
            
        }
        #codeBox{
            margin:20px auto;
            width:200px;
            height:50px;
            border:1px solid green;
            line-height: 50px;
            text-align:center;
            letter-spacing:5px;
            cursor:pointer;
            font-size:20px;
            
            -webkit-user-select:none;
            /*禁止用戶選擇複製*/
        }
    </style>
</head>
<body>
    <div id="codeBox"></div>
    <script src="js/4-code.js"></script>
</body>
</html>

//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之間的整數，做爲接下來獲取字符的索引
    var ran=Math.round(Math.random()*61);
    //=>根據索引獲取一個隨機字符
    var char=areaStr.charAt(ran);
    //=>把每次循環獲取的字符放在最後的結果（result）中
    result+=char;
}
codeBox.innerHTML=result;

/***
2-code.js 
此處代碼迭代1-code.js 將上述代碼封裝成函數queryCode;
並給驗證碼顯示區添加點擊刷新的效果
***/
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;
}
//=>加載頁面時須要執行一次這個方法：生成四位驗證碼
queryCode();
//=>點擊盒子從新生成驗證碼(此處不加小括號：這塊只是在把函數綁定給元素的點擊事件，方法尚未執行,點擊的時候才執行)
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字符是否已經在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
此方法爲擴展方法，去重辦法是將每此隨機獲取的字符去掉
並根據隨機字符對應的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;

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。