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

所有基礎課程鏈接： 1.JavaScript基礎視頻教程總結（001-010章） 2.JavaScript基礎視頻教程總結（011-020章） 3. JavaScript基礎視頻教程總結（021-030章） 4. JavaScript基礎視頻教程總結（031-040章） 5. JavaScript基 ...
<!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