js day4 數組


  •         //總結:上面這些方法會改變原數組。
      

數組的概念及定義
概念:數組爲一組一般情況下相同類型的數據。

除了 Object 類型之外,Array 類型是ECMAScript 最常用的類型。而且 ECMAScript 中的        Array 類型和其他語言中的數組有着很大的區別。 雖然數組都是有序排列, 但 ECMAScript       中的數組每個元素可以保存任何類型。ECMAScript 中數組的大小也是可以調整的。

數組的創建方式
第一種是 new 運算符(構造函數);
注意:給構造函數傳遞一個值也可以創建數組。如果傳遞的是數字,則會按照該數自創建包含       給定項數的數組;而如果傳遞的是其他類型的參數,則會創建包含那個值的只有一項的數組。

第二種是字面量(json格式);
在計算機科學中,字面量是用於表達源代碼中一個固定值的表示法。

數組的length和下標
使用索引下標來讀取數組的值--下標是固定的,從0開始
數組的length屬性--代表長度,數組的 length 屬性不只是只讀的。通過設置這個屬性,可以從數組的末尾移除項或向數      組中添加新項。

數組的遍歷--for循環
檢測數組:Array.isArray() 靜態方法(對象的構造函數開頭的)
Array.isArray():確定括號中的某個值到底是不是數組

數組的方法--傳統方法
push() 可以接收任意數量的參數,把它們逐個添加到數組末尾,並返回修改後數組的長度。
pop() 從數組末尾移除最後一項,減少數組的length值,然後返回移除的項。
unshift()方法能夠在數組前端添加任意個項並返回新數組的長度。
shift() 方法能夠移除數組中的第一個項並返回該項,同時將數組長度減 1。
reverse() 方法會反轉數組項的順序。
sort() 方法按字母表升序排列數組項。
注意:如果按照其他方式而非字母表順序進行數組排列,必須給sort方法傳遞一個比較函         數做參數。
concat() 方法可以基於當前數組中的所有項創建一個新數組。
slice() 方法它能夠基於當前數組中的一或多個項創建一個新數組。可以接受一或兩個參數,即要返回項的起始和結束位置,不包括結束位置。
splice() 方法,對數組進行刪除、插入、替換,是最強大的數組方法。返回值是數組。
join()方法,將數組轉換成對應的字符串。參數就是連接符

整數數組/字符串數組/對象數組/二維數組
數組的排序(冒泡排序、選擇排序)
強化練習
隨機生成一個五位以內的數,然後輸出該數共有多少位,分別是什麼。
數組的冒泡排序(封裝函數)
數組的選擇排序(封裝函數)
編寫函數map(arr) 把數組中的每一位數字都增加30%
編寫函數has(arr , 60) 判斷數組中是否存在60這個元素,返回布爾類型
綜合應用
編寫函數norepeat(arr) 將數組的重複元素去掉,並返回新的數組。
有一個從小到大排好序的數組。現輸入一個數,要求按原來的規律將它插入數組中。
定義一個含有30個整型元素的數組,按順序分別賦予從2開始的偶數;然後按順序每五個數求出一個平均值,放在另一個數組中並輸出。試編程。
通過循環按行順序爲一個5×5的二維數組a賦1到25的自然數,然後輸出該數組的左下半三角。試編程。
一.<script type="text/javascript">
            //一.利用構造函數創建數組。
            //構造函數:構造函數也是函數,特點是首字母大寫,同時需要new運算符進行調用。
            /*function Array(){//系統定義的,無需自己定義,直接調用。
                
            }*/
            
            //1.對象下面都擁有屬性和方法,通過點操作符操作。
            //Array:構造函數,它下面也會出現一些方法,靜態方法。
            //var arr1=new Array(100,200,300,400);//定義一個數組。 arr1:數組對象。Array:構造函數
            //數組對象的屬性--length:數組裏面數組項的長度。
            //alert(arr1.length);//4
            //alert(arr2.length);//3
            
            //2.數組名等同於數組的所有值。
            //alert(arr1);//100,200,300,400
            //console.log(arr1);//[100, 200, 300, 400]
            
            //3.通過length屬性修改(添加,刪除)數組
            //console.log(arr1);//[100, 200, 300, 400]
            //arr1.length=2;
            //console.log(arr1);// [100, 200]
            
            //console.log(arr1);//[100, 200, 300, 400]
            //arr1.length=10;
            //console.log(arr1);//[100, 200, 300, 400, empty × 6]
            //alert(arr1);//100,200,300,400,,,,,,
            
            
            //4.數組的索引,也叫下標,通過下標(默認的索引編號)來訪問數組中的某一個值。
            //數組的索引下標從0開始。  數組名[下標]  arr[3]:訪問數組第四個位置的值。
            //數組都是有序排列
            //var arr2=new Array('zhangsan','lisi','wangwu');
            //alert(arr2[0]);//zhangsan
            //alert(arr2[2]);//wangwu
            //alert(arr2[8]);//undefined 值不存在。
            
            //5.數組的下標也是動態的,通過數組的下標改變數組的長度。
            //alert(arr2.length);//3
            //arr2[9]='ending';
            //alert(arr2.length);//10
            
            
            
            //6.數組的類型
            //var arr2=new Array('zhangsan','lisi','wangwu');
            //alert(typeof arr2);//object
            
            
            //總結:
            //1.通過構造函數創建數組。
            //2.通過數組的length屬性和索引下標動態的改變數組。
            //3.數組的名稱是所有數組項的值
            //4.數組的類型是對象。
            
            
            //二.利用字面量的簡潔方式定義數組--常用的
            //在計算機科學中,字面量是用於表達源代碼中一個固定值的表示法。
            //var arr2=new Array('zhangsan','lisi','wangwu');
            /*var arr2=['zhangsan','lisi','wangwu'];
            alert(arr2.length);//3
            alert(arr2[1]);//lisi*/
            
            
            //三.構造函數創建和字面量創建數組區別
            //給構造函數傳遞一個值也可以創建數組。如果傳遞的是數字,則會按照該數自創建包含給定項數目的數組;而如果傳遞的是其他類型的參數,則會創建包含那個值的只有一項的數組。
            //var arr=new Array(3);//3不是數組的第一項,代表是數組的長度。
            //alert(arr[0]);//undefined
            //alert(arr.length);//3
            //console.log(arr);//[empty × 3]
            
            /*var arr=new Array('hello');
            alert(arr[0]);//hello
            alert(arr.length);//1*/
            
            
            /*var arr=[3];//字面量創建沒有上面的問題。
            alert(arr[0]);//3
            alert(arr.length);*///1

