JavaScript基礎視頻教程總結（071-080章）

時間 2019-12-06
原文原文鏈接
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>070-080章總結</title>
</head>
<body>
    
<pre> 071. 數組字面量 </pre>
<script type="text/javascript">
    console.log("第071");
    
    //建立一個數組
    var arr = new Array();
    //使用字面量來建立數組
    //語法:[]
    var arr = [];
    console.log(typeof arr);
    //使用字面量建立數組時，能夠在建立時就指定數組中的元素
    var arr = [1,2,3,4,5,10];
    console.log(arr[3]);
    //使用構造函數建立數組時，也能夠同時添加元素，將要添加的元素做文構造函數的參數傳遞
    //元素之間使用,隔開
    var arr2 = new Array(10,20,30);
    console.log(arr2);
    //建立一個數組數組中只有一個元素10
    arr = [10];
    //建立一個長度爲10的數組
    arr2 = new Array(10);
    console.log(arr2.length);
    //數組中的元素能夠是任意的數據類型
    arr = ["hello",1,true,null,undefined];
    //也能夠是對象
    var obj = {name:"孫悟空"};
    arr[arr.length] = obj;
    arr = [{name:"孫悟空"},{name:"沙和尚"},{name:"豬八戒"}];
    //也能夠是一個函數
    arr = [ function(){alert(1)} , function(){alert(2)} ];
    console.log(arr);
    //arr[0]();
    //數組中也能夠放數組，以下這種數組咱們稱爲二維數組
    arr = [[1,2,3],[3,4,5],[5,6,7]];
    console.log(arr[1]);
</script>

<pre> 072. 數組的4個經常使用的方法
1.push()
 該方法能夠向數組的末尾添加一個或多個元素，並返回數組的新的長度
能夠將要添加的元素做爲方法的參數傳遞，
這樣這些元素將會自動添加到數組的末尾
該方法會將數組新的長度做爲返回值返回
2.pop()
該方法能夠刪除數組的最後一個元素,並將被刪除的元素做爲返回值返回
3.unshift()
向數組開頭添加一個或多個元素，並返回新的數組長度
向前邊插入元素之後，其餘的元素索引會依次調整
4.shift()
能夠刪除數組的第一個元素，並將被刪除的元素做爲返回值返回
</pre>
<script type="text/javascript">
    console.log("第072");
    
    //建立一個數組
    var arr = ["孫悟空","豬八戒","沙和尚"];
    //push()
    var result = arr.push("唐僧","蜘蛛精","白骨精","玉兔精");
    console.log(arr);
    console.log("result = "+result);
    //pop()
    result = arr.pop();
    console.log(arr);
    console.log("result = "+result);
    // unshift()
    arr.unshift("牛魔王","二郎神");
    console.log(arr);
    //shift()
    result = arr.shift();
    result = arr.shift();
    console.log(arr);
    console.log("result = "+result);
</script>

<pre> 073. 數組的遍歷
所謂的遍歷數組，就是將數組中全部的元素都取出來
</pre>
<script type="text/javascript">
    console.log("第073");
    
    //建立一個數組
    var arr = ["孫悟空","豬八戒","沙和尚","唐僧","白骨精"];
    for(var i=0 ; i<arr.length ; i++){
        console.log(arr[i]);
    }
</script>

<pre> 074. 數組練習 </pre>
<script type="text/javascript">
    console.log("第074");
    
    function Person(name , age ){
        this.name = name;
        this.age = age;
    }
    // 修改Person原型的toString
    Person.prototype.toString = function(){
        return "Person[name="+this.name+",age="+this.age+"]";
    };
    // 建立一個Person對象
    var per = new Person("孫悟空",18);
    var per2 = new Person("豬八戒",28);
    var per3 = new Person("紅孩兒",8);
    var per4 = new Person("蜘蛛精",16);
    var per5 = new Person("二郎神",38);
    // 將這些person對象放入到一個數組中
    var perArr = [per,per2,per3,per4,per5];
    // 建立一個函數，能夠將perArr中的滿18歲的Person提取出來，而後封裝到一個新的數組中並返回
    // arr 形參，要提取信息的數組
    function getAdult(arr){
        //建立一個新的數組
        var newArr = [];
        //遍歷arr，獲取arr中Person對象
        for(var i=0 ; i<arr.length ; i++){
            var p = arr[i];
            //判斷Person對象的age是否大於等於18
            if(p.age >= 18){
                //若是大於等於18，則將這個對象添加到newArr中
                //將對象放入到新數組中
                newArr.push(p);
            }
        }
        //將新的數組返回
        return newArr;
    }
    var result = getAdult(perArr);
    console.log(result);
