JavaScript基礎視頻教程總結（081-090章）

時間 2019-12-10
原文原文鏈接
<!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("\\\\");
    // [...] 位於括號以內的任意字符
    // [^...] 不在括號之中的任意字符
    // . 除了換行符以外的任意字符,等價於[^\n]
    // \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 單詞邊界
    // \B 除了單詞邊界
    reg = /\w/;
    reg = /\W/;
    reg = /\d/;
    reg = /\D/;
    reg = /\s/;
    reg = /\S/;
    // 建立一個正則表達式檢查一個字符串中是否含有單詞child
    var regChild = /\bchild\b/
    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>