二.<script type="text/javascript">
            //1.數組的遍歷--for循環
            //var arr=['apple','banana','pear','orange','group'];//索引0-4
            /*for(var i=0;i<arr.length;i++){
                alert(arr[i]);
            }*/
            
            //2.檢測數組:Array.isArray() 靜態方法(對象的構造函數開頭的)固定的方法。
            //確定括號中的某個值到底是不是數組,返回布爾值
            //var arr=null;
            //var arr1=[1,2,3,4];
            //alert(typeof null);//object
            //alert(typeof arr);//object
            //alert(Array.isArray(arr));//false
            //alert(Array.isArray(arr1));//true
        </script>

8.數組的方法一:

改變原數組

<script type="text/javascript">
        //1.push() 可以接收任意數量的參數,把它們逐個添加到數組末尾,並返回修改後數組的長度。
        var arr=['apple','banana'];
        console.log(arr);//["apple", "banana"]
        console.log(arr.push('pear','orange','group'));//5
        console.log(arr);///["apple", "banana", "pear", "orange", "group"]
        /*var arr=['apple','banana'];
        arr.push('pear');
        arr.push('apple');
        arr.push('apple');
        console.log(arr);*/
        //2.pop() 從數組末尾移除最後一項,減少數組的length值,然後返回移除的項。pop裏傳值無效 
        //只能一項一項進行移除。
        /*var arr=["apple", "banana", "pear", "orange", "group"];
        arr.pop();//group
        arr.pop();//orange
        arr.pop();//pear
        console.log(arr);*/
        //3.unshift()方法能夠在數組前端添加任意個項並返回新數組的長度
        /*var arr=['one'];
        arr.unshift('two','three');//["two", "three", "one"]
        console.log(arr);*/
        //4.shift() 方法能夠移除數組中的第一個項並返回該項,同時將數組長度減 1。shift中指定刪除的值是無效的
        /*var arr=["two", "three", "one"];
        arr.shift();
        console.log(arr);*/
        
        //5.reverse() 方法會反轉數組項的順序。
        //var arr=[100,200,300,400,500];
        //arr.reverse();
        //console.log(arr);//[500, 400, 300, 200, 100]
        
        //6.sort() 方法按字母表升序排列數組項。(unicode編碼)
        //注意:如果按照其他方式而非字母表順序進行數組排列,必須給sort方法傳遞一個比較函數做參數。

        /*var arr=[ "banana", "pear","apple", "orange", "group"];
        arr.sort();
        console.log(arr);*///["apple", "banana", "group", "orange", "pear"]
        
        //A-Z   unicode   65-90
        //a-z   unicode   97-122
        //0-9   unicode   48-57

        
        /*var arr=[9,6,3,8,5,2,1,4,7,0];
        arr.sort();//按照unicode編碼進行排列
        console.log(arr);// [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]*/
        
        
        //問題:無法對象正常的數字進行排序。
        //如果需要排序數字,提供一個比較函數實現,將比較函數當中sort的參數傳遞,對數字進行排序。
        /*function compare(a,b){
            if(a>b){
                return 1;
            }else if(a<b){
                return -1;
            }else{
                return 0;
            }
        }*/
        /*function compare(a,b){
            return a-b;
        }*/
        
        //var arr=[91,620,3,89,50,212,1000,45,7,-23,7,3];
        //arr.sort(compare);
        /*arr.sort(function(a,b){
            return a-b;
        });
        console.log(arr);*/// [-23, 3, 3, 7, 7, 45, 50, 89, 91, 212, 620, 1000]
        
        //總結:上面這些方法會改變原數組。
        </script>

<script type="text/javascript">
        //7.concat() 方法可以基於當前數組中的所有項創建一個新數組。(把兩個數組拼接成一個數組,不會改變原數組的值
        //var arr=[ "banana", "pear","apple", "orange", "group"];
        //var arr1=[1,2,3,4,5,6];
        /*var newarr=arr.concat();//拷貝
        console.log(arr);
        console.log(newarr);*/
        
        //concat的參數:多個值,也可以是數組,全部拼接成一個數組
        /*var newarr=arr.concat('hehe','haha',arr,arr,arr1);
        console.log(arr);
        console.log(newarr);*/
        //console.log(arr1.concat(arr1,arr1));
        
        
        //8.slice() 方法它能夠基於當前數組中的一或多個項創建一個新數組。可以接受一或兩個參數(索引下標的位置),即要返回項的起始和結束位置,不包括結束位置(不改變原數組)
        //var arr=[ "banana", "pear","apple", "orange", "group"];
        //console.log(arr.slice(0,3));//[ "banana", "pear","apple"]
        //console.log(arr.slice());//沒有參數,截取全部  ["banana", "pear", "apple", "orange", "group"]
        //console.log(arr.slice(0));//從0索引下標開始截取["banana", "pear", "apple", "orange", "group"]
        //console.log(arr.slice(2));//從2索引下標開始截取 ["apple", "orange", "group"]
        //console.log(arr.slice(100));//[]
        //console.log(arr.slice(0,-2));//負數從後往前數。[ "banana", "pear","apple"]
        //console.log(arr.slice(-5,-2));//[ "banana", "pear","apple"]
        //console.log(arr.slice(0,3));//[ "banana", "pear","apple"]
        //console.log(arr.slice(-10,-7));//[]
        //js的規律:如果是兩個位置做參數,一般不包括結束位置。
        
        //9.splice() 方法,對數組進行刪除、插入、替換,是最強大的數組方法。會改變原數組,返回值是刪除的數組,var midvalue=arr.splice(midindex,1)[0];//獲取中間值。。
        //var arr=[ "banana", "pear","apple", "group"];
        //console.log(arr);
        //刪除--主要功能。
        //第一個參數:開始的位置   第二個參數:刪除的長度。
        //返回值就是刪除的數組項。
        //console.log(arr.splice(1,2));//["pear","apple"]
        //console.log(arr);// ["banana", "group"]
        
        //插入:
        //第一個參數:開始的位置   第二個參數:刪除的長度(爲0表示不刪除)。從第三個參數開始就是插入到數組的數組項。
        //從設置的位置開始插入。
        /*console.log(arr.splice(1,0,'zhangsan','lisi','wangwu'));
        console.log(arr);*/
        
        
        //替換:
        //console.log(arr.splice(1,2,'hehe','haha'));//["pear","apple"]
        //console.log(arr);//["banana", "hehe", "haha", "group"]
        
        //10.join()方法,將數組轉換成對應的字符串。參數就是連接符(不是分隔符)。
        //var arr1=['a','b','c','d'];
        //console.log(arr1.join());//a,b,c,d
        //console.log(typeof arr1.join());//string
        //console.log(arr1.join('#'));//a#b#c#d
        //console.log(arr1.join(''));//abcd  空隙
        //console.log(arr1.join(' '));//a b c d  空格
        
        
        //var arr2=['my','name','is','zhangsan'];
        //console.log(arr2.join(' '));
        //console.log(arr2.reverse().join(' '));//zhangsan is name my
        
        
        </script>js規律:如果是兩個位置做參數,一般不包括結束位置;

數組的類型:<script type="text/javascript">
            //1.二維數組:數組裏面嵌套數組。
            //獲取多維數組的值。
            //var arr=[1,2,3,[4,'hello',['a','c'],6],7,[8,9]];
            //alert(arr[3][1]);
            //alert(arr[3][2][1])
            
            //二維數組賦值
            var arr=['a','b'];
            //arr[2][0]=10;//不能直接給二維數組賦值。但可以arr[2]=[10,11]
            arr[2]=[];//先確認數組的某項是數組。
            arr[2][0]=10;
            arr[2][1]=100;
            arr[2][5]=1000;
            console.log(arr);
        </script>

6.數組的應用:script type="text/javascript">
        //定義一個含有30個整型元素的數組,按順序分別賦予從2開始的偶數;
        //然後按順序每五個數求出一個平均值,放在另一個數組中並輸出。試編程。
        //1.創建數組
        /*var arr=[];
        for(var i=1;i<=30;i++){
            arr.push(2*i);
        }
        console.log(arr);
        
        //2.五個數求出一個平均值,放在另一個數組中並輸出;
        var newarr=[];
        var svg=0;//平均值
        for(var j=0;j<arr.length;j++){
            svg+=arr[j];
            if((j+1)%5==0){
                newarr.push(svg/5);//將5個數字和的平均值給新數組
                svg=0;
            }
        }
        console.log(newarr);*/
        
        
        //4.通過循環按行順序爲一個5×5的二維數組arr賦1到25的自然數,然後輸出該數組的左下半三角。試編程。

var arr=[];
        var num=0;
        for(var i=0;i<5;i++){
            arr[i]=[];
            for(var j=0;j<5;j++){
                ++num;
                if(j<i+1){
                    arr[i][j]=num;
                }
            }
        }
        
        console.log(arr)
        //var arr=[[1,2,3,4,5],[6,7,8,9,10]......]
        //arr[0][0]  arr[0][1]  arr[0][2]  arr[0][3]  arr[0][4]
        
        function double(n){
            return n<10 ? '0'+n : n;
        }把1~9變成01~09

        var arr=[];
        var num=1;
        for(var i=0;i<5;i++){
            arr[i]=[];//數組的每一項還是數組
            for(var j=0;j<5;j++){
                arr[i][j]=double(num++);
                if(i>=j){
                    document.write(arr[i][j]+'&nbsp;&nbsp;&nbsp;&nbsp;');    
                }
            }
            document.write('<br>');
        }
        </script>

7.數組的排序
<script type="text/javascript">
            //var arr=[12,5,896,35,4,-45,-6,7,2,100,48,35,4];
            //1.冒泡排序
            //冒泡排序算法的原理如下:
            //1比較相鄰的元素。如果第一個比第二個大,就交換他們兩個。
            //2對每一對相鄰元素做同樣的工作,從開始第一對到結尾的最後一對。在這一點,最後的元素應該會是最大的數。
            //3針對所有的元素重複以上的步驟,除了最後一個。
            //4持續每次對越來越少的元素重複上面的步驟,直到沒有任何一對數字需要比較。
            /*console.log('原數組:'+arr);
            var times=0;
            for(var i=0;i<arr.length;i++){//次數
                for(var j=0;j<arr.length;j++){
                    if(arr[j]>arr[j+1]){
                        var temp=arr[j];
                        arr[j]=arr[j+1];
                        arr[j+1]=temp;
                    }
                    times++;
                }
            }
            console.log(arr);
            console.log(times);//169*/
            
            /*console.log('原數組:'+arr);
            var times=0;
            for(var i=0;i<arr.length-1;i++){//次數/輪數
                for(var j=0;j<arr.length-i-1;j++){//相鄰的元素兩兩比較。
                    if(arr[j]>arr[j+1]){
                        var temp=arr[j];
                        arr[j]=arr[j+1];
                        arr[j+1]=temp;
                    }
                    times++;
                }
            }
            console.log(arr);
            console.log(times);*///78
            
            function bubblesort(arr){
                if(Array.isArray(arr)){
                    for(var i=0;i<arr.length-1;i++){//次數/輪數
                        for(var j=0;j<arr.length-i-1;j++){//相鄰的元素兩兩比較。
                            if(arr[j]>arr[j+1]){
                                var temp=arr[j];
                                arr[j]=arr[j+1];
                                arr[j+1]=temp;
                            }
                        }
                    }
                    return arr;
                }else{
                    //alert('請輸入數組');
                    throw new Error('你輸入的不是一個數組');//利用錯誤對象拋錯
                }
            }
            //console.log(bubblesort(12,5,896,35,4000,-450,-6,7,2,100,48,35,4));
            
            //2.選擇排序
            //var arr=[12,5,896,35,4000,-450,-6,7,2,100,48,35,4];
            //選擇排序(Selection sort)是一種簡單直觀的排序算法。它的工作原理是每一次從待排序的數據元素中選出最小(或最大)的一個元素,存放在序列的起始位置,直到全部待排序的數據元素排完。 選擇排序是不穩定的排序方法。
            /*for(var i=0;i<arr.length;i++){//按順序假設每一個值都是最小值。
                var minindex=i;//假設的最小值的索引下標
                var minvalue=arr[minindex];//假設的最小值
                for(var j=i+1;j<arr.length;j++){
                    if(minvalue>arr[j]){//數組項的值比假設的最小值還要小,當前這項就是最小值
                        minvalue=arr[j];
                        minindex=j;
                    }
                }
                //如果獲取到了最小值,和假設的最小值進行交換。
                if(minindex!=i){//防止假設的真的是最小值,無需自己和自己進行交換。
                    var temp=arr[i];
                    arr[i]=arr[minindex];
                    arr[minindex]=temp;
                }
                
            }
            
            console.log(arr);*/
        </script>

  • 新增的數組方法:
  • 位置方法----indexOf()  lastIndexOf()返回要查找的項在數組中的索引位置,沒找到的情況下返回-1。(兩個參數:要查找的項和(可選的)表示查找起點位置的索引)----當查找到的元素的下標和當前元素的下標一樣時,說明此元素在數組中只出現了一次。

