DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> javascript入門之數組[新手必看]
javascript入門之數組[新手必看]
編輯:關於JavaScript     

一、定義數組。

    定義數組有兩個方法:

    1、var arr1 = [];  //定義一個空數組

    2、var arr2 = [1,2,3,"str1","str2"];  //定義一個有5個元素的數組。

    3、var arr3 = new Array(3);  //定義一個空數組

    4、var arr4 = new Array(1,2,3,"str1","str2");  //定義一個指定長度為5的數組。

二、數組元素的讀和寫。

    arr[0];    //讀取第一個數組元素

    arr[0] = "str1";  //改變數組第一個元素的值。

三、稀疏數組。

    稀疏數組表示從0 開始不連續索引的數組。通常數組的length代表元素中元素個數,如果數組是稀疏的,length屬性值將大於元素的個數。

    in 操作符用於檢測元素在某位置是否存在元素,注意undefined也算存在。

    如:var a1 = [,,];

      var a2 = new Array(3);

      0 in a1;  //true,因為a[0]有undefined元素

      0 in a2;  //false,a2在索引0處沒有元素

四、數組長度

    length屬性用於標志數組的長度

    如:var arr = [1,2,3,4,5];

      arr.length;  //5 arr數組有5個元素

五、數組元素的添加和刪除

    push:  //在數組的末尾添加一個元素

    var arr = [1,2,3];

    arr.push(4,5);    //arr變為[1,2,3,4,5]

    delete: //刪除數組某個位置的元素

    var arr = [1,2,3]

    delete arr[1]  //arr變為[1,,3]

    1 in arr      //false

六、數組的遍歷

    數組的遍歷通常使用for語句來實現

    var arr = [1,2,3,4,5];

    for(var i = 0.i<arr.length;i++){

      if(!a[i]) continue;        //跳過null,undefined和不存在的元素

    }

七、多維數組

    多維數組就是數組裡的元素還是數組

    如:var arr = [[1,2,3],[,4,5,6]];

      arr[1][1];  // 5

八、數組方法

    1、 join()  用於將數組中所有元素都轉化為字符串 並連接在一起,還可以自定義連接字符

      var arr = [1,2,3];

      arr.join();    // => "1,2,3"

      arr.join("==");   // => "1==2==3";

     2、 reverse()  用於將數組元素的順序顛倒

      var arr = [1,2,3];

      arr.reverse();  //arr數組變為[3,2,1]

     3、 sort();   //用於對數組內的元素進行排序。可以傳入一個函數用作排序,如果為空,則按字母順序排序。undifined元素排到最後

      var arr = [1,2,3];

      a.sort(function(a,b){

        return a-b; //排序標准 負數 0 正數,比較結果先返回小的那個 

      });  //arr數組的值為[1,2,3]  如果第二個條件變為b-a則結果為[3,2,1]

      4、concat()  //用於組合一個新的數組,返回一個新的數組

      var arr = [1,2,3]

      arrnew = arr.concat(4,5)  //arrnew數組為[1,2,3,4,5]

      arrnew1 = arr.concat([4,5],[6,7]);  //arrnew1數組為[1,2,3,4,5,6,7]

      5、slice()  //用於返回數組指定區間的元素組成的數組,如果輸入一個參數,則是從這個參數到結束之間的數組。兩個參數就是,第一個參數是起始位置,第二個參數是個數。

       var arr = [1,2,3,4,5];

       var arr1 = arr.slice(2);  //[3,4,5]

       var arr2 = arr.slice(1,3); //[2,3]

     6、splice()   刪除或者添加元素。會改變原數組本身,相當於C#中的引用(ref),原數組是刪除的元素組成的數組,返回值是剩下的元素組成的數組。

      var arr = [1,2,3,4,5];

      var arr1 = arr.splice(1,3);  //arr為[2,3,4],返回的數組arr1為[1,5]

      var arr2 = [1,2,3,4,5];

      var arr3 = arr2.splice(2,0,'a','b');  //從第2位開始刪除,刪除兩個元素,然後從該位置插入'a','b';arr2為[],因為沒有刪除任何元素,arr3[1,2,'a','b',3,4,5]

      7、 push()與pop()  在數組尾部添加或刪除一個元素,添加時返回之為最後一個添加的元素,刪除時。返回值為刪除的那個元素。

      push()  函數在數組尾部添加一個元素。

      pop()   函數刪除數組的最後一個元素。

      var arr = [1,2,3]

      arr.push(4);  //arr為[1,2,3,4]

      var arr1 = [1,2,3]

      arr.pop();   //arr1為[1,2]

      8、unshift()和shift()

      shift(),unshift()與push(),pop()只不過,是在數組頭部操作而非尾部。

      shift()  在數組頭部移除一個元素,返回值為被刪元素。

      unshift() 在數組頭部添加一個元素,返回組為最後一個添加的元素。

      var arr = [1,2,3];

      var a = arr.shift();  //arr變為[2,3] a為1

      var arr1 = [1,2,3];

      var b = arr1.unshift([4,5]);  //arr1變為[4,51,2,3],b為4  返回最後一個添加的,先添加5再添加4

      9、toString()和toLocaleString()  將數組轉化為字符串

      var arr = [1,2,3]

      arr.toString();  //生成"1,2,3"  與不使用任何參數的join()是一樣的。