</script>

<pre> 075. forEach()方法遍歷 </pre>
<script type="text/javascript">
    console.log("第075");
    
    /*
     * 通常咱們都是使用for循環去遍歷數組，
     * JS中還爲咱們提供了一個方法，用來遍歷數組
     * forEach()
     * - 這個方法只支持IE8以上的瀏覽器
     * IE8及如下的瀏覽器均不支持該方法，因此若是須要兼容IE8，則不要使用forEach
     * 仍是使用for循環來遍歷
     */
    //建立一個數組
    var arr = ["孫悟空","豬八戒","沙和尚","唐僧","白骨精"];
    /*
     * forEach()方法須要一個函數做爲參數
     *  - 像這種函數，由咱們建立可是不禁咱們調用的，咱們稱爲回調函數
     *  - 數組中有幾個元素函數就會執行幾回，每次執行時，瀏覽器會將遍歷到的元素
     *    以實參的形式傳遞進來，咱們能夠來定義形參，來讀取這些內容
     *  - 瀏覽器會在回調函數中傳遞三個參數：
     *      第一個參數，就是當前正在遍歷的元素
     *      第二個參數，就是當前正在遍歷的元素的索引
     *      第三個參數，就是正在遍歷的數組
     *      
     */
    arr.forEach(function(value,index,obj){
        console.log(value)
    })
</script>

<pre> 076. slice和splice方法 </pre>
<script type="text/javascript">
    console.log("第076");
    var arr = ["孫悟空","豬八戒","沙和尚","唐僧","白骨精"];
    
    /*
     * slice()
     *  - 能夠用來從數組提取指定元素
     *  - 該方法不會改變元素數組，而是將截取到的元素封裝到一個新數組中返回
     *  - 參數：
     *      1.截取開始的位置的索引,包含開始索引
     *      2.截取結束的位置的索引,不包含結束索引
     *          - 第二個參數能夠省略不寫,此時會截取從開始索引日後的全部元素
     *      - 索引能夠傳遞一個負值，若是傳遞一個負值，則從後往前計算
     *          -1 倒數第一個
     *          -2 倒數第二個
     */
    var result = arr.slice(1,4);
    result = arr.slice(3);
    result = arr.slice(0,-1);
    console.log(result);
    console.log(arr);
    /*
     * splice()
     *  - 能夠用於刪除數組中的指定元素
     *  - 使用splice()會影響到原數組，會將指定元素從原數組中刪除
     *      並將被刪除的元素做爲返回值返回
     *  - 參數：
     *      第一個，表示開始位置的索引
     *      第二個，表示刪除的數量
     *      第三個及之後。。
     *          能夠傳遞一些新的元素，這些元素將會自動插入到開始位置索引前邊
     *  
     */
    
    arr = ["孫悟空","豬八戒","沙和尚","唐僧","白骨精"];
    var result = arr.splice(3,2,"牛魔王","鐵扇公主","紅孩兒");
    console.log(result);
    console.log(arr);
</script>

<pre> 077. 數組去重練習 </pre>
<script type="text/javascript">
    console.log("第077");
    
    var arrqq = [1,2,3,4,5,2,2,2,4,1,6,7,8,3,2,1,9] 
    //01
    for (var i=0;i<arrqq.length;i++) {
        for (var j=i+1; j<arrqq.length; j++) {
            if (arrqq[i] == arrqq[j]) {
                arrqq.splice(j,1)
                //當刪除了當前j所在的元素之後，後邊的元素會自動補位
                //此時將不會在比較這個元素，我須要在比較一次j所在位置的元素
                //使j自減
                j--
            } 
        }
    }
    console.log(arrqq);
    //02 使用的javascript的 indexOf 方法
    Array.prototype.distinct = function(){
        var newArr =[]
        var repeatArr =[]
        this.forEach(function(v){
            if(newArr.indexOf(v) < 0){
                newArr.push(v)
            }
        })
        return newArr
    }
    //03 使用對象中的屬性查找的方法
    Array.prototype.unique = function(){
    var newArr = [];
    var obj = {};
    for(var i = 0; i < this.length; i++){
        if(!obj[this[i]]){
            newArr.push(this[i]);
            obj[this[i]] = 1;
        }
    }
        return newArr;
    }
    var result1 = arrqq.distinct()
    var result2 = arrqq.unique()
    console.log(result1)
    console.log(result2)
    console.log(arrqq)
</script>