indexOf() 方法從數組的開頭開始向後查找。

lastIndexOf() 方法則從數組的末尾開始向前查找。

  1. 迭代方法(不會改變原數組)

迭代是重複反饋過程的活動,其目的通常是爲了逼近所需目標或結果。每一次對過程的重 複稱爲一次“迭代”,而每一次迭代得到的結果會作爲下一次迭代的初始值。

兩個參數:

第一個參數:要在每一項上運行的函數

此函數會接收三個參數:數組項的值、該項在數組中的位置、數組對象本身。

第二個參數:(可選的)運行該函數的作用域對象(影響 this 的值)。

every()

對數組中的每一項運行給定函數,如果該函數對每一項都返回 true ,則返回 true 。

some()

對數組中的每一項運行給定函數,如果該函數對任意一項返回 true ,則返回 true 。

filter()

對數組中的每一項運行給定函數,返回該函數結果爲 true 的項組成的數組。

  1. 利用filter 來去除數字重複;

Var  arr=[5,5,533,33,55,66,66,11,23,43,43]

Var  arr2=arr.filter(function(a,b){

Return   arr.indexOf(a)==b//滿足條件的會輸出來,返回的是一個新的數組

})

Console.log(arr2)

        

 

map()

對數組中的每一項運行給定函數,返回每次函數調用的結果組成的數組。

返回就是數組,不考慮true或者false;

forEach() :對數組中的每一項運行給定函數。這個方法沒有返回值。

以上方法都不會修改數組中的包含的值。

    1. 歸併方法---- reduce()  reduceRight()

這兩個方法都會迭代數組的所有項,然後構建一個最終返回的值。

reduce() 方法從數組的第一項開始,逐個遍歷到最後。

reduceRight() 方法從數組的最後一項開始,向前遍歷到第一項。

兩個參數:每一項上調用的函數和(可選的)作爲歸併的初始值。

調用的函數接收 4 個參數:前一個值、當前值、項的索引和數組對象。

  •  

對象是javascript的數據類型。對象是一種複合值,它將很多值聚合在一起,可通過名字訪 問這些值。對象也看做是屬性的無序集合,每個屬性都是一個名/值對。

    1. 構造函數創建對象--var obj=new Object();
    2. 字面量創建對象--var obj={ };
  1.  

JSON 是一種輕量級的數據交換格式。它是基於 ECMAScript的一個子集,採用完全獨立於編 程語言的文本格式來存儲和表示數據。簡潔和清晰的層次結構使得 JSON 成爲理想的數據交換 語言。 易於人閱讀和編寫,同時也易於機器解析和生成,並有效地提升網絡傳輸效率。

    1. json: 是一種輕量級的數據交換格式。不是js獨有的。
    2. json組成:簡單值+對象+數組。
    3. json裏面字符串需要添加雙引號。
    4. json沒有var關鍵字,沒有分號(;)
  • --for...in循環
    1. 棧:自動分配內存空間,系統自動釋放,基本類型的值和引用類型的地址
    2. 堆:動態分配的內存,大小不定,也不會自動釋放。存放引用類型的值。

 

  1. 使用json形式創建一個對象,該對象存儲一個學生的信息,該對象包含姓名,學號、身份 證、年齡、性別、所學專業等屬性信息,同時該對象包含一個自我介紹的方法,用來輸出 該對象的所有信息。
  2. 隨機點名程序。
  3. 擴展案例:快速排序的實現。
  4. 擴展案例:多種方式實現數組去重。
  5. 擴展案例:數組的扁平化。

8.數組的新方法:
<script type="text/javascript">
            //indexOf()  lastIndexOf()
            //返回要查找的項在數組中的索引位置,沒找到的情況下返回-1。
            //兩個參數:要查找的項和(可選的)表示查找起點位置的索引
            //indexOf() 方法從數組的開頭開始向後查找。
            //lastIndexOf() 方法則從數組的末尾開始向前查找

            //var arr=['a','b','c','d','b','c','d'];
            //alert(arr.indexOf('c'));//2
            //alert(arr.lastIndexOf('c'));//5
            //alert(arr.indexOf('c',3));//5
            //alert(arr.indexOf('f'));//-1  不存在。
            //alert(arr.indexOf('c',-6));//2 負數從後往前數。
            //alert(arr.indexOf('c',2));//2 包括查找的位置。(爲2的下標所指的c也算值)
            
            
            //編寫函數norepeat(arr) 將數組的重複元素去掉,並返回新的數組。
            /*var arr=[12,5,12,12,12,896,35,4,-45,-6,7,2,100,48,35,4,12,5,896];
            console.log(arr);
            for(var i=0;i<arr.length;i++){//i=0
                for(var j=i+1;j<arr.length;j++){//j=1;  j=2;   j=3
                    if(arr[i]==arr[j]){
                        arr.splice(j,1);//splice改變原數組
                        j--;
                    }
                }
            }
            console.log(arr);*/
            
            
            /*var arr=[12,5,12,12,12,896,35,4,-45,-6,7,2,100,48,35,4,12,5,896];
            var newarr=[];
            
            for(var i=0;i<arr.length;i++){
                var bstop=true;
                for(var j=0;j<newarr.length;j++){
                    if(arr[i]==newarr[j]){//滿足條件,新數組擁有此值
                        bstop=false;
                    }
                }
                
                if(bstop){//當前的arr[i]的值絕對不在新數組中
                    newarr.push(arr[i]);//添加到新數組中
                }
                
            }
            
            console.log(arr);
            console.log(newarr);*/
            
            /*var arr=[12,5,12,12,12,896,35,4,-45,-6,7,2,100,48,35,4,12,5,896];
            var newarr=[];
            for(var i=0;i<arr.length;i++){
                if(newarr.indexOf(arr[i])==-1){
                    newarr.push(arr[i]);
                }
            }
            console.log(arr);
            console.log(newarr);*/
            
            /*var arr=[12,5,12,12,12,896,35,4,-45,-6,7,2,100,48,35,4,12,5,896];
            console.log(arr);
            console.log([...new Set(arr)]);*/
        </script>
9.數組的新方法-迭代方法
<script type="text/javascript">
            //兩個參數:
            //第一個參數:要在每一項上運行的函數
            //此函數會接收三個參數:數組項的值、該項在數組中的位置、數組對象本身。
            //第二個參數:(可選的)運行該函數的作用域對象(影響 this 的值)。
            
            every必有return,不然執行到最後不會迭代,返回值爲1個boolean值。

           some也必須有return,返回值爲一個boolean值

             /filter:返回的是一個數組,結果爲true的項。
            //map:返回的是一個數組,不管真假。
            //返回的是map內部的函數返回的值,不管值是否存在,都會返回對應的值。

            //1.every()對數組中的每一項運行給定函數,如果該函數對每一項都返回 true ,則返回 true 。對數組中的每個元素都執行一次指定的函數(callback),直到此函數返回 false,如果發現這個元素,every 將返回 false,如果回調函數對每個元素執行後都返回 true ,every 將返回 true。它只對數組中的非空元素執行指定的函數,沒有賦值或者已經刪除的元素將被忽略
            //var arr=[100,2,3,4,5,6,7,8,9];
            /*var result=arr.every(function(a){
                return a>0;
            });
            console.log(result);*///true
            
            /*var result=arr.every(function(a){
                return a;
            });
            console.log(result);*///true
            
            //var result=arr.every(function(a){
                //console.log(a);//100
            //});
            
            //確認數組中的每一項都是數字
            /*var arr=[100,2,3,4,'5',6,7,8,9];
            
            var result=arr.every(function(a){
                //return !isNaN(a);//具有隱式轉換。
                //return typeof a == 'number';
            });
            console.log(result);*/
            
            //2.some()對數組中的每一項運行給定函數,如果該函數對任意一項返回 true ,則返回 true 。
            //編寫函數has(arr , 60) 判斷數組中是否存在60這個元素,返回布爾類型

            /*var arr=[100,2,3,4,'5',6,7,8,9];
            var result=arr.some(function(value){
                return value==60;
            });
            console.log(result);*/
            
            
            /*function has(arr,num){
                for(var i=0;i<arr.length;i++){
                    if(arr[i]==num){
                        return true;
                    }
                }
                return false;
            }
            
            console.log(has([6,2,3,4,5,60,7],600));*/
            

var arr=[100,2,3,4,'5',6,7,8,9];
            function has(arr){
                return arr.some(function(value){return value==60});
                不然has()無返回值
            }
            console.log(has(arr))
            
            //3.filter()對數組中的每一項運行給定函數,返回該函數結果爲 true 的項組成的數組。最後return的必須是boolean值,return 如value-5是不行的,改成value>5;
            /*var arr=[1,2,3,4,5,6,7,8,9];
            var result=arr.filter(function(value){
                return value>5;
            });
            console.log(result);*///[6, 7, 8, 9]
            
            /*var arr=[1,2,3,4,5,6,7,8,9];
            var result=arr.filter(function(value,index,array){
                console.log(value,index,array);
            });*/
            
            /*var arr=[12,5,12,12,12,896,35,4,-45,-6,7,2,100,48,35,4,12,5,896];
            var result=arr.filter(function(value,index,array){
                return arr.indexOf(value)==index;
                //arr.indexOf(value):當前的value在數組第一個找到的位置索引
                //index:數組每一個數組項的索引
                
            });
            console.log(arr);
            console.log(result);*/
            
            
            //4.map() 對數組中的每一項運行給定函數,返回每次函數調用的結果組成的數組。返回就是數組,不考慮true或者false;
            /*var arr=[1,2,3,4,5,6,7,8,9];
            console.log(arr.filter(function(v){
                return v==5;
            }));
            
            console.log(arr.map(function(v){
                return v==5;
            }));*/
            
            //編寫函數map(arr) 把數組中的每一位數字都增加30%
            //var arr=[100,200,300,400,500,600,700,800,900];
            /*console.log(arr.map(function(v){
                return v*1.3;
            }));*/
            
            /*arr.filter(function(v){
                console.log(v*1.3);
            });*/
            
            /*arr.some(function(v){
                console.log(v*1.3);
            });*/
            
            //5.forEach() :對數組中的每一項運行給定函數。這個方法沒有返回值(取代for循環)
            /*var arr=[100,200,300,400,500,600,700,800,900];
            var newarr=[];
            arr.forEach(function(value,index,array){
                newarr.push(value*1.3);
                //return 不能這樣寫。 
            });
            console.log(newarr);*/
            
            
            var arr=[100,200,300,400,500,600,700,800,900];
            arr.forEach(alert);alert默認接受一個參數
            console.log默認接收多個參數
        </script>
