天天看點

5.數組對象

作者:黑馬金牌程式設計

5.數組對象

5.1數組對象的建立

建立數組對象的兩種方式

  • 字面量方式
  • new Array()
<script>
        //建立數組的兩種方式
        //1. 利用數組字面量
        var arr = [1,2,3];
        console.log(arr[0]);
        //2.利用new Array()
        //var arr1 = new Array();   //建立了一個空數組
        //var arr1 = new Array(2);  //這個2表示 數組的 長度為2 裡面有兩個空數組
        var arr1 = new Array(2,3);  //等價于[2,3]   這樣寫表示  裡面有2個數組元素 是2和3
        console.log(arr1);
    </script>           

5.2檢測是否為數組

(1)instanceof 運算符 他可以用來檢測是否為數組

(2)Array.isArray(參數);H5新增的方法 ie9以上版本支援

<script>
        //翻轉數組
        function reverse(arr){
            if (arr instanceof Array){
                var newArr = [];
                for(var i = arr.length - 1; i>=0; i--){
                newArr[newArr.length] = arr[i];
                }
                return newArr;
            }else{
                 return 'error 這個參數要求必須是數組格式[1,2,3]'
            }
        }
        console.log(reverse([1,2,3]));
        console.log(reverse(1,2,3));
        //檢測是否為數組
        //(1)instanceof 運算符 他可以用來檢測是否為數組
        var arr = [];
        var obj = {};
        console.log(arr instanceof Array);
        console.log(obj instanceof Array);
        //(2)Array.isArray(參數);H5新增的方法 ie9以上版本支援
        console.log(Array.isArray(arr));
        console.log(Array.isArray(obj));
    </script>           

5.3添加删除數組元素的方法

5.數組對象
<script>
        var arr = [1,2,3];
        // (1) push是可以給數組後面追加新的元素
        //arr.push(4, 'pink');
        console.log(arr.push(4, 'pink'));
        console.log(arr);
        // (1) push是可以給數組後面追加新的元素
        // (2) push() 參數直接寫數組元素就可以了
        // (3) push完畢之後,傳回的結果是新數組的長度
        // (4) 原數組也會發生變化
        // 2. unshift 在我們數組的開頭添加一個或者多個數組元素
        console.log(arr.unshift('red','purple'));
        console.log(arr);
        // (1) unshift是 可以給數組前面追加新的元素
        // (2) unshift() 參數直接寫數組元素就可以了
        // (3) unshift完畢之後,傳回的結果是新數組的長度
        // (4)原數組也會發生變化
        //3. pop() 他可以删除數組的最後一個元素
        console.log(arr.pop());
        console.log(arr);
        // (1) pop是 可以删除數組的最後一個元素 記住一次隻能删除一個元素
        // (2) pop() 沒有參數
        // (3) pop完畢之後,傳回的結果是 删除的那個元素
        // (4)原數組也會發生變化
         //4. shift() 他可以删除數組的第一個元素
         console.log(arr.shift());
         console.log(arr);
        // (1) shift是 可以删除數組的第一個元素 記住一次隻能删除一個元素
        // (2) shift() 沒有參數
        // (3) shift完畢之後,傳回的結果是 删除的那個元素
        // (4)原數組也會發生變化
        
    </script>           

篩選數組中的元素

<script>
        //有一個包含工資的數組[1500,1200,2000,2100 ,1800],
        // 要求把數組中工資超過2000的删除,剩餘的放到新數組裡面
        var arr = [1500,1200,2000,2100,1800,1530];
        var newArr = [];
        for(var i =0; i < arr.length; i++){
            if(arr[i] < 2000){
                newArr.unshift(arr[i]);
            }
        }
        console.log(newArr);
    </script>           

5.4數組排序

5.數組對象
 <script>
        //數組排序
        //1.翻轉數組
        var arr = ['pink','red','blue'];
        arr.reverse();
        console.log(arr);
        //2.數組排序(冒泡排序)
        var arr1 = [12,13,4,7,1];
        arr1.sort(function(a,b){
            return a - b; //升序的順序排列
            // return b - a; //降序的順序排列
        });
        console.log(arr1);
    </script>           

5.5數組索引方法

5.數組對象
    <script>
        // 傳回數組元素索引号方法indexOf( 數組元素)作用 
        // 就是傳回該數組元素的索引号 從前面開始查找
        // 它隻傳回第一個滿足條件的索引号
        // 它如果在該數組裡面找不到元素,則傳回的是-1
        var arr = ['red','green','pink'];
        console.log(arr.indexOf('blue'));
        // 傳回數組元素索引号方法lastIndexOf( 數組元素)作用 
        // 就是傳回該數組元素的索引号 從後面開始查找
        var arr = ['red','green','blue','pink','blue'];
        
        console.log(arr.lastIndexOf('blue'));   //4
    </script>           

數組去重案例(重點)

5.數組對象

案例分析:

  • 目标:把舊數組裡面不重複的元素選取出來放到新數組中,重複的元素隻保留-個,放到新數組中去重。
  • 核心算法:我們周遊舊數組,然後拿着I8數組元素去查詢新數組,如果該元素在新數組裡面沒有出現過,我們就添加,否則不添加。
  • 我們怎麼知道該元素沒有存在?利用新數組.indexOf(數組元素)如果傳回時-1就說明新數組裡面沒有改元素
<script>
        // 封裝一個 去重的函數 unique 獨一無二的
        function unique(arr){
            var newArr = [];
            for(var i =0; i<arr.length; i++){
                if(newArr.indexOf(arr[i])===-1){
                    newArr.push(arr[i]);
                }
            }
            return newArr;
        }
        var demo = unique(['blue','geen','blue'])
        console.log(demo);
    </script>           

5.6數組轉化為字元串

5.數組對象
 <script>
        //數組轉換為字元串
        // 1.toString() 将我們的數組轉換為字元串
        var arr = [1,2,3];
        console.log(arr.toString());    //1,2,3
        //2.join(分隔符)
        var arr1=['gren','gyq','pink'];
        console.log(arr1.join());   //green,blue,pink
        console.log(arr1.join('-'));   //green-blue-pink
        console.log(arr1.join('&'));   //green&blue&pink
    </script>