JS基础知识学习（三）

头像
CANDY
    阅读 7 分钟
    1

    js基础知识

    JavaScript

    字符串中常用的方法

    在JS中用单（双）引号包裹起来的都是字符串
    var str="welcome to my home,my name is candy!"
//=>字符串就是由0到多个字符组成的
//特点一：以数字作为索引，从零开始
//特点二：有length属性，存储的是当前字符串中字符的个数（字符长度）
//str[100]->undefined 如果指定的索引不存在获取的结果是undefined
    真实项目中，我们经常操作字符串，此时我们需要掌握常用的一些字符串操作方法

    console.dir(String.prototype)

    charAt &&charCodeAt

    str.charAt(索引)：返回指定索引位置的字符，和str[索引]的区别在于，当指定的索引不存在的时候，中括号的方式获取的是undefined，而charAt获取的是空字符串

    str.charCodeAt(索引) :在charAt基础上，把获取的字符变为unicode编码值（对应ASCII码表）索引不存在的时候charCodeAt获取的是NaN

    48-57：0-9

    65-90：A-Z

    97-122：a-z

    String.formCharCode(十进制的unicode值)：把值按照ASCII码表中的信息，转换为原有的字符，和charCodeAt正好对应

    图片描述

    substr && substring && slice

    实现字符串截取的三个办法

    str.substr(n,m)：从索引n开始，截取m个字符

    str.sunstring(n,m)：从索引n开始，截取到索引为m处（不包含m）,把找到的部分截取

    str.slice(n,m)：和substring语法一样，区别在于slice支持以负数做索引

    图片描述

    当索引是负数的时候，浏览器在处理的时候，使用字符串的总长度加上负数索引，然后按照正数处理操作。

    细节知识点：

    1、如果只传递n(str.substr(n)/str.substring(n)/str.slice(n)/),相当于从索引n开始一直截取到字符串的末尾

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

    3、如果一个参数都不传递：相当于把整个字符串都截取（字符串的克隆）

    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;
    javascript
    CANDY
    6 声望1 粉丝
    « 上一篇
    js基础知识学习（二）
    下一篇 »
    JS基础知识学习（四）

    引用和评论

    推荐阅读
    头像
    自定义组件实现v-model双向数据绑定

    CANDY阅读 4.4k

    头像
    Vue.js-Vue实例

    寒青赞 11阅读 6.9k

    头像
    2025年最新反编译微信小程序的教程及工具

    TANKING赞 8阅读 5.6k

    头像
    你可能不知道的图片加载相关知识

    夕水赞 6阅读 4.4k

    头像
    手写一个动态海洋和天空效果的vue hooks

    夕水赞 6阅读 1.1k

    头像
    原生JS大揭秘—JS代码执行原理解刨

    Damon赞 5阅读 5.4k评论 2

    头像
    原生electron起步-从零到一完成构建和打包

    兔子先森赞 2阅读 3.1k评论 1

    0 条评论
    得票最新