18-[JavaScript]-函數，Object對象，定時器，正則表達式

時間 2019-11-09

標籤 javascript 函數 object 對象定時器正則表達式欄目 JavaScript 简体版

原文原文鏈接

一、函數建立

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    </body>
    <script type="text/javascript">
        
        
        //函數的建立
        /*
         * py中的函數的聲明
         def add():
          pass
          
          調用
          add()
             
         * 
         * */
        //1.js中的函數的聲明  記得：有函數的聲明 就必定有調用
        function add(){
//            alert("函數被調用了")
            //執行的一些操做
        }
        
        //2.函數的執行
        add()
        
        
        /*
        //二,聲明函數的時候帶參數
        function add2(a,b){
            alert(a+b)
        }
        
        add2(3,4)
        */
        //三,聲明函數的時候帶參數，而且有返回值
        function add3(x,y){
            return x+y;
        }
        
        var sum = add3(4,5)
        alert(sum)
    </script>
</html>

二、對象Object

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    </body>
    <script type="text/javascript">
        
        
        //1.對象的建立
        
        //1.字面量方式建立 推薦使用這種方式  簡單直觀
        //key:value
        var stu = {
            name:'alex',
            age:22,
            fav:'雞湯'
        }
        console.log(stu)
        console.log(window)
        //點語法: 包括get方法和set方法
        var n = stu.name;
        console.log(n)
        
        stu.age = 34;
        console.log(stu.age)
        
        //2.使用Object()建立對象
//        function add(){
//            
//        }
//        add()

//        Object() 構造函數  1.首字母大寫  遇見構造函數 要想建立對象 new

        var obj = new Object();
        
        obj.name = 'xiaomage'
        console.log(obj)
        
        
        //------------構造函數建立對象------------------
        
        //1.函數名首字母要大寫
        //2.構造函數不須要return
        //3.爲對象添加成員變量： this.name  = 'alex'
        
        var Stu = function(){
                this.name = '武sir';
                this.age = 18;
                this.fav = function(){
                    console.log('泡妹子')
                }
        }
        
        //建立這個對象
        var s = new Stu();
        console.log(s)
        
        var s1 = new Stu();
        console.log(s1)
        
        //弊端：每次new一個對象 裏面的成員變量和方法都同樣
        
        
        //推薦你們使用的構造函數的方式
        
        function Animal(){
                this.name = 'jingjing';
                this.age = 12
//                this.fav = function(){
//                    console.log(this.age)
//                }
                
        }
        
        Animal.prototype.showname = function () {
            //執行相應的操做
                alert(this.name)
        }
        Animal.prototype.showname2 = function () {
                alert(this.name)
        }
        Animal.prototype.showname3 = function () {
                alert(this.name)
        }
        Animal.prototype.showname4 = function () {
                alert(this.name)
        }
        
        
        
        var a = new Animal()
        
        a.showname()
        
        
        
    </script>
</html>

三、對象補充：json轉換

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    </body>
    <script type="text/javascript">
        var json1 = {
            name : '張三',
            age : '李四',
            fav : '唱歌'
        };
        var str1 = '{"name": "Alex", "age": 18}';
        
        //將JSON轉化爲JSON字符串
        var jsonStr1 = JSON.stringify(json1)
        console.log(jsonStr1)
        
        //將json字符串轉化爲JSON
        var json2 = JSON.parse(str1);
        console.log(json2)
        
    </script>
</html>

四、定時器

//定時器 異步運行  
function hello(){  
alert("hello");  
}  
//使用方法名字執行方法  
var t1 = window.setTimeout(hello,1000);  
var t2 = window.setTimeout("hello()",3000);//使用字符串執行方法  
window.clearTimeout(t1);//去掉定時器