10.遞歸方法
<script type="text/javascript">
        //遞歸
        //程序調用自身的編程技巧稱爲遞歸。
        //它通常把一個大型複雜的問題層層轉化爲一個與原問題相似的規模較小的問題來求解。
        //遞歸的能力在於用有限的語句來定義對象的無限集合。
        //一般來說,遞歸需要有邊界條件、遞歸前進段和遞歸返回段。
        
        //1. 子問題須與原始問題爲同樣的事,且更爲簡單;
        //2. 不能無限制地調用本身,須有個出口,化簡爲非遞歸狀況處理。
        
        //5!=5*4!
        //4!=4*3!
        
        //1.編寫一個函數,輸入n爲偶數時,調用函數求1/2+1/4+1/6...+1/n,當輸入n爲奇數時,調用函數求1+1/3+1/5...+1/n.
        /*n=2   1/2
        n=4   1/4+even(2)
        n=6   1/6+even(4)
        
        n=6   1/6+1/4+1/2*/
        
        
        
        /*function fn(num){
            function even(n){
                if(n==2){
                    return 1/2;
                }else{
                    return 1/n+even(n-2);
                    //函數調用函數自身
                }
            }
            function odd(n){
                if(n==1){
                    return 1;
                }else{
                    return 1/n+odd(n-2);
                    //函數調用函數自身
                }
            }
            if(num%2==0){
                return even(num);
            }else{
                return odd(num);
            }
        }
        
        console.log(fn(6));*/
        
        //快速排序
        //1.從待排序的數組中挑出一個數,挑中間數。--splice
        //2.用剩餘的數和挑出的數進行一一比較。如果比挑出的數大,放在一個新創建的數組裏面。如果比挑出的數小,也放在另外一個新創建的數組裏面。
        //3.分別對新創建的兩個數組,重複上面的操作(遞歸)。
        //4.直到每一個數組的length<=1,輸出數組的值。利用concat進行數組的拼接。
        /*var arr=[12,5,896,35,4000,-450,-6,7,2,100,48,35,4];
        function quicksort(arr){
            if(arr.length<=1){//邊界點/基點-----若改成==會報錯
                return arr;
            }else{
                var midindex=parseInt(arr.length/2);//中間值的索引。
                var midvalue=arr.splice(midindex,1)[0];//獲取中間值。
                var left=[];
                var right=[];
                for(var i=0;i<arr.length;i++){
                    if(arr[i]<midvalue){
                        left.push(arr[i]);
                    }else{
                        right.push(arr[i]);
                    }
                }
                return quicksort(left).concat(midvalue,quicksort(right));
            }
        }
        console.log(quicksort(arr));*/
        
        //數組的扁平化:將多維數組變成一維數組。
        //新建一個數組。
        //遍歷待扁平化數組的每一項
        //如果是單個的值,直接push到新的數組中
        //如果還是數組,遞歸調用,利用concat進行拼接。

做法一:ar arr=[1,2,3,['a','b','c'],['4','5','6',[7,8,9]],10];
        var newarr=[]
        function fn(arr){
            arr.map(function(value){
                if(!Array.isArray(value)){
                 newarr.push(value)
                 }
                else{fn(value)}
                })
            return newarr
        }
        
        document.write(fn(arr))

做法二:
        /*var arr=[1,2,3,['a','b','c'],['4','5','6',[7,8,9]],10];
        function flatten(arr){
            var newarr=[];
            for(var i=0;i<arr.length;i++){
                if(Array.isArray(arr[i])){//數組項還是數組
                    newarr=newarr.concat(flatten(arr[i]));
                }else{//單個值
                    newarr.push(arr[i]);
                }
            }
            return newarr;
        }
        console.log(flatten(arr));*/
        
        /*var arr=[1,2,3,['a','b','c'],['4','5','6',[7,8,9]],10];
        function flatten(arr){
            return arr.reduce(function(prev,curr,index,array){
                return prev.concat(Array.isArray(curr)?flatten(curr):curr);
                
            },[]);
        }
        console.log(flatten(arr));*/
        
        var arr=[12,5,896,6,35,4000,100,-450,6,7,2,100,48,35,4];
        function quicksort(arr){
            if(arr.length<=1){//邊界點/基點
                return arr;
            }else{
                var midindex=parseInt(arr.length/2);//中間值的索引。
                var midvalue=arr.splice(midindex,1)[0];//獲取中間值。
                var left=[];
                var right=[];
                for(var i=0;i<arr.length;i++){
                    if(arr[i]<midvalue){
                        left.push(arr[i]);
                    }else if(arr[i]>midvalue){
                        right.push(arr[i]);
                    }
                }
                return quicksort(left).concat(midvalue,quicksort(right));
            }
        }
        console.log(quicksort(arr));
        
        </script>

 10.數組的新方法:
    <script type="text/javascript">
            //1.indexOf/lastIndexOf
            /*var arr=['zhangsan','lisi','wangwu','zhaoliu','lisi','wangwu'];
            alert(arr.indexOf('lisi'));//1
            alert(arr.indexOf('lisi',2));//4
            alert(arr.lastIndexOf('lisi'));//4*/
            
            //2.迭代方法
            //every
/*            var arr=['zhangsan','lisi','wangwu',123,'lisi','wangwu'];
            var newarr=[];
            var result=arr.every(function(value,index,array){
                //console.log(value);
                //newarr.push(value);
                return typeof value=='string';//每一個數組項都要走一遍函數。
            });
            console.log(result);//false*/
            
            /*var arr=['zhangsan','lisi','wangwu',123,'lisi','wangwu'];
            arr.every(function(value,index,array){
                console.log(typeof value=='string');//一次執行。
            });*/
            
            
            //some:返回值也是一個
            var arr=['zhangsan','lisi','wangwu','123','lisi','wangwu'];
            /*var result=arr.some(function(value,index,array){
                //console.log(typeof value=='string');
                return typeof value=='string';
            });
            console.log('結果:'+result);*/
            
            //函數名等於函數體,方法是由函數構建的。
            //alert(alert);//function alert() { [native code] }
            console.log(arr.some(alert));//false
            console.log(arr.some(function alert(a) { }));//false
            console.log(arr.some(function log(a,b,c,d,e,f) { }));//false
            //alert('一個參數');
            //console.log('a','b','c','d');//多個參數
            //alert(console.log)
            //arr.some(console.log);
            
            //filter:返回的是一個數組,結果爲true的項。
            //map:返回的是一個數組,不管真假。
            //返回的是map內部的函數返回的值,不管值是否存在,都會返回對應的值。
            /*var arr=['zhangsan','lisi','wangwu',123,'lisi','wangwu'];
            var newarr=arr.filter(function(value){
                console.log(value);
                //return value;
            });
            console.log(newarr);//[]*/
            
            /*var arr=['zhangsan','lisi','wangwu',123,'lisi','wangwu'];
            var newarr=arr.map(function(value){
                //console.log(value);
                return typeof value=='string';
            });
            console.log(newarr);*///[undefined, undefined, undefined, undefined, undefined, undefined]
            
            //forEach:沒有返回值,替換for循環
            /*var arr=[123,56,2,89,456,2,7,89,100];
            function fn(arr){
                var newarr=arr.sort(function(a,b){
                    return a-b;
                });
                var minvalue=newarr[0];
                var maxvalue=newarr[newarr.length-1];
                var sum=0;
                arr.forEach(function(v){
                    sum+=v;
                });
                return '數組的最大值:'+maxvalue+'<br/>數組的最小值:'+minvalue+'<br/>數組的和:'+sum;
            }
            document.write(fn(arr))*/
        </script>
    </body>
    