<pre> 078. 數組的剩餘方法
1. concat()能夠鏈接兩個或多個數組，並將新的數組返回
- 該方法不會對原數組產生影響
2. join()
- 該方法能夠將數組轉換爲一個字符串
- 該方法不會對原數組產生影響，而是將轉換後的字符串做爲結果返回
- 在join()中能夠指定一個字符串做爲參數，這個字符串將會成爲數組中元素的鏈接符
若是不指定鏈接符，則默認使用,做爲鏈接符
3. reverse()
- 該方法用來反轉數組（前邊的去後邊，後邊的去前邊）
- 該方法會直接修改原數組
4. sort()
- 能夠用來對數組中的元素進行排序
- 也會影響原數組，默認會按照Unicode編碼進行排序
- 因此對數字進排序時，可能會獲得錯誤的結果。
咱們能夠本身來指定排序的規則
咱們能夠在sort()添加一個回調函數，來指定排序規則，
回調函數中須要定義兩個形參,
瀏覽器將會分別使用數組中的元素做爲實參去調用回調函數
使用哪一個元素調用不肯定，可是確定的是在數組中a必定在b前邊
- 瀏覽器會根據回調函數的返回值來決定元素的順序，
若是返回一個大於0的值，則元素會交換位置
若是返回一個小於0的值，則元素位置不變
若是返回一個0，則認爲兩個元素相等，也不交換位置
- 若是須要升序排列，則返回 a-b
若是須要降序排列，則返回b-a
</pre>
<script type="text/javascript">
    console.log("第078");
    
    var arr781 = [1,2,3]
    var arr782 = [4,5,6]
    var arr783 = [7,8,9]
    var result781 = arr781.concat(arr782,arr783,10,11,12)
    var result782 = arr781.join("*")
    var result783 = arr781.reverse()
    console.log( result781 )
    console.log( result782 )
    console.log( result783 )
    console.log( arr781 )
    console.log( result783 === arr781 )
    var result784 = arr781.sort()
    console.log( result784 )
    
    var arr784 = [9,43,22,100]
    var result785 = arr784.sort()
    //純數字數組，純數字字符串數組或組合不傳比較器直接用 sort() 排序，是按照元素的第一位的大小進行排序的，並非咱們想要的結果。 
    console.log( result785 ) //[100, 22, 43, 9]
    
    arr784.sort(function(a,b){
        //升序排列
        return a - b;
        //降序排列
        //return b - a;
    });
    console.log( arr784 )
</script>

<pre> 079. call和apply
call()和apply()
- 這兩個方法都是函數對象的方法，須要經過函數對象來調用
- 當對函數調用call()和apply()都會調用函數執行
- 在調用call()和apply()能夠將一個對象指定爲第一個參數
此時這個對象將會成爲函數執行時的this
- call()方法能夠將實參在對象以後依次傳遞
- apply()方法須要將實參封裝到一個數組中統一傳遞
若是沒有任何實參，則爲全局對象
- this的狀況：
1.以函數形式調用時，this永遠都是window
2.以方法的形式調用時，this是調用方法的對象
3.以構造函數的形式調用時，this是新建立的那個對象
4.使用call和apply調用時，this是指定的那個對象
</pre>
<script type="text/javascript">
    console.log("第079");
    
    function fun79(a,b) {
        console.log("a = "+a);
        console.log("b = "+b);
    }
    var obj79 = {
        name: "obj79",
        sayName:function(){
            alert(this.name);
        }
    }
    fun79.call() // window
    fun79.call(obj79,2,3)
    fun79.apply(obj79,[2,3]);
</script>

<pre> 080. arguments
在調用函數時，瀏覽器每次都會傳遞進兩個隱含的參數：
1.函數的上下文對象 this
2.封裝實參的對象 arguments
- arguments是一個類數組對象,它也能夠經過索引來操做數據，也能夠獲取長度
- 在調用函數時，咱們所傳遞的實參都會在arguments中保存
- arguments.length能夠用來獲取實參的長度
- 咱們即便不定義形參，也能夠經過arguments來使用實參，
只不過比較麻煩
arguments[0] 表示第一個實參
arguments[1] 表示第二個實參 。。。
- 它裏邊有一個屬性叫作callee，
這個屬性對應一個函數對象，就是當前正在指向的函數的對象
</pre>
<script type="text/javascript">
    console.log("第080");
    
    function fun(a,b){
        console.log(arguments)
        console.log(this)
        console.log(arguments instanceof Array); // false
        console.log(Array.isArray(arguments)); // false
        console.log(arguments[1]); //true
        console.log(arguments.length); //2
        console.log(arguments.callee == fun); //true
    }
    fun("hello",true);
</script>
    
</body>
</html>