//實時刷新時間單位爲毫秒  
setInterval('refreshQuery()',8000);   
/* 刷新查詢 */  
function refreshQuery(){  
  console.log('每8秒調一次') 
}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    </body>
    <script type="text/javascript">
        var n = 0;
        var time = null;
        
        time = setInterval(function(){
            n++;
            console.log(n)
            
        },1000);
        
        
        //setTimeout(code,1000)
        
        setTimeout(function(){
            console.log(time);
            
            window.clearInterval(time)
        },5000)
    </script>
</html>

五、正則表達式

https://www.processon.com/view/link/5add4ef9e4b04691064d5e37javascript

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    </body>
    <script type="text/javascript">
        //RegExp對象
        
        //建立正則對象方式1
        //參數1  正則表達式（不能有空格）
        //參數2  匹配模式：經常使用g（全局匹配；找到全部匹配，而不是第一個匹配後中止）和i（忽略大小寫吧）
    
        var str = 'hello World';
        var reg1 = new RegExp('e','ig');
        console.log(reg1)
        
        //2.字面量方式建立
        var reg2 = /o/gi;//檢測字符e，不區分大小寫，全局匹配
        
        //正則對象提供的檢索方式
        //test() 檢測字符串中是否包含定義字符模式，返回布爾
        //要檢索的字符在字符串str中 返回true
        console.log(reg2.test(str));
        
        
        //2.2  exec()  具體執行匹配，返回數組
         console.log(reg2.lastIndex); // 2 保存一次匹配時開始的下標
         console.log(reg2.exec(str));  //["o", index: 7, input: "hello world"]
         console.log(reg2.lastIndex); //2
        
        
        
        //3.經常使用方法
        //match
        var reg3 = /d/g;
        
        console.log(str.match(reg3))
        
        //2.replace替換： str.replace(被替換的，替換的)
        console.log(str.replace(reg3,'*'));
        
        //3.search()
        console.log(str.search(reg3));//查詢字符串在字符中出現的位置 下標
        
        
        //4.split()
        console.log(str.split(reg3));
        
        
    </script>
</html>

六、元字符

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script>
        window.onload = function (){
            //元字符
            //1.單個字符和數字
            //1   . 匹配除換行符覺得的任意字符
            var str = "oweb";
            var reg = /./g;
            console.log(reg.exec(str));
            var str = "www/baidu/com";
            var reg = /www\......\.com/g;   //若是想不讓字符有其餘意義  轉義\
            console.log(reg.exec(str));

            //2.   []  匹配[]裏面的任意一個字符
            var str1 = "4awebadsads";
            var reg1 = /[a-zA-Z0-9]/g; // 匹配字母仍是數字
            console.log(reg1.exec(str1));

            var str2 = "1s34";
            var reg2 = /[0-9][0-9][0-9]/g;
            console.log(reg2.exec(str2));

            //3.  [^]   全部不在這個範圍內的字符
            var str3 = "abd";
            var reg3 = /[^a-z]/g;  //匹配除小寫字母之外的任意字符
            console.log(reg3.exec(str3));


            //4.  \
            var str4 = "web";
            var reg4 = /\d/g;   //匹配數字
            var reg5 = /\D/g;   //非數字
            console.log(reg4.exec(str4));  //null
            console.log(reg5.exec(str4));  //w

            var reg6 = /\w/g;  //匹配數字 字母  下劃線_
            var reg7 = /\W/g;  //匹配除數字 字母  下劃線之外的任意字符
            console.log(reg6.exec(str4));   //w
            console.log(reg7.exec(str4));   //null

            var reg8 = /\s/g; //空格
            var reg9 = /\S/g; //非空白字符
            console.log(reg8.exec(str4));   //null
            console.log(reg9.exec(str4));   //w

            //5 錨字符  ^以什麼開頭     $以什麼結尾
            var str = "www.";
            var reg10 = /^www/g;  // ^字符
            console.log(reg10.exec(str));

            var reg11 = /www\.$/g;   //字符$
            console.log(reg11.exec(str));

            


            //重複的字符
            //?  匹配前面的字符0個或一個 ，
            var strs = "webr44546ere";
            var reg12 = /[0-9]?/g;
            console.log(reg12.exec(strs));

            //*  匹配0個或任意多個字符    儘量多的匹配
            var reg13 = /[a-z]*/g; //匹配小寫字母，0個或多個
            console.log(reg13.exec(strs));


            //+ 至少匹配一次
            var reg14 = /\d+/g;
            console.log(reg14.exec(strs));

            //{4}
            var stra = "11274567800";
            var rega = /^1\d{10}$/g; //匹配連續的四個數字
            console.log(rega.exec(stra));

            //{1,4} 最少一個最多4個
            var strb = "edg";
            var regb = /^[a-zA-z]{2,3}$/g;
            console.log(regb.exec(strb));


            //||  豎線  或者
            var strc = "www.google"; //baidu  google   ujiuye
            var regc = /www.baidu|google|ujiuye/g;
            console.log(regc.exec(strc));


            //() 分組
            var strc = "www.google"; //baidu  google   ujiuye
            var regc = /www.(baidu)|(google)|(ujiuye)/g;
            console.log(regc.exec(strc));

            console.log(RegExp.$1);
            console.log(RegExp.$2);
            console.log(RegExp.$3);


            var str = "helloworld";
            var reg = /(hello)(world)/g;
          /*  console.log(reg.exec(str));
            console.log(RegExp.$1);*/
            console.log(str.replace(reg,"$2 $1"));


        }
    </script>
</head>
<body>

</body>
</html>

七、正則表達式練習

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>正則表達式相關練習</title>
</head>
<body>
    <script type="text/javascript">

        //正則表達式練習  http://www.w3school.com.cn/jsref/jsref_obj_regexp.asp

        window.onload = function () {
            //1.檢索字符串中是否不包含字母
            var str = '12';
            var reg1 = /[^a-zA-Z]/g;
            console.log(reg1.test(str));
            if(reg1.test(str)){
                console.log('不包含');
            }else{
                console.log('包含');
            }

            //2.去除字符串首尾空格
            var str2 = '   hello world!  ';
            //開頭的空格
            var reg =/^\s+/ig;  //  + 1到屢次！
            var str3 = str2.replace(reg,"");

            var reg2 = /\s+$/ig;
            var str4 = str3.replace(reg2,"");
            console.log("|"+str4+"|");

            //3.檢查用戶帳號
            function checkUser(str) {
                var re = /^[a-zA-Z]\w{3,15}$/ig;
                if(re.test(str)){
                    console.log('正確')
                }else{
                    console.log('錯誤')
                }
            }
            checkUser('alex_haha');

            //4.手機號碼 11位數字以1開頭
            function checkMobile(str) {
                var re = /^1\d{10}$/ig;
                if(re.test(str)){
                    console.log('正確')
                }else{
                    console.log('錯誤')
                }
            }
            checkMobile('13788881239');
            checkMobile('137893813323');

            //5.電話號碼 區號+號碼 區號以0開頭 3位或4位
            // 號碼由7位或8位數字組成
            // 區號與號碼之間能夠無鏈接符，也能夠"-"鏈接
            function checkPhone(str) {
                var re = /^0\d{2,3}-?\d{7,8}$/ig;
                if(re.test(str)){
                    console.log('正確')
                }else{
                    console.log('錯誤')
                }
            }
            checkPhone("095-12345678");

            //6.郵箱
            //規則：第一部分@第二部分
            //第一部分：由字母 數字 下劃線 短線 - 點號 . 組成
            //第二部分：爲一個域名 域名由 字母 數字 短線 短線 - 域名後綴組成
            // 域名後綴通常爲 .xxx 或者 .xxx.xx 一區的域名後綴通常爲 2-4 位，如cn,
            function checkEmail(str) {
                var re = /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/ig;
                if(re.test(str)){
                    console.log('正確')
                }else{
                    console.log('錯誤')
                }
            }
            checkEmail('alex@cnbolgs.cn');

        }

    </script>
</body>
</html>