11.歸併方法
<script type="text/javascript">
            //歸併方法:這兩個方法都會迭代數組的所有項,然後構建一個最終返回的值。
            /*var arr=[1,2,3,4,5,6,7,8,9,10];
            //調用的函數接收 4 個參數:前一個值、當前值、項的索引和數組對象。
            var result=arr.reduce(function(prev,curr,index,array){
                //prev:第一次指向數組的第一項,後面都是前面迭代return的結果。
                //curr:如果數組的第一項指向prev,除了第一項其他的都歸它.
                console.log(prev+'-----'+curr);
                return prev+curr;
            });


            
            console.log(result);*/
            
            var arr=[1,2,3,4,5,6,7,8,9,10];
            //調用的函數接收 4 個參數:前一個值、當前值、項的索引和數組對象。
            var result=arr.reduce(function(prev,curr,index,array){
                //prev:如果reduce方法存在第二個參數,prev指向第二個參數,後面都是前面迭代的結果。
                //curr:如果reduce方法存在第二個參數,curr指向數組的每一項.
                console.log(prev+'-----'+curr);
                return prev+curr;
            },100);//100:迭代的初始值
            
            console.log(result);
        </script>
11.1歸併方法
<script type="text/javascript">
            //歸併方法:這兩個方法都會迭代數組的所有項,然後構建一個最終返回的值。
            /*var arr=[1,2,3,4,5,6,7,8,9,10];
            //調用的函數接收 4 個參數:前一個值、當前值、項的索引和數組對象。
            var result=arr.reduce(function(prev,curr,index,array){
                //prev:第一次指向數組的第一項,後面都是前面迭代的結果。
                //curr:如果數組的第一項指向prev,除了第一項其他的都歸它.
                console.log(prev+'-----'+curr);
                return prev+curr;
            });
            
            console.log(result);*/
            
            var arr=[1,2,3,4,5,6,7,8,9,10];
            //調用的函數接收 4 個參數:前一個值、當前值、項的索引和數組對象。
            var result=arr.reduce(function(prev,curr,index,array){
                //prev:如果reduce方法存在第二個參數,prev指向第二個參數,後面都是前面迭代的結果。
                //curr:如果reduce方法存在第二個參數,curr指向數組的每一項.
                console.log(prev+'-----'+curr);
                return prev+curr;
            },100);//100:迭代的初始值
            
            console.log(result);
        </script>
12.對象的創建:
    <script type="text/javascript">
        //對象:一切皆對象。
        //對象是javascript的數據類型。對象是一種複合值,它將很多值聚合在一起,可通過名字訪問這些值。對象也看做是屬性的無序集合,每個屬性都是一個名/值對。
        //組成:屬性+方法
        
        //自定義對象(屬性、方法)
        
        //1.創建對象--構造函數創建
        /*var obj=new Object();//新建一個空對象。
        obj.name='zhangsan';//自定義的屬性---不需要var
        obj.age=100;
        obj.showinfo=function(){//自定義的方法。
            return obj.name+','+obj.age;
        }*/
        
        
        //訪問對象屬性1:通過點操作符完成。點操作符後面只能跟字符串。
        //訪問對象屬性2:通過[]操作屬性。[]裏面可以是字符串(obj.xx----------都是字符串),也可以是變量(/*for(var i in obj){//變量i:對象的屬性,obj:對象
                console.log(i+'----'+obj[i]);
            }*/)

        //alert(obj['name']);//zhangsan
        //alert(obj.name);//zhangsan
        //alert(obj.a);//對象下面的屬性和方法不存在,不會報錯,報undefined
        
        //訪問方法
        //alert(obj.showinfo());
        
        //alert(typeof obj);//object;
        //alert(obj.showinfo);//函數體。
        
        
        //2.創建對象--字面量的方式
        //這裏的屬性名一定是字符串,自動調用toString()方法將它轉換成字符串。
        /*var obj={
            name:'zhangsan',
            age:100,
            showinfo:function(){
                return obj.name+','+obj.age;
            }
        };*/
        /*var obj={
            'name':'zhangsan',
            'age':100,
            'showinfo':function(){
                return obj.name+','+obj.age;
            }
        };
        alert(obj['name']);//zhangsan
        alert(obj.name);//zhangsan
        alert(obj.showinfo());*/
        
        /*var obj={
            1:2,
            3:4
        }
        //alert(obj.1);//格式錯誤。
        alert(obj['1']);//2
        alert(obj[1]);//2*/
        
        
        /*var num=10;
        alert(typeof num);//number
        alert(typeof num.toString());//string
        alert(typeof String(num));//string*/
        
        /*var arr=[1,2,3];
        alert(typeof arr);//object
        alert(typeof arr.toString());//string
        alert(typeof String(arr));*/
        
        
        </script>

13.對象的遍歷
<script type="text/javascript">
            //1.對象的遍歷
            /*var obj={
                'name':'zhangsan',
                'age':100,
                'showinfo':function(){
                    return obj.name+','+obj.age;
                }
            };*/
            
            
            //2.新的遍歷方式--for...in
            /*for(var i in obj){//變量i:對象的屬性(只有屬性沒有值),obj:對象
                console.log(i+'----'+obj[i]);
            }*/
            
            
            
            /*var arr=['zhangsan','lisi','wangwu','zhaoliu'];
            //for循環:索引下標,固有的,從0開始的順序。
            for(var i=0;i<arr.length;i++){
                alert(arr[i]);
            }*/
            
            /*var arr=['zhangsan','lisi','wangwu','zhaoliu'];
            for(var i in arr){
                console.log(i+'-----'+arr[i]);
            }*/
            
            
            //結論:
            //對象只能用for...in進行遍歷
            //數組可以用for和for...in進行遍歷(在for(i in xx)中i是下標或對象的屬性)
        </script>
    </body>
14.數組和對象的綜合應用