二、ECMAScript中的數組方法

    1、forEach()  forEach() 從頭到尾遍歷數組,為每個元素調用指定的函數。

      var arr = [1, 2, 3, 4, 5];
        var sum = 0;
        arr.forEach(function (value) {
            sum = sum + value;
        });
        document.write(sum);  //sum最終為15

     2、map()  map()方法將調用的數組的每個元素傳遞給指定的函數,並返回一個數組。

      var arr = [1, 2, 3, 4, 5];
        var arr1 = arr.map(function (value) {
            return value + 1;
        });
        document.write(arr1.join()); //arr1為[2,3,4,5,6]

     3、filter()  filter()過濾,返回的元素是調用數組的一個子集,過濾掉不符合條件的元素。

        var arr = [1, 2, 3, 4, 5, 6];
        var arr1 = arr.filter(function (i) { return i % 2 == 0 });
        document.write(arr1.join());  //arr1為[2,4,6]

     4、every()和some()  

      every()當且僅當數組裡的所有元素調用判定函數都返回true,它才返回true。第一次返回false就停止遍歷。

      some()當數組裡存在一個元素調用判定函數返回true,它就返回true。第一次返回true就停止遍歷。

        var arr = [1, 2, 3, 4, 5, 6];
        var a = arr.every(function (x) { return x > 3; });
        var b = arr.some(function(y){ return y > 3; });
        document.write("a的值是:" + a);  //a的值是false,a中不是所有元素大於3
        document.write("b的值是:" + b);  //b的值是true,b中存在元素大於3

     5、reduce()和reduceRight()

      reduce()  將數組中的元素以指定函數進行組合,生成單個值,第一個參數是簡化操作函數,第二個參數是傳遞給函數的初始值。最後結果是初始值再按組合函數與最後結果計算一次。第二個參數即初始值可以省略,當初始值省略就直接從第一個元素開始計算。

        var arr = [1, 2, 3, 4, 5, 6];
        var count = arr.reduce(function (x, y) { return x + y; },0);
        document.write(count);
      reduceRight();  與reduce()唯一的不同就是它從右至左選擇元素進行計算。

     6、indexOf()和lastInsexOf()

     indexOf()  indexOf()從頭至少尾返回找到的第一個元素的索引。

     lastIndexOf()  lastIndexOf()倒序查找元素,返回第一個找到元素的索引。

        var arr = [1, 2, 3, 2, 1];
        var i = arr.indexOf(2);  //從頭至尾搜索,第一次遇見2是arr[1],因此返回1
        var j = arr.lastIndexOf(2);  //從尾至頭搜索,第一次遇見2是arr[3],因此返回3
        document.write(i + "<br/>");
        document.write(j);

     7、Array.isArray();  //判定一個對象是否數組對象

        var arr = [1, 2, 3];
        var str = "str1";
        document.write(Array.isArray(arr));  //返回true arr是數組對象
        document.write(Array.isArray(str));  //返回false str是字符串,並非數組對象
 

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved