zoukankan      html  css  js  c++  java
  • JavaScript基础视频教程总结(081-090章)

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title>081-090章总结</title>
    </head>
    <body>
        
    <pre>
    081. Date对象
    在JS中使用Date对象来表示一个时间
    </pre>
    <script type="text/javascript">
        console.log("--第081--");
        //如果直接使用构造函数创建一个Date对象,则会封装为当前代码执行的时间
        var d01 = new Date();
        console.log(d01)
        //创建一个指定的时间对象
        //需要在构造函数中传递一个表示时间的字符串作为参数
        //日期的格式  月份/日/年 时:分:秒
        var d02 = new Date("2/18/2011 11:10:30")
        console.log(d02)
        // getDate() - 获取当前日期对象是几日
        var curDate = d02.getDate()
        console.log(curDate)
        // getDay() - 获取当前日期对象时周几 - 会返回一个0-6的值  0 表示周日 1表示周一
        var curDay = d01.getDay()
        console.log("今天是周"+curDay)
        //getMonth() 获取当前时间对象的月份 -会返回一个0-11的值 0 表示1月 11 表示12月
        var curMonth = d01.getMonth()
        console.log("本月是"+(curMonth+1)+"")
        // getFullYear() - 获取当前日期对象的年份
        var curYear = d01.getFullYear()
        console.log("今年是"+curYear+"")
        /*
         * getTime()
         *  - 获取当前日期对象的时间戳
         *  - 时间戳,指的是从格林威治标准时间的1970年1月1日,0时0分0秒
         *      到当前日期所花费的毫秒数(1秒 = 1000毫秒)
         *  - 计算机底层在保存时间时使用都是时间戳
         */
        var getTime = d01.getTime()
        console.log(getTime)
        console.log( getTime/1000/60/60/24/365 )
        //利用时间戳来测试代码的执行的性能
        //获取当前的时间戳
        var start = Date.now()
        for(var i=0 ; i<30 ; i++){
            console.log(i)
        }
        var end = Date.now()
        console.log("代码执行了"+(end-start)+"毫秒");
    </script>
    
    <pre>
    082. Math
    - Math和其他的对象不同,它不是一个构造函数,
    它属于一个工具类不用创建对象,它里边封装了数学运算相关的属性和方法
    Math 对象属性
    1. Math.PI 表示的圆周率
    Math 对象方法
    1. Math.abs(x) 返回数的绝对值
    2. Math.ceil(x) 对数进行上舍入
    3. Math.floor(x) 对数进行下舍入
    4. Math.round(x) 可以对一个数进行四舍五入取整
    5. Math.max(x,y) 返回 x 和 y 中的最高值
    6. Math.min(x,y) 返回 x 和 y 中的最低值
    7. Math.pow(x,y) 返回 x 的 y 次幂
    8. Math.sqrt(x) 返回数的平方根
    9. Math.random() 返回 0 ~ 1 之间的随机数(小数)
    </pre>
    <div id="randomColor">随机颜色</div>
    <script type="text/javascript">
        console.log("--第082--");
        var pi = Math.PI
        console.log(pi)
        var zNum1 = 5.1
        var zNum2 = 5.9
        var fNum1 = -5.1
        var fNum2 = -5.9
        var abs1 = Math.abs(zNum1)
        var abs2 = Math.abs(fNum1)
        console.log(abs1)
        console.log(abs2)
        
        console.log("-------")
        var ceil1 = Math.ceil(zNum1)
        var ceil2 = Math.ceil(zNum2)
        var ceil3 = Math.ceil(fNum1)
        var ceil4 = Math.ceil(fNum2)
        console.log(ceil1) // 6
        console.log(ceil2) // 6
        console.log(ceil3) // -5
        console.log(ceil4) // -5
        
        var floor1 = Math.floor(zNum1)
        var floor2 = Math.floor(zNum2)
        var floor3 = Math.floor(fNum1)
        var floor4 = Math.floor(fNum2)
        console.log(floor1) // 5
        console.log(floor2) // 5
        console.log(floor3) // -6
        console.log(floor4) // -6
        
        var round1 = Math.round(zNum1)
        var round2 = Math.round(zNum2)
        var round3 = Math.round(fNum1)
        var round4 = Math.round(fNum2)
        console.log(round1) // 5
        console.log(round2) // 6
        console.log(round3) // -5
        console.log(round4) // -6
        
        var max1 = Math.max(1,2,3,10,18)
        var max2 = Math.max(-1,-2.1,-2.9,-3,-10,-18)
        console.log(max1) // 18
        console.log(max2) // -1
        
        var min1 = Math.min(1,2,3,10,18)
        var min2 = Math.min(-1,-2.1,-2.9,-3,-10,-18)
        console.log(min1) // 1
        console.log(min2) // -18
        
        var pow = Math.pow(2,4)
        console.log(pow) // 16
        
        var sqrt = Math.sqrt(2)
        console.log(sqrt) // 1.414
        
        var random1 = Math.random()
        console.log(random1)
        // 产生随机整数,包含下限值,但不包括上限值
        function randomNoUpp(lower,upper){
            return Math.floor( Math.random()*(upper-lower) + lower )
        }
        // 产生随机整数,包含下限值,包括上限值
        function random(lower,upper){
            return Math.floor( Math.random()*(upper-lower+1) + lower )
        }
        var random2 = randomNoUpp(1,10)
        var random3 = random(1,10)
        console.log(random2)
        console.log(random3)
        // 扩展随机颜色值
        function randomColor(){
            var r =random(0,255),g =random(0,255),b =random(0,255)
            var result = "rgb("+r+","+g+","+b+"0"
            return result
        }
        var random_Color = document.getElementById("randomColor")
        random_Color.style.color = randomColor()
    </script>
    
    <pre>
    083. 包装类
    基本类型:Undefined, Null, Boolean, Number, String
    引用类型:Object, Array, Date, RegExp (其实就是对象)
    JS中只有对象才有属性和方法,原始值没有属性和方法
    那么我们平常求字符串的长度 用length属性不是没有问题吗?
    在JS中为我们提供了三个包装类,通过这三个包装类可以将基本数据类型的数据转换为对象
    String() - 可以将基本数据类型字符串转换为String对象
    Number() - 可以将基本数据类型的数字转换为Number对象
    Boolean() - 可以将基本数据类型的布尔值转换为Boolean对象
    但是注意:我们在实际应用中不会使用基本数据类型的对象,如果使用基本数据类型的对象,在做一些比较时可能会带来一些不可预期的结果
    引用类型与基本包装类型的区别:
    它们的对象生命周期不同:
    引用类型:使用new创建引用类型的实例,在执行数据流离开当前作用域时会一直存储在内存中。
     基本包装类型:自动创建基本包装类型的对象,只执行一行代码的瞬间之后就会立即销毁。
    </pre>
    <script type="text/javascript">
        console.log("--第083--");
        
        var num = new Number(3);
        var num2 = new Number(3);
        var str = new String("hello");
        var str2 = new String("hello");
        var bool = new Boolean(true);
        var bool2 = true;
        console.log(typeof num) //object
        console.log(num == num2) //false 比较的是对象的地址
        var b = new Boolean(false);
        if(b){
            console.log("我运行了~~~"); // b为对象转换为Boolean,都为true
        }
        /*
         * 方法和属性之能添加给对象,不能添加给基本数据类型
         *  当我们对一些基本数据类型的值去调用属性和方法时,
         *      浏览器会临时使用包装类将其转换为对象,然后在调用对象的属性和方法
         *      调用完以后,在将其转换为基本数据类型
         */
        var s = 123
        s = s.toString()
        console.log(s) // "123"
        console.log(typeof s) // string
        var s2 =456
        s2.hello="hello"
        console.log(s2) // 456
        console.log(s2.hello) //undefined
        
        var str="hello word";
        // 1.创建出一个和基本类型值相同的对象 
        //var str = new String("hello world");
        // 2.这个对象就可以调用包装对象下的方法,并且返回结给long变量 
        //var long = str.length; 
        // 3.之后这个临时创建的对象就被销毁了
        //str = null;
        //因为str没有length属性 所以执行这步之前后台会自动执行以上三步操作 
        var long = str.length; 
        console.log(long); // 10
        console.log(str.hello) //undefined
    </script>
    
    <pre>
    084. 字符串的方法
    在底层字符串是以字符数组的形式保存的,["a","b""c"]
    length属性-可以用来获取字符串的长度
    charAt()-可以返回字符串中指定位置的字符,根据索引获取指定的字符,从0开始
    charCodeAt()-获取指定位置字符的字符编码(Unicode编码)
    String.formCharCode()-可以根据字符编码去获取字符
    concat()-可以用来连接两个或多个字符串
    indexof()
    - 该方法可以检索一个字符串中是否含有指定内容
    - 如果字符串中含有该内容,则会返回其第一次出现的索引
    - 如果没有找到指定的内容,则返回-1
    - 可以指定一个第二个参数,指定开始查找的位置
    lastIndexOf()
    - 该方法的用法和indexOf()一样,
    - 不同的是indexOf是从前往后找,
    - 而lastIndexOf是从后往前找
    - 也可以指定开始查找的位置
    slice(x,y)
    - 可以从字符串中截取指定的内容
    - 不会影响原字符串,而是将截取到内容返回
    - 参数:
    第一个,开始位置的索引(包括开始位置)
    第二个,结束位置的索引(不包括结束位置)
    - 如果省略第二个参数,则会截取到后边所有的
    - 也可以传递一个负数作为参数,负数的话将会从后边计算
    substring(x,y)- 可以用来截取一个字符串,可以slice()类似
    - 参数:
    - 第一个:开始截取位置的索引(包括开始位置)
    - 第二个:结束位置的索引(不包括结束位置)
    - 不同的是这个方法不能接受负值作为参数,
    如果传递了一个负值,则默认使用0
    - 而且他还自动调整参数的位置,如果第二个参数小于第一个,则自动交换
    substr(x,y)-用来截取字符串
    - 参数:
    1.截取开始位置的索引
    2.截取的长度
    split()-可以将一个字符串拆分为一个数组
    - 参数:
    - 需要一个字符串作为参数,将会根据该字符串去拆分数组
    如果传递一个空串作为参数,则会将每个字符都拆分为数组中的一个元素
    toUpperCase()-将一个字符串转换为大写并返回
    toLowerCase()-将一个字符串转换为小写并返回
    </pre>
    <script type="text/javascript">
        console.log("--第084--");
        var baseStr = "aBcdefG"
        var baseStr2 = "aabbcdcc"
        var strLength = baseStr.length
        console.log("strLength=" + strLength) //7
        var charAt = baseStr.charAt(3) 
        console.log("charAt=" + charAt) // d
        var charCodeAt = baseStr.charCodeAt(0) 
        console.log("charCodeAt=" + charCodeAt) //97
        var formCharCode = String.fromCharCode(97)
        console.log("formCharCode=" + formCharCode) //a
        var concat = baseStr.concat("hijklmn","opqist")
        console.log("concat=" + concat) //aBcdefGhijklmnopqist
        var indexOf1 = baseStr2.indexOf("c")
        var indexOf2 = baseStr2.indexOf("e")
        console.log("indexOf1=" + indexOf1) // 4
        console.log("indexOf2=" + indexOf2) // -1
        var lastIndexOf1 = baseStr2.lastIndexOf("c",5)
        var lastIndexOf2 = baseStr2.lastIndexOf("e")
        console.log("lastIndexOf1=" + lastIndexOf1) // 4
        console.log("lastIndexOf2=" + lastIndexOf2) // -1
        var slice = baseStr.slice(1,3)
        var slice2 = baseStr.slice(1,-1)
        console.log("slice=" + slice) // Bc
        console.log("slice2=" + slice2) // Bcdef
        var substring = baseStr.substring(1,3)
        var substring2 = baseStr.substring(3,-3)
        console.log("substring=" + substring) // Bc
        console.log("substring2=" + substring2) // aBc
        var substr = baseStr.substr(1,3)
        var substr2 = baseStr.substr(3,0)
        console.log("substr=" + substr) // Bcd
        console.log("substr2=" + substr2) //
        console.log(typeof substr2) // string
        var split =baseStr.split("d")
        console.log("split=" + split) // aBc,efG
        console.log(typeof split) // object
        console.log(Array.isArray(split)) //true
        var toUpperCase =baseStr.toUpperCase()
        console.log("toUpperCase=" + toUpperCase) // ABCEFG
        var toLowerCase =baseStr.toLowerCase()
        console.log("toLowerCase=" + toLowerCase) // abcefg
    </script>
    
    <pre>
    085. 正则表达式的简介
    正则表达式(英语:Regular Expression,在代码中常简写为regex、regexp或RE)
    使用单个字符串来描述、匹配一系列符合某个句法规则的字符串搜索模式。
    搜索模式可用于文本搜索和文本替换。
    正则表达式是由一个字符序列形成的搜索模式。
    当你在文本中搜索数据时,你可以用搜索模式来描述你要查询的内容。
    正则表达式可以是一个简单的字符,或一个更复杂的模式。
    正则表达式可用于所有文本搜索和文本替换的操作。
    </pre>
    <script type="text/javascript">
        console.log("--第085--");
        //创建正则表达式的对象
        /*
         * 语法:
         *  var 变量 = new RegExp("正则表达式","匹配模式");
         *  使用typeof检查正则对象,会返回object
         *  var reg = new RegExp("a"); 这个正则表达式可以来检查一个字符串中是否含有a
         *  在构造函数中可以传递一个匹配模式作为第二个参数,
         *  可以是
         * i 忽略大小写
         * g 执行一个全局的匹配,简而言之,就是找到所有的匹配,而不是在找到第一个之后就停止了 
         * m 多行查找
         */
        var reg = new RegExp("a","g");
        var str = "A";
        /*
         * 正则表达式的方法:
         *  test()
         * - 使用这个方法可以用来检查一个字符串是否符合正则表达式的规则, 如果符合则返回true,否则返回false
         */
        var result = reg.test(str);
        console.log(result); //false
        console.log(reg.test("AcAAAA")); //false
        console.log(reg.test("AcAAAa")); //true
    </script>
    
    <pre>
    086. 正则语法
    使用字面量来创建正则表达式
    语法:var 变量 = /正则表达式/匹配模式
    注意://里面表达式前后不能有空格
    使用字面量的方式创建更加简单
    使用构造函数创建更加灵活
    </pre>
    <script type="text/javascript">
        console.log("--第086--");
        // var reg = new RegExp("a","g");
        var reg = /a/g
        console.log(typeof reg) // object
        console.log(reg.test("abc")) //true
        // 使用 | 表示或者的意思
        reg = /a|b|c/;
        console.log(reg.test("ab")) //true
        console.log(reg.test("A")) //false
        console.log(reg.test("de")) //false
        // 创建一个正则表达式检查一个字符串中是否有字母
        /*
         * []里的内容也是或的关系
         * [ab] == a|b
         * [a-z] 任意小写字母
         * [A-Z] 任意大写字母
         * [A-z] 任意字母
         * [0-9] 任意数字
         */
        var reg = /[A-z]/
        console.log(reg.test("de")) //true
        // 检查一个字符串中是否含有 abc 或 adc 或 aec 
        var reg = /a[bde]c/
        // [^...] 表达式用于查找任何不在方括号之间的字符,有一个不在即为true。
        reg = /[^ab]/;
        console.log(reg.test("de")) //true
        console.log(reg.test("ab")) //false
        reg = /[^0-9]/;
        console.log(reg.test("ab")) //true
        console.log(reg.test("123aaa")) //true //有一个不在即为true
        console.log(reg.test("123")) //false
        console.log(reg.test("abs")) //true
    </script>
    
    <pre>
    087. 字符串和正则相关的方法
    split()
    - 可以将一个字符串拆分为一个数组
    - 方法中可以传递一个正则表达式作为参数,这样方法将会根据正则表达式去拆分字符串
    - 这个方法即使不指定全局匹配,也会全都插分
    - 如果分割符在串的头和尾在在头和尾加上空值
    search()
    - 可以搜索字符串中是否含有指定内容
    - 如果搜索到指定内容,则会返回第一次出现的索引,如果没有搜索到返回-1
    - 它可以接受一个正则表达式作为参数,然后会根据正则表达式去检索字符串
    - serach()只会查找第一个,即使设置全局匹配也没用
    match()
    - 可以根据正则表达式,从一个字符串中将符合条件的内容提取出来
    - 默认情况下我们的match只会找到第一个符合要求的内容,找到以后就停止检索
    我们可以设置正则表达式为全局匹配模式,这样就会匹配到所有的内容
    可以为一个正则表达式设置多个匹配模式,且顺序无所谓
    - match()会将匹配到的内容封装到一个数组中返回,即使只查询到一个结果
    replace(x,y)
    - 可以将字符串中指定内容替换为新的内容
    - 参数:
    1.被替换的内容,可以接受一个正则表达式作为参数
    2.新的内容
    - 默认只会替换第一个
    </pre>
    <script type="text/javascript">
        console.log("第087");
        var regStr = "a1a2b3c4d5f"
        var splitResult = regStr.split(/[A-z]/)
        console.log(splitResult) // ["", "1", "2", "3", "4", "5", ""]
        var searchResult = regStr.search(/[A-z]/)
        console.log(searchResult) // 0
        var matchResult = regStr.match(/[A-z]/g)
        console.log(matchResult) // ["a", "a", "b", "c", "d", "f"]
        var replaceResult = regStr.replace(/[A-z]/g , '*')
        console.log(replaceResult) // *1*2*3*4*5*
        console.log(regStr) // a1a2b3c4d5f
    </script>
    
    <pre>
    088. 正则表达式语法
    量词
    - 通过量词可以设置一个内容出现的次数
    - 量词只对它前边的一个内容起作用 
    贪婪量词  n+ 从后往前一个个匹配,只匹配一次,设全局也没用
    惰性量词 n+? 从前往后一个个匹配,设全局有用
    ,支配量词(js不支持)n++  匹配整个字符串
    </pre>
    <script type="text/javascript">
        console.log("第088");
        // {n, m} 匹配前一项至少n次,但是不能超过m次 
        // {n, } 匹配前一项n次,或者多次 
        // {n} 匹配前一项恰好n次 
        // ? 匹配前一项0次或1次,也就是说前一项是可选的. 等价于 {0, 1} 
        // + 匹配前一项1次或多次,等价于{1,} 
        // * 匹配前一项0次或多次.等价于{0,}
        
        //检查一个字符串中是否含有aaa
        var regExp = /a{3}/
        // ababab
        var regExp = /(ab){3}/
        // abc ,abbc ,abbbc
        reg = /ab{1,3}c/;
        console.log( reg.test("abc") ) //true
        console.log( reg.test("abbc") ) //true
        console.log( reg.test("abbbc") ) //true
        console.log( reg.test("abbbbc") ) //false
        //检查一个字符串中是否以a开头
        // ^ 表示开头
        // $ 表示结尾
        //如果在正则表达式中同时使用^ $则要求字符串必须完全符合正则表达式
        reg = /^a$/
        console.log(reg.test("a")) // true
        console.log(reg.test("aa")) // false
        // 创建一个正则表达式,用来检查一个字符串是否是一个合法手机号
        var regMobile = /^1[3-9][0-9]{9}$/
        console.log(regMobile.test("11000000000")) //false
        console.log(regMobile.test("11000000000sss")) //false
        console.log(regMobile.test("15111111111")) //true
    </script>
    
    <pre>
    089. 正则表达式语法2
    检查一个字符串中是否含有 .
    . 表示任意字符
     在正则表达式中使用作为转义字符
    . 来表示.
    \ 表示
    注意:使用构造函数时,由于它的参数是一个字符串,而是字符串中转义字符,
    如果要使用则需要使用\来代替
    </pre>
    <script type="text/javascript">
        console.log("第089");
        var reg = /./;
        reg = /\/;
        reg = new RegExp("\.");
        reg = new RegExp("\\");
        // [...] 位于括号之内的任意字符
        // [^...] 不在括号之中的任意字符
        // . 除了换行符之外的任意字符,等价于[^
    ]
        // w 任何单字字符, 等价于[A-z0-9_]
        // W 任何非单字字符,等价于[^A-z0-9_]
        // s 任何空白符,等价于[ t  n  r  f  v]
        // S 任何非空白符,等价于[^ t  n  r  f  v]
        // d 任何数字,等价于[0-9]
        // D 除了数字之外的任何字符,等价于[^0-9]
        //  单词边界
        // B 除了单词边界
        reg = /w/;
        reg = /W/;
        reg = /d/;
        reg = /D/;
        reg = /s/;
        reg = /S/;
        // 创建一个正则表达式检查一个字符串中是否含有单词child
        var regChild = /child/
        console.log(regChild.test("hellochild")) // false
        console.log(regChild.test("hello childddd")) // false
        console.log(regChild.test("hello child")) // true
        // 去除空格
        var str = "  sss      he      llo            fff  ";
        str = str.replace( /^s*|s*$/g ,'') //去头尾
        str = str.replace( /s{2,}/g ,' ') // 去中间
        console.log(str)
    </script>
    
    <pre>
    090. 邮件的正则
    </pre>
    <script type="text/javascript">
        console.log("第090");
        // 01asQQ.ss_fdsa@01asQQ.com.cn
        // 任意字母数字下划线    .任意字母数字下划线  @   任意字母数字     .任意字母(2-5位)   .任意字母(2-5位)
        var regMail = /^w{3,}(.|w+)*@[A-z0-9]+(.[A-z]{2,5}){1,2}$/
        console.log(regMail.test("as_.wfsfeas@sfsd5.com.cn")) //true
    </script>
    
    </body>
    </html>

    所有基础课程链接:


     1.JavaScript基础视频教程总结(001-010章)           2.JavaScript基础视频教程总结(011-020章)          3. JavaScript基础视频教程总结(021-030章)        4. JavaScript基础视频教程总结(031-040章)

    5. JavaScript基础视频教程总结(041-050章)           6. JavaScript基础视频教程总结(051-060章)         7. JavaScript基础视频教程总结(061-070章)        8. JavaScript基础视频教程总结(071-080章)

    9. JavaScript基础视频教程总结(081-090章)          10. JavaScript基础视频教程总结(091-100章)        11. JavaScript基础视频教程总结(101-110章)      12. JavaScript基础视频教程总结(111-120章)

    13. JavaScript基础视频教程总结(121-130章)        14. JavaScript基础视频教程总结(131-140章)


     另外,欢迎关注我的新浪微博

  • 相关阅读:
    【python】+json+解析数组json字符串(且键没有引号)(完美解决)
    【Python】+类内部方法相互调用
    【Python】+字符串转换为日期(互转)+获取当前时间+获取当前时间戳
    【python】+tushare库+判断指定日期是否是交易日
    【python】+占位符
    【python】【pycharm】+代码自动提示
    【python】+命名规范
    【python】+'chromedriver' executable needs to be in PATH
    【python】+8大数据类型
    【python】+字典操作(全)
  • 原文地址:https://www.cnblogs.com/iflygofy/p/10215586.html
Copyright © 2011-2022 走看看