數組由對象組成,先用arr[n]定位哪個對象,再用對象方法訪問
<script type="text/javascript">
            var obj={
                        "result": [
                            ["aj", "888740"],
                            ["阿迪達斯", "2577353"],
                            ["安踏", "1829713"],
                            ["aj1", "401090"],
                            ["阿瑪尼", "313581"],
                            ["矮個子秋季套裝", "66915"],
                            ["a字裙女", "4644066"],
                            ["a字裙 半身裙", "2527105"],
                            ["a字連衣裙", "1820882"],
                            ["阿迪達斯官方旗艦店男", "269057"]
                        ],
                        "magic": [{
                            "index": "1",
                            "type": "tag_group",
                            "data": [
                                [{
                                    "title": "男鞋"
                                }, {
                                    "title": "T恤"
                                }, {
                                    "title": "籃球鞋",
                                    "type": "hot"
                                }],
                                [{
                                    "title": "病倒"
                                }, {
                                    "title": "短袖"
                                }, {
                                    "title": "戰靴"
                                }, {
                                    "title": "未來",
                                    "type": "hot"
                                }, {
                                    "title": "純棉"
                                }, {
                                    "title": "低幫"
                                }, {
                                    "title": "氣墊"
                                }]
                            ]
                        }, {
                            "index": "4",
                            "type": "tag_group",
                            "data": [
                                [{
                                    "title": "籃球鞋",
                                    "type": "hot"
                                }, {
                                    "title": "運動鞋"
                                }, {
                                    "title": "男鞋"
                                }, {
                                    "title": "女鞋"
                                }],
                                [{
                                    "title": "白灰"
                                }, {
                                    "title": "櫻木"
                                }, {
                                    "title": "庫裏"
                                }, {
                                    "title": "黑水泥"
                                }, {
                                    "title": "公牛"
                                }, {
                                    "title": "高幫",
                                    "type": "hot"
                                }]
                            ]
                        }, {
                            "index": "8",
                            "type": "tag_group",
                            "data": [
                                [{
                                    "title": "中長款"
                                }, {
                                    "title": "中裙"
                                }, {
                                    "title": "短裙",
                                    "type": "hot"
                                }],
                                [{
                                    "title": "中腰"
                                }, {
                                    "title": "高腰",
                                    "type": "hot"
                                }],
                                [{
                                    "title": "修身"
                                }, {
                                    "title": "學院風"
                                }, {
                                    "title": "大碼",
                                    "type": "hot"
                                }, {
                                    "title": "韓國"
                                }, {
                                    "title": "蓬蓬裙"
                                }]
                            ]
                        }, {
                            "index": "9",
                            "type": "tag_group",
                            "data": [
                                [{
                                    "title": "中長款",
                                    "type": "hot"
                                }, {
                                    "title": "中裙"
                                }, {
                                    "title": "短裙"
                                }],
                                [{
                                    "title": "打底裙"
                                }, {
                                    "title": "大碼的衣服不好賣",
                                    "type": "hot"
                                }, {
                                    "title": "學生"
                                }, {
                                    "title": "短袖"
                                }, {
                                    "title": "修身"
                                }, {
                                    "title": "夏季"
                                }, {
                                    "title": "寬鬆"
                                }]
                            ]
                        }]
                    };
                    
                //console.log(obj.result[9][0]);    
                //console.log(obj.magic[3].data[1][1]['title']);
                
                
                var a={
                    "name":"zhangsan",
                    "age":100,
                    "showinfo":"我是文字"
                }
                
        </script>
15值傳遞和引用傳遞
<script type="text/javascript">
            //數據類型:基本類型和引用類型
            //基本類型:值傳遞
            //引用類型:引用傳遞(地址傳遞)
            //內存:棧內存和堆內存
            //棧內存:存放基本類型的值和引用類型 的地址。
            //堆內存:存放引用類型的值。
            //1.解決賦值關係
            /*var a=5;
            var b=a;//值傳遞。將a的值傳遞給b
            b++;
            console.log(a);//5
            console.log(b);//6*/
            
            /*var a=[1,2,3];
            var b=a;//地址傳遞,將a的地址給了b
            b.push(4);
            console.log(a);//[1,2,3,4]
            console.log(b);//[1,2,3,4]*/
            
            //如果解決引用類型之間的賦值關係。
            //賦值關係
            var a=[1,2,3];//棧裏面擁有地址
            var b=[];//棧裏面擁有地址
            //淺拷貝:採用一一拷貝將a的值給b
            for(var i in a){
                b[i]=a[i];//將a的值逐個的給b數組
            }
            b.push(4);
            console.log(a);//[1,2,3]
            console.log(b);//[1,2,3,4]
        </script>
16.隨機點名程序
<style type="text/css">
            #box{
                width:200px;
                height:60px;
                color:red;
                font-weight: bold;
                text-align: center;
                line-height: 60px;
                border: 1px solid #FF0000;
                font-size:45px;
                padding: 0 20px;
                margin: 100px auto;
                cursor: pointer;
            }
        </style>
    </head>
    <body>
        <div id="box">開始點名</div>
        <script type="text/javascript">
            //1.window.setInterval(函數體,時間(ms)); 反覆執行定時器。
            //規定的時間內反覆執行函數體,知道關閉定時器。
            /*window.setInterval(function(){
                alert(123);
            },1000);*/
            //停止定時器
            //clearInterval(設置定時器的返回值)
            
            
            //2.innerHTML屬性:獲取和設置元素對象內部的內容。包括內部的標籤元素。
            //var oBox=document.getElementById('box');
            //alert(oBox.innerHTML);//獲取-讀
            //oBox.innerHTML='6789';//設置-寫
            
            
            //2.隨機點名程序。
            var arr=['徐斌','郭康','秦昕','徐斌','溫作業','徐斌','姚宇','楊奇道','徐斌','廉仁杰','丁雁秋','李政','宋軍偉','劉燦','徐斌'];
            var oBox=document.getElementById('box');
            var timer=null;//定時器的返回值
            oBox.οnclick=function(){
                clearInterval(tim);
                clearInterval(timer);//防止定時器疊加。
                timer=setInterval(function(){
                    var num=parseInt(Math.random()*arr.length);//0-15
                    oBox.innerHTML=arr[num];
                },5);
            };
            
        document.οnkeydοwn=function(){
            clearInterval(timer);
        }
        </script>

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章